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
fsif
Jul 18, 2003

Mr. Angry posted:

CSS multi column layout would work if you don't mind different sized items not lining up. You might have to set a few more properties for blocks to play nice with the columns as they're intended for inline content.

Thanks, this is a good call.

A bit frustrating that I can't keep them on the rows' tracks, but I can probably just make sure the items are all the same height in most use cases.

Adbot
ADBOT LOVES YOU

Toshimo
Aug 23, 2012

He's outta line...

But he's right!
I have a webm (that with no sound that is effectively an animated gif) and an mp3 from a stupid old gimmick site back when you could just toss them into the loading of a webpage and loop your image over the audio.

I understand that I now will have to have to allow for user input on the controls and can't autoplay, but is there a good and simple way to have this play from 1 button without massively ballooning up the filesize by creating a looped video duplicating the gif for the length of the mp3?

the heat goes wrong
Dec 31, 2005
I´m watching you...
Why not just autoplay a muted video?

marumaru
May 20, 2013



the heat goes wrong posted:

Why not just autoplay a muted video?

won't have audio

Toshimo posted:

I have a webm (that with no sound that is effectively an animated gif) and an mp3 from a stupid old gimmick site back when you could just toss them into the loading of a webpage and loop your image over the audio.

I understand that I now will have to have to allow for user input on the controls and can't autoplay, but is there a good and simple way to have this play from 1 button without massively ballooning up the filesize by creating a looped video duplicating the gif for the length of the mp3?

set it to play through js onClick

go play outside Skyler
Nov 7, 2005


Toshimo posted:

I have a webm (that with no sound that is effectively an animated gif) and an mp3 from a stupid old gimmick site back when you could just toss them into the loading of a webpage and loop your image over the audio.

I understand that I now will have to have to allow for user input on the controls and can't autoplay, but is there a good and simple way to have this play from 1 button without massively ballooning up the filesize by creating a looped video duplicating the gif for the length of the mp3?

The video can be autoplay muted loop and you can start the sound in the onClick event on a button.
code:
// On document load
let mySound =  new Audio("my-sound.mp3");

// onClick
mySound.play();
mySound.loop = true;
Loop doesn't always work so you can try with restarting the sound on completion
code:

mySound.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);

Toshimo
Aug 23, 2012

He's outta line...

But he's right!

go play outside Skyler posted:

The video can be autoplay muted loop and you can start the sound in the onClick event on a button.
code:
// On document load
let mySound =  new Audio("my-sound.mp3");

// onClick
mySound.play();
mySound.loop = true;
Loop doesn't always work so you can try with restarting the sound on completion
code:

mySound.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);

Hrmmm... I guess to give the user a hint they need to click I'll need to put a speaker icon or something on a higher z layer (idk if even browsers support that).

go play outside Skyler
Nov 7, 2005


Toshimo posted:

Hrmmm... I guess to give the user a hint they need to click I'll need to put a speaker icon or something on a higher z layer (idk if even browsers support that).

Position: absolute or relative with a z-index of 1 should do the trick

Toshimo
Aug 23, 2012

He's outta line...

But he's right!
Thanks, y'all. I made the terrible anime thing and I do not apologize: https://toshimo.com/video/hestia.dance/

Thanks for the assistance.

Null of Undefined
Aug 4, 2010

I have used 41 of 300 characters allowed.

Toshimo posted:

Thanks, y'all. I made the terrible anime thing and I do not apologize: https://toshimo.com/video/hestia.dance/

Thanks for the assistance.

I actually made something with basically the exact same idea a little while ago (headphone warning), I handled it by just having the landing screen be a single button to click. Works fine.

I've read that you can call play() on an audio element on a mouse move event instead of a click, which is about as close to autoplay as you can get, but I haven't tried it.

marumaru
May 20, 2013



Toshimo posted:

Thanks, y'all. I made the terrible anime thing and I do not apologize: https://toshimo.com/video/hestia.dance/

Thanks for the assistance.

you have nothing to apologize for.


Null of Undefined posted:

I actually made something with basically the exact same idea a little while ago (headphone warning), I handled it by just having the landing screen be a single button to click. Works fine.

I've read that you can call play() on an audio element on a mouse move event instead of a click, which is about as close to autoplay as you can get, but I haven't tried it.

yep - i ended up doing the same when i wanted to have audio play: https://knockout.chat/2019-review

CarForumPoster
Jun 26, 2013

⚡POWER⚡
I am going to be using several APIs to enrich data about addresses like Yelp, Google Places, Zillow, etc. I won’t always use all of them and there’s probably 40 or so sources being queried cumulatively ~4000/day.

Some of them cost money and addresses often repeat between days. What’s the current best practices for storing the data. Likely using a mix of cron job python scripts and FastAPI webhooks

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



CarForumPoster posted:

I am going to be using several APIs to enrich data about addresses like Yelp, Google Places, Zillow, etc. I won’t always use all of them and there’s probably 40 or so sources being queried cumulatively ~4000/day.

Some of them cost money and addresses often repeat between days. What’s the current best practices for storing the data. Likely using a mix of cron job python scripts and FastAPI webhooks

If you're caching API results, a document database would be OK and probably pretty cheap. Heck, you may even be able to get by with some file/blob storage in that case.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
CSS Question:
I was given a responsive layout that goes against what I suggest, that across screen sizes, the order of the elements is the same when read left to right, top to bottom.

On most screen, they want 2 columns, where images on the left and all the other stuff is on the right
code:
images title
       subtitle
       info 
       cta
However on mobile they want:
code:
title
subtitle
images
info
cta
where 'images' is just smack in the middle of everything.

This doesn't work with our established grid system (basically a modified version of Foundation). I even tried just building it from scratch using CSS Grid and not caring about IE support and I still can't it to work. At best it puts too much space between title/subtitle and images/info because each are half the height of images. Am I missing something, or am I just stuck with duplicating content and/or javascript to constantly look at the screen resolution to add/remove dom elements?

EDIT: OF course I figure it out, lay it out like non-mobile and then on small use flexbox and order....

The Merkinman fucked around with this message at 15:19 on Jun 30, 2020

HappyHippo
Nov 19, 2003
Do you have an Air Miles Card?
Another option is to float "images" to the left and the other stuff to the right. Then set the width of the container based on a media query to be the width of one or two columns.

ModeSix
Mar 14, 2009

nvm. Got it.

ModeSix fucked around with this message at 22:26 on Jul 6, 2020

uncle blog
Nov 18, 2012

My web page needs to fetch a lot of data from an external db. Is there an elegant way to cache already fetched data in my app if the user has already requested that data? The data set is very large, and won't change during a single user session. The user will probably traverse the data in chunks.

I know Apollo does this for QL dbs.

marumaru
May 20, 2013



uncle blog posted:

My web page needs to fetch a lot of data from an external db. Is there an elegant way to cache already fetched data in my app if the user has already requested that data? The data set is very large, and won't change during a single user session. The user will probably traverse the data in chunks.

I know Apollo does this for QL dbs.

there are a few ways. stuff like Memcached and Redis will help. i've only used Redis.
one lazy way i've seen people do it is just cache the results with the [sql] query string.

Ape Fist
Feb 23, 2007

Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.
Ugh is it just me or does Lunacy for Windows kinda 'Not Suck'? I'm not a designer, I'm an FED but I do love design and I've been test driving some stuff lately. I was using Gravit because I'm a weird dope like that and always end up using software which is like 3rd or 4rd recommended suite because it just clicks with me better. Either way I was piss arsing around with Xd and it still feels way too light to get 'serious' work done from a UX design perspective and obviously running on Windows I don't have access to Sketch so I fired up Lunacy and was surprised by how fully featured and depth full it actually was tbh.

go play outside Skyler
Nov 7, 2005


Ape Fist posted:

Ugh is it just me or does Lunacy for Windows kinda 'Not Suck'? I'm not a designer, I'm an FED but I do love design and I've been test driving some stuff lately. I was using Gravit because I'm a weird dope like that and always end up using software which is like 3rd or 4rd recommended suite because it just clicks with me better. Either way I was piss arsing around with Xd and it still feels way too light to get 'serious' work done from a UX design perspective and obviously running on Windows I don't have access to Sketch so I fired up Lunacy and was surprised by how fully featured and depth full it actually was tbh.

I found XD was good when you want a very accurate UI/UX design, basically it's a step after mock-ups and it's actually quite powerful in terms of effects that you can add like shadows, bevels, and interaction stuff.

Get the official design resources from Apple and it'll be a home run!

Never used sketch

Ape Fist
Feb 23, 2007

Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

go play outside Skyler posted:

I found XD was good when you want a very accurate UI/UX design, basically it's a step after mock-ups and it's actually quite powerful in terms of effects that you can add like shadows, bevels, and interaction stuff.

Draw a shape and then try to mirror it.

dexter6
Sep 22, 2003
Not sure where to post this, so if you know of a better place, please let me know...

I'm having a problem with Recaptcha on a site I am volunteering to administer. Over the last week or so, our recaptcha has stopped loading on:

https://fallschurchfire.org/join-us/

After clicking the check box, it spins for a while and then reverts back to an unchecked box. This has been working for years, and the last time it successfully worked was June 29.

Anyone know why it might have stopped working?

Impotence
Nov 8, 2010
Lipstick Apathy
Uncaught Error: reCAPTCHA placeholder element must be empty

dexter6
Sep 22, 2003

Biowarfare posted:

Uncaught Error: reCAPTCHA placeholder element must be empty
I’ve tried googling that but none of the results were helpful. And no changes were made recently so I’m not sure why this would have stopped working.

ahobday
Apr 19, 2007

Bit of a confusing problem: If I edit a CSS file on my shared hosting server, the changes aren't reflected on my website for about 10 minutes. If I change the HTML file on the same server, they're reflected instantly.

I've tried reloading, hard reloading, switching on "Disable HTTP cache when inspector tools are open" in Firefox, opening in a different browser, opening in the browser on my phone, and nothing is making the changes show up except time.

I looked into this and found out perhaps it was my hosting that was caching CSS, so I contacted my hosting provider. They said this:

quote:

There isn't any caching done on the server. Any caching is on the browser side of things or in your web app, like Wordpress with a caching plugin.

To be clear I'm using plain HTML and CSS, and I'm uploading it directly to the server using FTP.

Anyone got any ideas?

Edit: Even though none of the caching options in my hosting's control panel are enabled, running the "Flush cache" command there makes the problem go away. Problem solved, nothing to see here. Thank you.

ahobday fucked around with this message at 08:01 on Jul 16, 2020

Tei
Feb 19, 2011
Probation
Can't post for 24 hours!

ahobday posted:

Anyone got any ideas?

add a version to your files

style.css?v=4324234324324

you can do automatically by adding the mtime of the file, so it will be always a correct version number

shared host probably aggressively cache poo poo

icecreamcheesesteak
Sep 30, 2007

Restore gold standard; occupy japan
I've been looking into developing an auth strategy for a web app using react with a node backend and I'm feeling more confused than I thought I would. It seems like a popular way to implement auth is using jwts instead of using sessions and cookies, and I'm not exactly sure why that is. One benefit I can see to using a jwt is that the frontend can be served from a different domain than the api server and I wouldn't have to worry about third party cookies being disabled by a client, but I believe a third party cookie for an api server wouldn't be necessary if a subdomain is added to the dns record for the frontend that points to the api server. It seems like other than that, there are caveats that you need to account for. If you don't want a jwt to be used after a user logs out, then a white or blacklist would need to be implemented somehow, so a db would need to be hit for each request. A different strategy that I've seen involves creating another token, a refresh token. With a refresh token, jwt access token lifetimes can be kept short to help mitigate the risk of abuse, but apparently refresh tokens are best stored in httpOnly cookies which prevents the benefit of not using cookies.

So why jwts over sessions and cookies? And would someone mind explaining how the refresh process is implemented, or point me towards a good example? I'm mostly wondering when and where refreshing happens. If a client makes a request with an expired jwt and gets a 401, does the client then make a separate request for a new access token using the refresh token, and then repeat the first request with the new access token, or are both tokens sent with each request and the api server creates a new access token if the current one is expired?

lunar detritus
May 6, 2009


If you can use them, use cookies. Tokens make a lot more sense when the API is going to be consumed by third parties with clients that are not necessarily browsers. If you're the only one who's ever going to consume the API just do whatever is easier (cookies)

spiritual bypass
Feb 19, 2008

Grimey Drawer
Use a cookie but make its value a JWT so everyone is unhappy

Jabor
Jul 16, 2010

#1 Loser at SpaceChem

icecreamcheesesteak posted:

If you don't want a jwt to be used after a user logs out, then a white or blacklist would need to be implemented somehow, so a db would need to be hit for each request.

Note that in your proposed example of using sessions + cookies, the cookie is a key used to look up session state in a database, so you're not exactly avoiding this step.

The advantage of using jwts comes into play mostly when your site is large enough to need more than one frontend server - you don't need to have any shared signin state between your different frontends, since any frontend can decode the information from the jwt.

DrPossum
May 15, 2004

i am not a surgeon

icecreamcheesesteak posted:

I've been looking into developing an auth strategy for a web app using react with a node backend and I'm feeling more confused than I thought I would. It seems like a popular way to implement auth is using jwts instead of using sessions and cookies, and I'm not exactly sure why that is. One benefit I can see to using a jwt is that the frontend can be served from a different domain than the api server and I wouldn't have to worry about third party cookies being disabled by a client, but I believe a third party cookie for an api server wouldn't be necessary if a subdomain is added to the dns record for the frontend that points to the api server. It seems like other than that, there are caveats that you need to account for. If you don't want a jwt to be used after a user logs out, then a white or blacklist would need to be implemented somehow, so a db would need to be hit for each request. A different strategy that I've seen involves creating another token, a refresh token. With a refresh token, jwt access token lifetimes can be kept short to help mitigate the risk of abuse, but apparently refresh tokens are best stored in httpOnly cookies which prevents the benefit of not using cookies.

So why jwts over sessions and cookies? And would someone mind explaining how the refresh process is implemented, or point me towards a good example? I'm mostly wondering when and where refreshing happens. If a client makes a request with an expired jwt and gets a 401, does the client then make a separate request for a new access token using the refresh token, and then repeat the first request with the new access token, or are both tokens sent with each request and the api server creates a new access token if the current one is expired?

There's use cases for both, most of which boil down to security needs and risk. The main use case of jwts is they can be issued and signed by trusted third parties (like integrating with google or facebook SSO) or independent servers and then used and verified autonomously by other systems. In what I write, the front end only ever gets to see or know about a jwt if there isn't a backend that can handle them to keep them from leaking. If the front end ever sees or touches them, there's a risk of them getting exposed which enables a security breach.

Session cookies and xsrf cookies are fine and good if your app is just talking directly to one backend. Keep in mind if you do not have them as http only, ANY javascript from your domain can access them. This can be a problem, for example, if someone manages to inject some javascript, exfiltrate them, and then now have effectively the same level of access.

DrPossum fucked around with this message at 14:33 on Jul 19, 2020

icecreamcheesesteak
Sep 30, 2007

Restore gold standard; occupy japan
Thanks everyone. I'm currently looking for a job and am wanting to create and add projects to my github, and it sounds like cookies would better suited for any projects I may put on there.

Jabor posted:

Note that in your proposed example of using sessions + cookies, the cookie is a key used to look up session state in a database, so you're not exactly avoiding this step.

The advantage of using jwts comes into play mostly when your site is large enough to need more than one frontend server - you don't need to have any shared signin state between your different frontends, since any frontend can decode the information from the jwt.

I've seen a couple of articles mention that a benefit of using jwts is better performance due to not needing to grab data from a db, but also later mention that it might be a good idea to have a blacklist for tokens. I know I'd still need to look up session data if using cookies, I just though that if someone wanted to use jwts and have a way to prevent an unexpired token from being used then a session store would be needed, so using jwts wouldn't actually be beneficial in that regard.

I'm unfamiliar with a site having multiple frontend servers. Is a frontend server in this case a server that responds with html pages (as opposed to serving javascript for SPAs), and is the jwt being decoded server side?

Jabor
Jul 16, 2010

#1 Loser at SpaceChem

icecreamcheesesteak posted:

I've seen a couple of articles mention that a benefit of using jwts is better performance due to not needing to grab data from a db, but also later mention that it might be a good idea to have a blacklist for tokens. I know I'd still need to look up session data if using cookies, I just though that if someone wanted to use jwts and have a way to prevent an unexpired token from being used then a session store would be needed, so using jwts wouldn't actually be beneficial in that regard.

This is where the split between access tokens and refresh tokens is useful - if your access token is short-lived, then you don't really need to keep a denylist, instead you only need one for refresh tokens that you check when the refresh token is used. Or perhaps you have a tiny, cheap-to-query system that contains the denylist for access tokens, but only for tokens that haven't yet naturally expired. This can be much faster than a session state database because eventual consistency can be fine here.

quote:

I'm unfamiliar with a site having multiple frontend servers. Is a frontend server in this case a server that responds with html pages (as opposed to serving javascript for SPAs), and is the jwt being decoded server side?

In this context "frontend server" is any application server that directly handles user requests - as distinct from a "backend server" that responds to requests from your other servers (and thus only indirectly handles user requests).

In a large web application, you'll frequently have multiple servers for any given thing, both to handle more load than a single computer can support, and to provide continuous availability even if one of your servers goes down. (For example, if some idiot with a post holer decides they don't need to do a locate before digging straight through a fiber line). Often these servers are widely geographically-distributed, but user requests could still hit any one of them depending on the vagaries of load-balancing, so using session state would require having some state somewhere that can be written to by any frontend yet have that same state be synchronously available from any other frontend. Or you do session-aware load balancing, which comes with its own can of worms.

Vincent Valentine
Feb 28, 2006

Murdertime

A Major Banking Institution™ required our company to use JWTs instead of Cookies for any user-specific data stored on the client side after authentication, no matter how benign, for security purposes. Thankfully it wasn't client specific, because that would have been a nightmare. This also required us to change all of our other apps to use JWT as well so that it was consistent across the board. On the bright side, I actually prefer our JWT solution to our Cookie based solution so it was a win all around, but not something I would have expected to have to do. We're probably going to just use JWTs exclusively going forward.

While it's definitely just a part of the job, I also wanna say holy poo poo retooling a 12 year old application to be up to the security levels A Major Banking Institution™ requires was unbelievably exhausting.

Roadie
Jun 30, 2013
JWTs aren't for session data.

Personally, I've never actually seen a case where they're ultimately fundamentally better than just using a session cookie and centralized backend session management running against something with really fast queries.

go play outside Skyler
Nov 7, 2005


I always found it funny that a lot of sites advertise JWTs as a solution to make page loads faster. As was mentioned in the thread, you'll need to implement a blacklist anyways, because stolen JWT = bad. Aside from that, in practice you will also need to fetch additional data about the current logged-in user anyways.

Roadie
Jun 30, 2013

go play outside Skyler posted:

I always found it funny that a lot of sites advertise JWTs as a solution to make page loads faster. As was mentioned in the thread, you'll need to implement a blacklist anyways, because stolen JWT = bad. Aside from that, in practice you will also need to fetch additional data about the current logged-in user anyways.

Plus, there's basically zero cases where you should actually be favoring cached data over live updates if you can update it. If the data is so static that it can never update, why is it even in user-side data and not just baked into your HTTP/REST responses?

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.

go play outside Skyler posted:

I always found it funny that a lot of sites advertise JWTs as a solution to make page loads faster. As was mentioned in the thread, you'll need to implement a blacklist anyways, because stolen JWT = bad. Aside from that, in practice you will also need to fetch additional data about the current logged-in user anyways.

having an extra 5k of text per web request (which your middleware needs to decode) is also great for performance, as opposed to just putting a guid in cookie or localstorage.

uncle blog
Nov 18, 2012

I'm using a Lambda function in AWS to fetch some data from a rest api. The code looks like this:
code:
const http = require('https')
exports.handler = async (event) => {
    return httprequest().then((data) => {
    const response = {
        statusCode: 200,
        body: JSON.stringify(data),
    };
    return response;
    });
};

function httprequest() {
     return new Promise((resolve, reject) => {
        const options = {
            protocol: "https:",
            host: "url...",
            path: '/',
            port: 443,
            method: 'GET'
        };
        const req = http.request(options, (res) => {
          if (res.statusCode < 200 || res.statusCode >= 300) {
                return reject(new Error('statusCode=' + res.statusCode));
            }
            var body = [];
            res.on('data', function(chunk) {
                body.push(chunk);
            });
            res.on('end', function() {
                try {
                    body = JSON.parse(Buffer.concat(body).toString());
                } catch(e) {
                    reject(e);
                }
                resolve(body);
            });
        });
        req.on('error', (e) => {
          reject(e.message);
        });
        // send the request
       req.end();
    });
}
The returned object looks something like this:
code:
{
    "object": "list",
    "total_cards": 285,
    "has_more": true,
    "next_page": "https://next.url",
    "data": [
		* LIST OF ITEMS * 
   ]
}
What's the best practice way to get all the items in a single array using the https library in the first code block? (I'm used to libraries doing the heavy lifting for me...)

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

uncle blog posted:

I'm using a Lambda function in AWS to fetch some data from a rest api. The code looks like this:
code:
const http = require('https')
exports.handler = async (event) => {
    return httprequest().then((data) => {
    const response = {
        statusCode: 200,
        body: JSON.stringify(data),
    };
    return response;
    });
};

function httprequest() {
     return new Promise((resolve, reject) => {
        const options = {
            protocol: "https:",
            host: "url...",
            path: '/',
            port: 443,
            method: 'GET'
        };
        const req = http.request(options, (res) => {
          if (res.statusCode < 200 || res.statusCode >= 300) {
                return reject(new Error('statusCode=' + res.statusCode));
            }
            var body = [];
            res.on('data', function(chunk) {
                body.push(chunk);
            });
            res.on('end', function() {
                try {
                    body = JSON.parse(Buffer.concat(body).toString());
                } catch(e) {
                    reject(e);
                }
                resolve(body);
            });
        });
        req.on('error', (e) => {
          reject(e.message);
        });
        // send the request
       req.end();
    });
}
The returned object looks something like this:
code:
{
    "object": "list",
    "total_cards": 285,
    "has_more": true,
    "next_page": "https://next.url",
    "data": [
		* LIST OF ITEMS * 
   ]
}
What's the best practice way to get all the items in a single array using the https library in the first code block? (I'm used to libraries doing the heavy lifting for me...)

Maybe I don't understand your question well, but it seems as simple as:

code:
return httprequest().then((data) => {
   const myData = data.reduce( ... ); // or map, or flatten, or whatever you need to do based on what data look like
    const response = {
        statusCode: 200,
        body: JSON.stringify(myData),
    };
    return response;
});

Adbot
ADBOT LOVES YOU

uncle blog
Nov 18, 2012

Yeah I meant what’s the most elegant way to get all the paginated data. The api has an upper limit of results per request, thus the next url.

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