The Web Design & Development Megathread

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

«‹›6 »

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

Fixins posted:

has vue and or svelte taken over NextJS yet in usage in the workplace?

We use Vue (and Angular) where I work. That's anecdotal so maybe the State of JS 2020 is more indicative of the workplace as a whole.

# ¿ Sep 26, 2021 20:40

Adbot: ADBOT LOVES YOU

# ¿ May 9, 2024 10:59

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

LifeLynx posted:

Is it safe to start using webp yet? caniuse.com says everything supports it except Safari, with the asterisk being "macOS 11 Big Sur or later" but I don't know how common that is. I mostly want PageSpeed Insights to stop yelling at me to serve images in next-gen image formats.

code:

<picture>
    <source srcset="myimage.webp" type="image/webp">
    <source srcset="myimage.jpg" type="image/jpeg">
    <img src="myimage.jpg" alt="my image">
</picture>

Then the browser will just pick the first one it knows how to use, you could even throw AVIF in there as the first source if you want.

# ¿ Oct 7, 2021 21:34

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

mitztronic posted:

Oof, why not code it yourself than import a bloated npm package? Every carousel I�ve ever used at my old work had been hot garbage, they take up huge payloads, perform slow and cumbersome, turn into tech debt, and always could have been done with just a couple hours of code to begin with because nobody ever needs 100 different carousel settings. $0.02

I'm working on one in house and I feel like I'm going to have to add that many options because Creative is making the carousel different on every page.

# ¿ Oct 20, 2021 16: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!

Would something like object fit help?
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

# ¿ Dec 6, 2021 15:57

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

I have a UI/UX question, but I'll preface with saying I'm a developer, not a designer.

On building internal tools, the moment there is a list of anything, it seems the idea is "put it in a table". However this list of things could have all sorts of functionality, like links, buttons, check boxes, and it creates so many columns that it's difficult to read on any screen.

So it got me thinking "should this even be a table?"

Problem is, I don't know how to go answering this question.

# ¿ Dec 7, 2021 20:42

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:

It's a list, not a table. A table has a consistent layout of information with columns that relate to one another.

What do you mean by "columns that relate to each other"?
Thinking on the flip side, ecommerce you could have a list of products and throw it in a table with columns for "image" "name" "size" "price" "rating" etc, but websites don't do that because...?

So am I on the right track in thinking it probably shouldn't be a table?

# ¿ Dec 7, 2021 21:09

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

Yeah a lot of the table stuff seems to be "well it was always this way". A user browsing products would be imagined in a CSS grid sort of layout, but internally managing those same products and suddenly it's pictured as a table.

# ¿ Dec 7, 2021 22:39

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

Is there a number for the contrast between colors? I'mnot talking about the contrast between text and its background color.

I'm saying if I have 3 things all the same, let's say just solid circles, how to check they have enough contrast between themselves, and the white background.

# ¿ Dec 19, 2021 17:26

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

HappyHippo posted:

https://en.m.wikipedia.org/wiki/Color_difference has some info on this

What is the number (numbers??) how do I calculate it out? Is this for similar things, only of varying color, or only the background color/text color combo.

Basically I'm being told to introduce some background colors as an alternative to white (#F2F7F5 as an example), to break up content on a page. However I, and others, feel that it is too subtle, that people won't even be able to see the difference. So I'd like some sort of objective number I can point to and say "no it's too similar to white, not enough people will see it, so it's an a11y issue. Come back with a different color".

I know such a thing exists for colors of text and its background, but that's not what I'm asking about here.

# ¿ Dec 23, 2021 22:52

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

Jabor posted:

If there is currently no colour distinction at all, then introducing one isn't going to be an a11y issue no matter how subtle it is. It just means you'll need to watch for potential a11y issues if part of the design starts relying on users being able to tell the colours apart.

We have 2 colors already, this is a 3rd and one of the original ones is tentatively changing to something more subtle.

I just want to make some case of "the average visitor isn't going to notice this color compared to white because they aren't on a 5K iMac with studio lighting."

# ¿ Dec 24, 2021 02:46

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

Does anyone have any recommendations for learning React? I have plenty of Angular and Vue experience, but it feels like without React, I'm unhirable.

I did the Tic Tac Toe tutorial, and that just made me really confused about how React does things as a whole compared to Angular and Vue. Is React that different or is that Tic Tac Toe a poor example of how things would "really" be ?

# ¿ Jan 25, 2022 20:43

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

Doh004 posted:

Man, anyone have any great references or cheat sheets for fixing accessibility issues on existing websites without straight up rewriting things? Inherited a modern NextJS website but with a lot of bad patterns that's making the website inaccessible (primarily keyboard navigation) and this isn't my actual wheelhouse.

How do you know it's not accessible? Could try the accessibility tools in Chrome (Lighthouse Accessibility) and Firefox (Inspect Accessibility Options). Ideally there should be a person/team for A11y, like in UX making the components in the first place. It's sad that it's so deprioritized across the industry.

I'd just go component by component. There is no quick fix, and those overlay things are really just band-aids. For references, there is of course WCAG.

# ¿ Feb 1, 2022 15:56

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

Doh004 posted:

Like I have an <input> of type "checkbox" and it's not included in the keyboard navigation.

Is there any CSS hiding this so it has a custom style? If so, input[type="checkbox"] cannot be display:none.

# ¿ Feb 1, 2022 16:29

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

Anyone family with Vue 3 and VueDraggable? I have an app that's on Vue 2 and I want to update it, but VueDraggable (upgraded to 'next') isn't working. I'm getting an issue like this person but to debug, I don't have multiple root nodes, and I changed to to element

code:

// data (from endpoint)
groups = [
 {
  "groupId": 5481,
  "groupLabel": "Figure 1",
  "groupDescription": ""	
 },
 {
  "groupId": 2341,
  "groupLabel": "Figure 2",
  "groupDescription": ""
 }
//etc
]

<template>
 <draggable v-model="data.groups" item-key="groupId">
  <template #item="{element}">
   <pre>{{element.groupId}}</pre>
  </template>
 </draggable>
</template>

# ¿ Feb 1, 2022 18:45

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

aperfectcirclefan posted:

Yes, you can use css :after with a content: "%"; call on the text I believe

You cannot put psuedo selectors on an input

# ¿ Feb 18, 2022 18:30

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

worms butthole guy posted:

Hey all, I have a question that i'm hoping super smart goons can assist with.

I have a css grid container I use to have a image slider and some text on the right. I have everything working except for getting the image to actually stretch across the whole container.

How I have it set up is (trunicated):

code:

<div class="slideshowGrid">
  <div class="slideshow-container">
    <div class="mySlides fade">
          <img src="{{ module.slide.slide_image.src }}" alt="{{ module.slide.slide_image.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
    </div>
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  

  <div class="textboxes">
    <div class="text">
      <h3 class="headerText">{% inline_text field="slide.heading_text" value="{{ module.slide.heading_text }}" %}</h3>
      <div class="bodyText">
        {% inline_rich_text field="slide.body_text" value="{{ module.slide.body_text }}" %}
      </div>
    </div>
    <div class="linkBox">
      <div class="linkingText">
        <a href="adsf">Book Now</a>
      </div>
    </div>
  </div>
</div>

I guess my question is; is there anyway to stretch the image div to fill the available column in the grid without forcing the image to be a background image? I know background image is a way to do it, but I feel like it would require some significant code changes to do that. Here's my css:

code:

.slideshowGrid{
  display: grid;
  grid-template-columns: 75% 25%;
    justify-content: center; 
  align-content: center; 
  justify-items: stretch; 
}

.textboxes{
  display: grid;
  justify-items: center;
}

.linkBox{
 align-self: flex-end;
  justify-self: center;
}


/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  height: 500px;
  position: relative;
  margin: auto;
}

.slideshow-container img{
  height: 500px !important;
  width: 1200px !important;
  object-fit: cover !important;
}

/* Caption text */
.text {
  color: black;
  font-size: 15px;
  padding: 8px 12px
  width: 100%;
  align-self: center;
  justify-self: center;
}

Thanks Goons!

So the DIV is the right size, but the img isn't? I think you want object-fit

# ¿ Apr 26, 2022 16:20

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

teen phone cutie posted:

is there some new method to turning browser autofill off? I have both autocomplete="off" and role="presentation" on my input and neither are turning autofill off.

Which browser(s)? Is there maybe an extension that is not honoring the attributes?

# ¿ Sep 21, 2022 23:10

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

Roadie posted:

Browsers all actively ignore autocomplete="off" now because banks and the like were abusing it to force people to always manually type passwords.

Many websites abuse JavaScript. Solution: browsers disable JavaScript.

# ¿ Sep 21, 2022 23:59

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

All this talk about SPAs out of fashion in favor of again MPAs clears up my confusion when I asked how to make the 'back button' faster in my SPA the answer was basically "just load it all from the server"

# ¿ Oct 28, 2022 22:06

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

teen phone cutie posted:

what's the cleanest way to get a page to scroll to your anchor link when you've got a bunch of images on the page that take N milliseconds to load and makes the page larger, so the onLoad anchor link placement ends up being incorrect? Should I just use JS to scroll the page again to the right place?

What I'm asking about is

1. Page loads MYURL.com#something
2. Page scrolls to #something
3. A bunch of images load on the page and make the page height greater
4. Page is now scrolled to the wrong position

Should I just do something like this or is there a better solution I'm not thinking about :
TypeScript code:
const imagesLoaded = 0;

allImages.forEach(eachImage => {
  eachImage.onLoad(() => {
      imagesLoaded += 1
  })
})


....

if(allImages.length === imagesLoaded) {
    scrollPageToAnchor()
}

Are the images a set height and width? Could you do it so the img tag essentially loads a blank image, but given the width and height attributes the DOM is already blocked out so it wouldn't grow once the actual image is loaded?

Or is the entire img tag lazy loaded?

# ¿ Nov 18, 2022 19:25

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

Has anyone else come across this issue? If so, how did you debug, how did you go fix?

https://stackoverflow.com/questions/74369244/select-element-closes-immediately-when-clicked-in-chrome-some-android-devices

# ¿ Dec 2, 2022 19:53

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

Bruegels Fuckbooks posted:

i haven't faced this specific issue but we had other problems with the select element and use select element alternatives to work around its limitations. you might want to see if the problem still happens if you use a select element alternative like select2 or react-select.

Replacing literally all of our native <select> elements with some custom element isn't really an option.
Also seems I'm not the only one seeing the issue

# ¿ Dec 6, 2022 17:13

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

Bruegels Fuckbooks posted:

Actually if you look at the chrome bug tracker, there are multiple issues with the select control right now.

e.g.

https://bugs.chromium.org/p/chromium/issues/detail?id=1380190&q=component%3ABlink%3EForms%3ESelect&can=1 (this looks like your issue even though it's fixed, but this fix is marked for 109)
and
https://bugs.chromium.org/p/chromium/issues/detail?id=1395079&q=component%3ABlink%3EForms%3ESelect&can=1 (similar issue)

Maybe check if it still happens in 109 chrome?

Yeah I checked. Doesn't seem to happen in 110 though, just like the link I posted.

That doesn't come out until February, so idk what I'm supposed to do in the interim, just replace all selects?

# ¿ Dec 7, 2022 03:10

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

Sab669 posted:

So this is a really dumb question, I've got an Angular app that uses Bootstrap for most stuff. Using this for some tooltips in the app - https://ng-bootstrap.github.io/#/components/tooltip/api

Works flawlessly in 2 of my components, doesn't work at all in 2 other components. It's just a bunch of <input type="text" [(ngModel)]="model.someField" ngbTooltip="Whole numbers only">

Cannot figure out what might cause it to not render, can't find any real other examples of this happening on Google. No errors in my dev console when I mouse over the textboxes that aren't working.

I feel like I gotta be missing something dumb/obvious but there's nothing different in any of my .ts files, nothing stand out in the main app.module.ts or anything either.

Any ideas

Hard to debug without code, but maybe you aren't importing the directive correctly in the components where it isn't working?

# ¿ Jun 6, 2023 21:33

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

I'm trying to figure out if the following layout can be done with only CSS.
I'll have a container of a set width and height, say 1,000px x 500px.
In it are two sections, one is a (dynamic) list of lists, and I want it to display them top to bottom, then left to right.
The other section is just whatever the width of the container is minus the width of the lists section.

I've tried flex, grid, columns, but I can't get both things to play well. Either the lists section takes up too much width, or with columns, its width is for some reason the width of a single column.

code:

<!---- 1,000 px width or 100% -->
------------------------------     ^
| 1A | 3A | 5A |  the rest   |     |
| 1B | 3B | 5B |             |     |
| 1C | 4A | 5C |             |     500px
| 2A | 4B      |             |     |
|    | 4C      |             |     |
------------------------------     V

I can put in a codepen if what I'm looking for isn't clear.

# ¿ Feb 10, 2024 16:46

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

fsif posted:

Do the individual list items have fixed widths and heights, or are they dynamic, too?

Heights are dynamic since I guess copy could wrap,
The width is set, ideally 1/6th of the parent (~166.66px)

# ¿ Feb 10, 2024 16:58

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

The Dave posted:

If everything width-wise is fixed could it be lazy enough to add something like column-width: 150px?

I tried that, but then the element that has column-width 150px is itself 150px, regardless of how many columns it is, so then the "rest" takes up too much width.

# ¿ Feb 10, 2024 19:12

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

There's a Codepen. You can see that the Zeta list is behind the #rest for some reason. I don't understand what is determining the width of #lists, and therefore #rest.

# ¿ Feb 10, 2024 19:58

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

spacebard posted:

What if you changed #container display to grid, then add grid-column: 1 to ul#lists and grid-column: 2 to #rest?

That would make the list and rest always be in two columns, and list will flow horizontally as it gets larger since the grid is only 1 row so the height: var(--height) styles can be removed.

If the height is gone, what is determining the height?

# ¿ Feb 10, 2024 21:36

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

Leshy posted:

I think the behaviour that you want can be achieved by setting a grid on the container, with a vertically wrapping flexbox on the container for the lists. See https://codepen.io/LeshyNL/pen/BabqMKr

The left-hand grid cell with the lists will be as wide as it needs to be to fit all columns, and the lists will show vertically as long as they fit, then wrap into additional columns as necessary. Which I think is what you want?

If you set the height to something smaller, so that the list doesn't fit in one column --height: 400px ... it does weird stuff.

Thanks though. Feels like this can't be done with exclusively CSS and I need to use JS to manually figure out what column whatever content goes in.

# ¿ Feb 12, 2024 16:18

Adbot: ADBOT LOVES YOU

# ¿ May 9, 2024 10:59

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

Leshy posted:

With the current lists in the CodePen, it looks as expected down until about a minimum height of 260px, where the number of columns starts exceeding the width of the container. Changing the explicit width on the lists to flex: 0 1 166.67px will alleviate it a little bit by allowing the lists to shrink as needed, but again you will hit a lower limit at some point.

In the end, the lists are individual items that will not break into multiple columns, and when you have more lists or longer lists than the container can handle, you will have issues. If you also want the individual list items to wrap into new columns, you would have to put all list entries and headers into a single list � that would allow flexbox to automatically wrap them correctly, but you would lose the individual list semantics. This is pretty similar to what your suggested JS-based solution would do, by evaluating each individual list item and placing it manually.

This exercise shows why fixed sizes are generally not recommended in webdesign, especially when dealing with variable content. The moment you end up with an unexpected amount of content, things will break in one way or another and you're going to have to set up a bunch of contingencies to deal with those. Having said that, I do not know what your specific use case is here.

Oh wow. I just noticed something which would explain some of my confusion. Looks like that works in Chrome, but not Firefox (what I was doing dev in) nor Safari.
In the latter two, while it does flow onto multiple columns, the width of #lists stays the width of only one column.

# ¿ Feb 12, 2024 22:34

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

«‹›6 »