The Web Design & Development Megathread

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

«‹›361 »

C-Euro: Mar 20, 2010; Soiled Meat

Grump posted:

If you want get a leg up, make sure to add
code:
rel="noreferrer noopener"
any time you have a link go offsite:

source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Thank you both, can I write all those out as rel="nofollow noreferrer noopener"?

# ? May 5, 2020 05:54

Adbot: ADBOT LOVES YOU

# ? Apr 25, 2024 05:59

Sereri: Sep 30, 2008; awwwrigami

Please don't leave the commented out html in your code. Just keep a copy of the original file and copy it from there if you need it. Also look into setting up a version control (realistically git) before starting work.

# ? May 5, 2020 06:43

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

Sereri posted:

Please don't leave the commented out html in your code. Just keep a copy of the original file and copy it from there if you need it. Also look into setting up a version control (realistically git) before starting work.

This this this.

Don�t leave commented out code. GitHub is free and integrates with everything. Make a basic version of the site and the commit/push your changes daily. You will thank yourself later.

# ? May 5, 2020 07:38

Violator: May 15, 2003

Mozilla posted:

Linking to another page with target="_blank" will run the new page in the same process as your page. If the new page executes JavaScript, your page's performance may suffer. This can also be avoided by using rel="noreferrer noopener".

drat, didn't know that.

# ? May 5, 2020 14:26

C-Euro: Mar 20, 2010; Soiled Meat

Sereri posted:

Please don't leave the commented out html in your code. Just keep a copy of the original file and copy it from there if you need it. Also look into setting up a version control (realistically git) before starting work.

CarForumPoster posted:

This this this.

Don�t leave commented out code. GitHub is free and integrates with everything. Make a basic version of the site and the commit/push your changes daily. You will thank yourself later.

Duly noted! She purchased an HTML template for the page and we're editing/publishing it through GitHub Pages as recommended by another goon. It's only been style changes and linking the pre-coded buttons to other websites so far, but if it gets more complicated than that I'll put in some sort of version control. I know GitHub has some branch/master functionality but I haven't yet played around with it.

C-Euro fucked around with this message at 01:32 on May 6, 2020

# ? May 6, 2020 01:29

fsif: Jul 18, 2003

C-Euro posted:

Thank you both, can I write all those out as rel="nofollow noreferrer noopener"?

You only really need noopener in most use cases IMO.

norefferer will hide your site's address from the external site you linked to. I don't *think* it's a security concern unless you want your site to remain private. If you link to another site, you might as well get credit for it.

nofollow is used to tell search engines that your link should not be factored into SEO calculations. The short of it is that Google et al give higher scores to sites that are frequently linked to from external sites; nofollow removes your link from consideration. There are a lot of reasons one might wish to do this, but I doubt any that would make sense for your project. Be a good web citizen and leave nofollow off!

# ? May 6, 2020 03:47

fsif: Jul 18, 2003

Also, yeah, I wouldn't leave big chunks of commented HTML in a template in any professional capacity, but if it's easier for you and you're not putting the site on a web dev portfolio, then you can just leave them in.

Sounds a bit like you're digging into git via GitHub, but unless you're really interested in it or taking web dev past a hobby, I don't recommend bothering with it. It's complicated and clunky at first and not at all necessary for the stuff it sounds like you want to do.

# ? May 6, 2020 04:00

Cugel the Clever: Apr 5, 2009; I LOVE AMERICA AND CAPITALISM DESPITE BEING POOR AS FUCK. I WILL NEVER RETIRE BUT HERE'S ANOTHER 200$ FOR UKRAINE, SLAVA

fsif posted:

You only really need noopener in most use cases IMO.

The MDN link points to this article which suggests otherwise: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

See also:

web.dev posted:

rel="noopener" prevents the new page from being able to access the window.opener property and ensures it runs in a separate process.

I don't think there's any real concern for their use case, but it's still good practice.

# ? May 6, 2020 04:03

fsif: Jul 18, 2003

Cugel the Clever posted:

The MDN link points to this article which suggests otherwise: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

See also:

I don't think there's any real concern for their use case, but it's still good practice.

Yeah I think that second link sort of proves my point. It says either using noopener OR norefferer will prevent the attacks. Google Lighthouse won't flag anchor tags with target blank as long as it has at least one of those.

WordPress used to automatically add norefferer to all external links in new tabs and has since switched to just adding noopener.

https://www.forbes.com/sites/johnrampton/2017/11/06/the-difference-between-nofollow-and-noreferrer-and-why-it-matters/#2f9eaab21e06

Maybe the guy from your first link is right (caniuse says noopener isn't supported in IE11, for example), but I'm just rolling with what Google and WordPress say.

e: scratch all that, Wordpress still adds norefferer after all. Guessing a Google audit doesn't flag a noopener link because it wouldn't present a vulnerability in modern browsers.

tl;dr: yeah just add the "norefferer".

fsif fucked around with this message at 05:23 on May 6, 2020

# ? May 6, 2020 04:51

Cugel the Clever: Apr 5, 2009; I LOVE AMERICA AND CAPITALISM DESPITE BEING POOR AS FUCK. I WILL NEVER RETIRE BUT HERE'S ANOTHER 200$ FOR UKRAINE, SLAVA

fsif posted:

Yeah I think that second link sort of proves my point.

Yeah, I misread your post. Looks like "noreferrer" should be sufficient.

IE needs to die already. I'm incredibly lucky to be working on a project where we've decided to only support evergreen browsers.

# ? May 6, 2020 05:35

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

After all the poo poo that existed that had to be viewed in IE, I think choosing not to support an ancient, lovely browser is a completely justifiable decision and I don't even bring it up to my clients that supporting IE is an option at this point.

Even the least technologically savvy people I know, people who have literally phoned me to ask how to attach things to an e-mail, stopped using IE ages ago. It's awful and unless you have a compelling reason to throw money and time and sanity down a bottomless hole, there is zero reason to support it.

# ? May 6, 2020 13:41

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

PT6A posted:

After all the poo poo that existed that had to be viewed in IE, I think choosing not to support an ancient, lovely browser is a completely justifiable decision and I don't even bring it up to my clients that supporting IE is an option at this point.

Even the least technologically savvy people I know, people who have literally phoned me to ask how to attach things to an e-mail, stopped using IE ages ago. It's awful and unless you have a compelling reason to throw money and time and sanity down a bottomless hole, there is zero reason to support it.

Sadly, there are still compelling reasons aplenty.

# ? May 6, 2020 15:04

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

Lumpy posted:

Sadly, there are still compelling reasons aplenty.

Integrated systems that probably wouldn't be doing regular browsing.
...what else? Companies with lazy sysadmins that because their one bespoke internal page requires IE, they force IE and only IE for everything?

# ? May 6, 2020 15:12

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

The Merkinman posted:

Integrated systems that probably wouldn't be doing regular browsing.
...what else? Companies with lazy sysadmins that because their one bespoke internal page requires IE, they force IE and only IE for everything?

Yep. If we stopped supporting IE11two of our five biggest customers would leave and we'd go out of business.

# ? May 6, 2020 15:14

minato: Jun 7, 2004; cutty cain't hang, say 7-up.; Taco Defender

Every bespoke financial system I've dealt with (especially anything Oracle) is a giant fossilized piece of Web 0.1 poo poo and it will never ever get modernized because the benefits are just not worth the dev $$$. These are the kinds of systems that need eternal IE support.

# ? May 6, 2020 17:32

fsif: Jul 18, 2003

Lumpy posted:

Yep. If we stopped supporting IE11two of our five biggest customers would leave and we'd go out of business.

Completely confused by this. I've never worked in an environment where anyone would tolerate forced IE.

I know you can't name names, but what are the culture of these places? How is this even possible?

# ? May 6, 2020 21:06

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

fsif posted:

Completely confused by this. I've never worked in an environment where anyone would tolerate forced IE.

I know you can't name names, but what are the culture of these places? How is this even possible?

I have no idea, I just know those customers require it. It honestly isn't that big of a deal. We had to fix one odd CSS bug, and we have to polyfill some stuff, but we're a big React app using GraphQL and styled components and all that fancy "modern" stuff just fine.

# ? May 6, 2020 21:11

The Fool: Oct 16, 2003

fsif posted:

Completely confused by this. I've never worked in an environment where anyone would tolerate forced IE.

I know you can't name names, but what are the culture of these places? How is this even possible?

It�s not uncommon for larger enterprises.

# ? May 6, 2020 21:32

Doom Mathematic: Sep 2, 2008

The amount of money/time/effort that it can cost to replace an existing IE-only solution with something which works in a modern browser has no upper bound.

# ? May 7, 2020 20:46

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

Use webasm to run a virtual machine with ie9/windows xp running in kiosk mode.

# ? May 8, 2020 05:43

Tei: Feb 19, 2011

fsif posted:

Completely confused by this. I've never worked in an environment where anyone would tolerate forced IE.

I know you can't name names, but what are the culture of these places? How is this even possible?

In some countries everything is done trough propietary blobs that only run inside IE.
I heard Korea is one of these countries.

On most other countries they are happy to push for "PDF forms" or "java signing". Really some of the bureaucracy needs border what a browser can/should do, and the type of user that reigns and take bureaucracy decisions is not strongly pro-standards.

"PDF forms" seems easy to cope with, you just use a propietary client from Adobe.

"java signing" is more a problem, may require a particular version of a browser paired with a particular version of java. If you got the right version of A + the right version of B, it may work. Or not.. you may have to tweak the java permissions or even manually add some certificates. And this is something lawyers, office people, etc.. people have to do, not computer people. I believe some people resort to use virtual machines with this already configured, others just .. find a way.

Tei fucked around with this message at 06:46 on May 8, 2020

# ? May 8, 2020 06:43

reversefungi: Nov 27, 2003; Master of the high hat!

In my first job as a dev we built tools for very large financial companies. A lot of our sites had to be compatible with IE9, and I think the reasons we usually received were due to legal concerns as well as the fact that a lot of the users of said tools were very old people who didn't understand that things like Chrome existed. We spent the first 6 months of a major re-build of an old tool under the impression that we had to support IE9 and dear god was that painful. Then someone finally noticed that the SOW only mentioned IE11 and we were able to use flexbox, and it was a huge relief at the time.

Now I only have to support Chrome and pretend to support Firefox. It's nice.

# ? May 11, 2020 20:14

C-Euro: Mar 20, 2010; Soiled Meat

Thanks for the norefferer tip!

Working on an About page connected to this sales/landing page using another template. There's a part of the page that we've set up to show headshots, names, and titles of some of her partners. They're set up in rows of three, with this being the code for one such row:

code:

<!-- Start Feature Row -->
        <div class="feature-item__summary row my-4 mx-1">
            <!-- Start Feature -->
            <div class="col-lg-3 col-md-6 text-center text-lg-left mt-4 d-flex flex-column justify-content-between">
              <img data-src="assets/img/Name1-Headshot.png" class="lazy align-self-start py-2 mx-auto mx-lg-0" alt="Name1"/>
              <div>
                <h5 class="mb-0 font-weight-bold">Name1</h5>
                <p class="mb-0">Title1</p>
              </div>
            </div>
            <!-- End Feature -->
  
            <!-- Start Feature -->
            <div class="col-lg-3 col-md-6 text-center text-lg-left mt-4 d-flex flex-column justify-content-between">
              <img data-src="assets/img/Name2-Headshot.png" class="lazy align-self-start py-2 mx-auto mx-lg-0" alt="Name2"/>
              <div>
                <h5 class="mb-0 font-weight-bold">Name2</h5>
                <p class="mb-0">Title2</p>
              </div>
            </div>
            <!-- End Feature -->
  
            <!-- Start Feature -->
            <div class="col-lg-3 col-md-6 text-center text-lg-left mt-4 d-flex flex-column justify-content-between">
              <img data-src="assets/img/Name3-Headshot.png" class="lazy align-self-start py-2 mx-auto mx-lg-0" alt="Name3"/>
              <div>
                <h5 class="mb-0 font-weight-bold">Name3</h5>
                <p class="mb-0">Title3</p>
              </div>
            </div>
            <!-- End Feature -->
        </div>
<!-- End Feature Row -->

Right now they're aligned to the left side of the page, but I'd like them to be centered on the page. My first guess is that I need to add something to that first <div class="feature-item__summary row my-4 mx-1"> statement that starts the row, but I'm not sure what that would be. How would I go about centering this row?

# ? May 12, 2020 03:55

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

C-Euro posted:

code:

<!-- Start Feature Row -->
        <div class="feature-item__summary row my-4 mx-1">
            <!-- Start Feature -->
            <div class="col-lg-3 col-md-6 text-center text-lg-left mt-4 d-flex flex-column justify-content-between">
              <img data-src="assets/img/Name1-Headshot.png" class="lazy align-self-start py-2 mx-auto mx-lg-0" alt="Name1"/>
              <div>
                <h5 class="mb-0 font-weight-bold">Name1</h5>
                <p class="mb-0">Title1</p>
              </div>
            </div>
            <!-- End Feature -->
  
            <!-- Start Feature -->
            <div class="col-lg-3 col-md-6 text-center text-lg-left mt-4 d-flex flex-column justify-content-between">
              <img data-src="assets/img/Name2-Headshot.png" class="lazy align-self-start py-2 mx-auto mx-lg-0" alt="Name2"/>
              <div>
                <h5 class="mb-0 font-weight-bold">Name2</h5>
                <p class="mb-0">Title2</p>
              </div>
            </div>
            <!-- End Feature -->
  
            <!-- Start Feature -->
            <div class="col-lg-3 col-md-6 text-center text-lg-left mt-4 d-flex flex-column justify-content-between">
              <img data-src="assets/img/Name3-Headshot.png" class="lazy align-self-start py-2 mx-auto mx-lg-0" alt="Name3"/>
              <div>
                <h5 class="mb-0 font-weight-bold">Name3</h5>
                <p class="mb-0">Title3</p>
              </div>
            </div>
            <!-- End Feature -->
        </div>
<!-- End Feature Row -->

Read up on whatever CSS framework is driving the template (I'm sure someone here will recognize the syntax and be able to tell, but I can't, but my guess is Bootstrap) and see what each of the rules to ad determine what you need to remove / add to it to get it to move.

# ? May 12, 2020 19:07

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

At a glance, that CSS looks like Tailwind: https://tailwindcss.com

How to centre the rows will probably depend on their containing element, and may involve adding a flex-box attribute or altering the existing mx (margin on x-axis) class.

ynohtna fucked around with this message at 19:43 on May 12, 2020

# ? May 12, 2020 19:41

Violator: May 15, 2003

I�m pretty sure it�s bootstrap based on the row, col-, and mb- classes. Not at a computer now but the bootstrap website has a lot of documentation that can help. I�ll take a look later today if you can�t get it figured out.

Edit: Yeah, adding "justify-content-center" to that parent class should do it.

quote:

<div class="feature-item__summary row my-4 mx-1 justify-content-center">

Violator fucked around with this message at 21:24 on May 12, 2020

# ? May 12, 2020 19:52

oh no computer: May 27, 2003

I'm trying to implement the delete function in my basic React CRUD app. There is a delete button that calls the below function, which puts in a request to my Express API to delete from the DB, and then I want to reload the "show" route (with the deleted data now obviously gone). The data gets deleted from the database as expected, but I cannot for the life of me get the UI to re-render properly.

code:

// App.js

const [ route, changeRoute ] = useState("show"); 

const deleteWorkout = workout_id => {
  fetch(`MY_API_URL/${workout_id}`, {
      method: "DELETE",
      headers: { "Content-Type": "application/json" }})
    .then(() => changeRoute("show"));
};

I think the reason it's not working as written is that route is already in state "show" when I call the function, so calling changeRoute("show") doesn't change anything, and therefore presumably doesn't trigger a render. I can get around this by putting in a dummy call to, for example, changeRoute("edit") before the call to fetch, but this feels hacky plus it causes the interface to briefly flash up with the edit form before switching back to the show route.

I've read about using this.forceUpdate(), which I could try (although I'd have to re-write App as a class component to do it) but I'd heard using this is frowned upon. I've also read a way of doing this with functional components is to set up a dummy state variable and change it to force a re-render, e.g.

code:

const [, forceUpdate] = useState();

.....forceUpdate({});

But this doesn't work either. Surely there's a better way?

# ? May 13, 2020 13:15

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

oh no computer posted:

better way?

Don�t you have your list stored in component state? Why not just remove the thing from the list? The UI should update correctly.

That or call your fetchMyList function again

# ? May 13, 2020 15:05

oh no computer: May 27, 2003

Grump posted:

That or call your fetchMyList function again

I knew it'd be something obvious. The list is stored in another component so it didn't occur to me. Thanks.

# ? May 13, 2020 15:14

abelwingnut: Dec 23, 2002

e: nevermind, misunderstood what i was doing.

abelwingnut fucked around with this message at 23:20 on May 13, 2020

# ? May 13, 2020 22:33

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

Hey guys, https://deno.land/ went 1.0 yesterday and I can't wait to use it, has anyone had any experiences yet?

# ? May 14, 2020 10:46

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

Nolgthorn posted:

Hey guys, https://deno.land/ went 1.0 yesterday and I can't wait to use it, has anyone had any experiences yet?

Call me when it has leftPad :colbert:

# ? May 14, 2020 13:31

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

# ? May 14, 2020 21:15

go play outside Skyler: Nov 7, 2005

I don't get the point with deno. NPM is so bad because you just install random packages from Git, so let's make it so that every package is just included by inserting some url directly in the source file? What makes the deno servers more secure than say some other random persons github repository?

# ? May 15, 2020 09:14

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

It's native V8 that's pretty big. You should be hosting your production code yourself. Npm being the worst thing that has ever happened and combining it with probably the worst developers on earth (javascript) has been a bad experience for me and I'm looking forward to not having to deal with that.

At least as long as it takes people to figure out how to make dependency trees hundreds of modules deep again.

# ? May 15, 2020 10:32

Tei: Feb 19, 2011

go play outside Skyler posted:

I don't get the point with deno. NPM is so bad because you just install random packages from Git, so let's make it so that every package is just included by inserting some url directly in the source file? What makes the deno servers more secure than say some other random persons github repository?

I believe is:

Node, batteries included

Also to be has file-less has possible. Ideally a single file. I guess... thats what I get from reading their website.

# ? May 15, 2020 11:12

marumaru: May 20, 2013

go play outside Skyler posted:

I don't get the point with deno. NPM is so bad because you just install random packages from Git, so let's make it so that every package is just included by inserting some url directly in the source file? What makes the deno servers more secure than say some other random persons github repository?

the point is decentralizing the package ecosystem. there'll definitely be package managers at some point, the catch is that it's managers, not manager

# ? May 15, 2020 13:24

marumaru: May 20, 2013

Nolgthorn posted:

probably the worst developers on earth (javascript)

you should try working with php/java developers

for bonus points tell them to make a form where the submit button is blue and watch a little bit of hell invade our earthly plane

# ? May 15, 2020 13:25

MrMoo: Sep 14, 2000

I just found NW.js, wow people are masochists. NodeJS running in Chromium. Apparently BrightSign digital signage runs on it. Everyone else just runs NodeJS separately and has some communication channel between the two.

# ? May 15, 2020 15:14

Adbot: ADBOT LOVES YOU

# ? Apr 25, 2024 05:59

go play outside Skyler: Nov 7, 2005

MrMoo posted:

I just found NW.js, wow people are masochists. NodeJS running in Chromium. Apparently BrightSign digital signage runs on it. Everyone else just runs NodeJS separately and has some communication channel between the two.

BightSign is a pos, news at 11.

# ? May 15, 2020 15:48

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

«‹›361 »