The Web Design & Development Megathread

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

«‹›360 »

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

uncle blog posted:

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.

Sorry if I misunderstand but it seems like the answer is a rather obvious: a for loop of requests based on the total count and the number of entries in each page. SO you get the first response and then calculate how many more pages to go and for loop it, appending the response into the json string your lambda function will return. If I need the metadata in the response (e.g. has_more or if there's a time I want or something) I'll give each response a UUID. Otherwise I'll just clip the list in the 'data' key and make one big payload to send back.

# ? Jul 26, 2020 16:32

Adbot: ADBOT LOVES YOU

# ? Apr 23, 2024 21:00

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

My main client/reseller is obsessed with getting a high score on Google PageSpeed Insights, thinkwithgoogle.com, GTMetrix, etc. The main issue is that these are Wordpress sites loaded up with SEO and tracking codes, so there's only so much I can do. One problem I think I should be able to solve but can't for some reason is deferring Javascript. I use either of these:

code:

<script async src="http://www.google.com/scriptgoeshere.js"></script>
<script defer src="http://www.google.com/scriptgoeshere.js"></script>

But even Chrome's Network dev tools are picking them up. Some of them take almost two seconds to resolve, which is obviously not ideal, especially considering they load further down the page or even in the footer. I'm getting a headache chasing scores, any advice?

# ? Aug 4, 2020 17:33

marumaru: May 20, 2013

dynamically add those tags with javascript after load :science:

(probably dont do this)

defer should be what you want. have you tried a hello world alert to see that it does, in fact, pop up before the page is loaded?

# ? Aug 4, 2020 17:54

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

Have you tried using autoptimize? That usually increases score by like 20 pts.

I struggle to ever get a WordPress site mobile above like a 80 though.

# ? Aug 4, 2020 21:14

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Empress Brosephine posted:

Have you tried using autoptimize? That usually increases score by like 20 pts.

I struggle to ever get a WordPress site mobile above like a 80 though.

I try to use as few plugins as possible because you never know when a PHP or WP update will happen that breaks it or the plugin author disappears or starts charging for previously free features. But I'll try that one.

# ? Aug 4, 2020 21:21

i vomit kittens: Apr 25, 2019

I'm still somewhat of a beginner so sorry if these are dumb/obvious questions.

Does anyone know of a good resource or tutorial to learn about using Spring Security for user/role/session management with a React front-end? I've read through some of the documentation but it seems a lot more involved than what I'm looking to do with just using it as a REST API.

Is Spring Security even necessary for that? In my testing I've gotten by with creating my own User and Role entities and creating a session cookie upon successful validation. In any request that requires a certain permission, the session cookie gets sent with the request, I query the User db for a user with that session, and then (provided that user exists) check the user's role to see if they have the permission to carry out the request. This seems pretty straightforward to me, but I'm not the most knowledgeable about web security and ,based on the amount of security gently caress-ups I read about online, I have to wonder if I'm missing something that would mean I'm better off learning how to use Spring's built-in functionality.

Additionally, I'm unsure of how well this would work out with displaying certain things on the React front-end. Right now when the user goes to the app the front-end requests their User/Role objects using their session cookie, and then certain components may or may not be rendered depending on the permissions that their role has. Is it possible for them to force those privileged components to render by loving around with the dev console? The actual API requests for anything those components could change would fail anyways because the back-end verifies their permissions, but if there is some way for them to make those components render is there any way to prevent it?

# ? Aug 5, 2020 01:17

Impotence: Nov 8, 2010; Lipstick Apathy

i vomit kittens posted:

Additionally, I'm unsure of how well this would work out with displaying certain things on the React front-end. Right now when the user goes to the app the front-end requests their User/Role objects using their session cookie, and then certain components may or may not be rendered depending on the permissions that their role has. Is it possible for them to force those privileged components to render by loving around with the dev console? The actual API requests for anything those components could change would fail anyways because the back-end verifies their permissions, but if there is some way for them to make those components render is there any way to prevent it?

No. No matter how much you gently caress with this you can always just edit the JS client side to always render it, or ignore your checks. This is why you validate server side.

# ? Aug 5, 2020 01:37

Roadie: Jun 30, 2013

Biowarfare posted:

No. No matter how much you gently caress with this you can always just edit the JS client side to always render it, or ignore your checks. This is why you validate server side.

Or, you know, somebody can just do curl calls directly to your backend.

Always assume that Dinkleberg is ready to catch you with your pants down at the worst possible moment.

# ? Aug 5, 2020 01:46

Tei: Feb 19, 2011

Inacio posted:

dynamically add those tags with javascript after load
(probably dont do this)

do stuff like this

these type of score testers are bullshit, so is okay to fight bullshit with bullshit

this is what I hear people do:

....CSS should be in the headers, and script tags in the bottom, just before </body>. Scripts that don't depend on being loaded on page load can be marked defer. The order is very important to not break any script dependency. CSS can be cut in two, a small embedded, the big one linked.

getting a good score in these testers is only possible making your website either trivial or not wc3 compliant.

Tei fucked around with this message at 07:13 on Aug 5, 2020

# ? Aug 5, 2020 07:09

Impotence: Nov 8, 2010; Lipstick Apathy

Tei posted:

do stuff like this

these type of score testers are bullshit, so is okay to fight bullshit with bullshit

this is what I hear people do:

....CSS should be in the headers, and script tags in the bottom, just before </body>. Scripts that don't depend on being loaded on page load can be marked defer. The order is very important to not break any script dependency. CSS can be cut in two, a small embedded, the big one linked.

getting a good score in these testers is only possible making your website either trivial or not wc3 compliant.

The best thing I've seen someone do to get a high score just to tick a box was make a stub loader that would request all the primary JS/CSS through a websocket, then cache it all in localstorage.

# ? Aug 6, 2020 06:41

Mira: Nov 29, 2009; Max illegality.

What would be the point otherwise?

Is there a site with Javascript puzzles for total dumbass beginners like me?

# ? Aug 6, 2020 12:57

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

Mira posted:

Is there a site with Javascript puzzles for total dumbass beginners like me?

https://leetcode.com/ is probably the most popular right now

# ? Aug 6, 2020 14:05

Vincent Valentine: Feb 28, 2006; Murdertime

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/

FreeCodeCamp's basic algorithm tests are the best place to start. They are basically a Greatest Hits of all the baby's first algorithm challenge questions and even if you don't need help, you should definitely click "get help" followed by "get a hint", because they explain some common methods that you might not have heard of yet and since they're explained in context of a problem it gives you an idea of when it can be used in the future.

Once you exhaust those, while you have a shitload of options you should probably just stick to https://www.leetcode.com. The primary reason being that, unlike a lot of these sites, you will not spend too much time just trying to figure out what the challenge is asking you to do. They're much more clear and better worded than most.

# ? Aug 6, 2020 14:13

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

It's been awhile since I've used a practice site, but I always liked Exercism. It isn't browser based, you pull the practice stuff down to your machine and I believe it is test driven, iirc.

# ? Aug 6, 2020 14:56

Mira: Nov 29, 2009; Max illegality.

What would be the point otherwise?

Appreciate it, all!

# ? Aug 6, 2020 22:58

uncle blog: Nov 18, 2012

So, we're using bazel as a build system on a project. When a pull request gets created, bazel runs through a bunch of tests. As the knowledgeable people are on vacation right now, I'm hoping somebody in here can help.

The automated tests give me this error message:

code:

INFO: Call stack for the definition of repository 'npm' which is a yarn_install (rule definition at /tmp/bazel-cache/external/build_bazel_rules_nodejs/internal/npm_install/npm_install.bzl:450:16):
 - /tmp/bazel-cache/external/build_bazel_rules_nodejs/index.bzl:85:5
 - /tmp/bazel-cache/external/build_bazel_rules_nodejs/index.bzl:85:5
 - /home/runner/work/project/project/WORKSPACE:18:1
Loading: 0 packages loaded
ERROR: An error occurred during the fetch of repository 'npm':
   yarn_install failed: yarn install v1.19.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info If you think this is a bug, please open a bug report with the information provided in "/home/runner/work/project_name/project_name/src/frontend/yarn-error.log".
info Visit [url]https://yarnpkg.com/en/docs/cli/install[/url] for documentation about this command.
 (warning package.json: No license field
warning frontend@0.1.0: No license field
error An unexpected error occurred: "https://registry.yarnpkg.com/@material-ui/system/-/system-4.3.3.tgz: Request failed \"404 Not Found\"".
Process stalled
Active handles:
  - Socket
  - Socket
  - Socket
  - TLSSocket
  - TLSSocket
)

ERROR: no such package '@npm//': yarn_install failed: yarn install v1.19.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info If you think this is a bug, please open a bug report with the information provided in "/home/runner/work/project_name/project_name/src/frontend/yarn-error.log".
info Visit [url]https://yarnpkg.com/en/docs/cli/install[/url] for documentation about this command.
 (warning package.json: No license field
warning frontend@0.1.0: No license field
error An unexpected error occurred: "https://registry.yarnpkg.com/@material-ui/system/-/system-4.3.3.tgz: Request failed \"404 Not Found\"".

There's an installation process, which cannot find npm for some reason?

# ? Aug 7, 2020 11:20

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Here's the real error in there:

code:

error An unexpected error occurred: "https://registry.yarnpkg.com/@material-ui/system/-/system-4.3.3.tgz:
Request failed "404 Not Found"".

Maybe your test server lost connectivity, temporary DNS hiccup, or a black cat sneezed. Take the rest of the month off in imitation of the experts, if you ask me.

# ? Aug 7, 2020 11:47

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Tei posted:

do stuff like this

these type of score testers are bullshit, so is okay to fight bullshit with bullshit

this is what I hear people do:

....CSS should be in the headers, and script tags in the bottom, just before </body>. Scripts that don't depend on being loaded on page load can be marked defer. The order is very important to not break any script dependency. CSS can be cut in two, a small embedded, the big one linked.

getting a good score in these testers is only possible making your website either trivial or not wc3 compliant.

They're obsessed with it and I'll have to learn some dirty tricks to make number go up. I think they're afraid their competition will try to steal customers by showing them these "low" scores and promising to do better. There's only so much I can do though since the sites are loaded with tracking codes and SEO plugins. DOMContentLoaded is at like 1.25 seconds but full Load is at 4.5 seconds or higher, it gets pretty nuts.

# ? Aug 7, 2020 14:07

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

LifeLynx posted:

They're obsessed with it and I'll have to learn some dirty tricks to make number go up. I think they're afraid their competition will try to steal customers by showing them these "low" scores and promising to do better. There's only so much I can do though since the sites are loaded with tracking codes and SEO plugins. DOMContentLoaded is at like 1.25 seconds but full Load is at 4.5 seconds or higher, it gets pretty nuts.

Having my bloated static served gzipped by cloudfront instead of by the EBS instance cut my pagespeed/gtmetrix and improved user experience.

# ? Aug 7, 2020 23:35

mincedgarlic: Jan 4, 2005; I've been blown up, take me to the hospital.

I have a generalist/hobbyist background and am looking for some expertise on CMS platforms for personal web sites and projects. Nothing commercial. I've been using Wordpress but have recently read more and more about security issues. I'm wondering if I there are viable alternatives. (Drupal etc.) For the basic structure I need, it might be better to learn CSS. Any recommendations on a low-barrier-of-entry CMS platform that's not likely to attract Turkish hacking groups?

# ? Aug 8, 2020 18:02

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Drupal is not a low-barrier-of-entry. I've been using it professionally for 8 years now and it's still a pain to use sometimes.

I'd suggest having a look at Craft CMS. It's free for personal use so you can muck around with it on your own.

# ? Aug 8, 2020 18:49

fsif: Jul 18, 2003

I also wouldn't rule out WordPress over security issues, especially for a personal site. Just make sure your password is strong and avoid unpopular and outdated themes/plugins.

# ? Aug 11, 2020 03:42

The Fool: Oct 16, 2003

Netlify CMS + a static site generator might be worth looking in to. It will have a slightly higher barrier to entry, but the netlify free tier works fine for most low traffic personal sites.

# ? Aug 11, 2020 05:36

spiritual bypass: Feb 19, 2008; Grimey Drawer

fsif posted:

I also wouldn't rule out WordPress over security issues, especially for a personal site. Just make sure your password is strong and avoid unpopular and outdated themes/plugins.

Run your build process, put the application into a squashfs, then mount it in the runtime server as read-only. Use an overlay mount for wp-uploads

# ? Aug 11, 2020 14:19

uncle blog: Nov 18, 2012

Using react-router-dom, is there a good way to intercept the user pushing the back button? I want to prompt them with a "You have unsaved changes..." confirm window before letting them go back.

Edit:
I'm using hash routes, which might complicate things.

Edit2:

I cobbled this together:

code:

useEffect(() => {
    let unblock = history.block(() => {
      let shouldBlock = false;
      if (formHasChanged()) {
        shouldBlock = window.confirm(
          "You have unsaved changes. Want to leave anyway?"
        );
      }
      if (!shouldBlock) {
        unblock();
        history.push("/");
      }
    });
  }, [form]);

The problem is, that the unblock isn't properly called, making the entire application prompt for any transition.

uncle blog fucked around with this message at 11:49 on Aug 13, 2020

# ? Aug 13, 2020 09:20

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

uncle blog posted:

Using react-router-dom, is there a good way to intercept the user pushing the back button? I want to prompt them with a "You have unsaved changes..." confirm window before letting them go back.

Edit:
I'm using hash routes, which might complicate things.

Edit2:

I cobbled this together:
code:
useEffect(() => {
    let unblock = history.block(() => {
      let shouldBlock = false;
      if (formHasChanged()) {
        shouldBlock = window.confirm(
          "You have unsaved changes. Want to leave anyway?"
        );
      }
      if (!shouldBlock) {
        unblock();
        history.push("/");
      }
    });
  }, [form]);
The problem is, that the unblock isn't properly called, making the entire application prompt for any transition.

I pasted your first sentence into google and this was in the first couple results. Seems to do what you want: https://medium.com/@subwaymatch/disabling-back-button-in-react-with-react-router-v5-34bb316c99d7

# ? Aug 14, 2020 01:21

Boosh!: Apr 12, 2002; Oven Wrangler

Has anyone here been successful using Google or Adobe fonts for Outlook.com? I've tried a bunch techniques (@import, <link>, @font-face, etc) but dice. Campaign Monitor's main table says no, but they also have a couple of articles stating it can.

Boosh! fucked around with this message at 04:03 on Aug 18, 2020

# ? Aug 18, 2020 03:43

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

Boosh! posted:

Has anyone here been successful using Google or Adobe fonts for Outlook.com? I've tried a bunch techniques (@import, <link>, @font-face, etc) but dice. Campaign Monitor's main table says no, but they also have a couple of articles stating it can.

Emails will look different in different clients. That's the way it goes.

# ? Aug 18, 2020 13:49

Boosh!: Apr 12, 2002; Oven Wrangler

Lumpy posted:

Emails will look different in different clients. That's the way it goes.

Yeah, I get it. I was just tossing a hail mary for Outlook.com since I was reading conflicting opinions. The art director recently switched to Outlook.com and is not happy heh.

# ? Aug 18, 2020 13:55

Tei: Feb 19, 2011

Boosh! posted:

Has anyone here been successful using Google or Adobe fonts for Outlook.com? I've tried a bunch techniques (@import, <link>, @font-face, etc) but dice. Campaign Monitor's main table says no, but they also have a couple of articles stating it can.

I have never tried -

Here some people got it working at some point
https://www.campaignmonitor.com/blo...ting%20systems.

Fonts are not software but kinda are software
https://superuser.com/questions/1202551/can-truetype-fonts-contain-malicious-code

A email client with webfonts capability could be a virus vector

# ? Aug 18, 2020 14:00

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

Email is dead. Send your mass emails as DMs across Slack servers around the world.

I realized I mixed up the two dev threads I sub to, but I stand by my statement.

# ? Aug 18, 2020 14:55

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

Boosh! posted:

Yeah, I get it. I was just tossing a hail mary for Outlook.com since I was reading conflicting opinions. The art director recently switched to Outlook.com and is not happy heh.

If your art director is surprised by this, they are not qualified for their job.

# ? Aug 18, 2020 15:19

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

Boosh! posted:

Yeah, I get it. I was just tossing a hail mary for Outlook.com since I was reading conflicting opinions. The art director recently switched to Outlook.com and is not happy heh.

How soon until "ugh just make all copy an image it NEEDS to be {{brand font}}".

Actually, how important is it that copy is actually copy? If you just put all the copy in the alt/title is that fine? Is there any concrete proof/documentation that it isn't fine?

# ? Aug 18, 2020 15:19

fsif: Jul 18, 2003

Lumpy posted:

If your art director is surprised by this, they are not qualified for their job.

Seems a bit harsh, heh.

Art directors usually work across different media and knowing the rendering capabilities of the third most popular email client is relatively arcane knowledge.

# ? Aug 18, 2020 21:25

Roadie: Jun 30, 2013

fsif posted:

Seems a bit harsh, heh.

Art directors usually work across different media and knowing the rendering capabilities of the third most popular email client is relatively arcane knowledge.

Outlook.com specifically, sure, but knowing that HTML email styling is fundamentally nonstandardized and unreliable is just basic expected knowledge for that kind of thing (and is why bigcorps usually just go for 'HTML table full of proportionally sized images' if they need anything complicated).

# ? Aug 18, 2020 21:42

spiritual bypass: Feb 19, 2008; Grimey Drawer

Why are you sending emails that aren't plain text?

# ? Aug 18, 2020 22:22

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

rt4 posted:

Why are you sending emails that aren't plain text?

How else would people see our logo and accompanying image that hits all the right brand notes?

# ? Aug 19, 2020 02:05

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

I enjoy the forced email signature I have despite never actually sending emails

# ? Aug 19, 2020 04:18

Volguus: Mar 3, 2009

rt4 posted:

Why are you sending emails that aren't plain text?

Why are people using chat clients that are not IRC?

# ? Aug 19, 2020 05:47

Adbot: ADBOT LOVES YOU

# ? Apr 23, 2024 21:00

Tei: Feb 19, 2011

I always end my email with a single dot in a line so SMTP know I want to sent the email, before closing telnet

# ? Aug 19, 2020 16:33

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

«‹›360 »