The Web Design & Development Megathread

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

Last Chance: Dec 31, 2004

I'm dipping my toes in Google Analytics 4 event tracking/registering/logging via JS. I'm not at all versed with GA or the "correct" way to track events that may or may not be "duplicates."

So I'm wondering if I have an event called "search," like https://developers.google.com/analytics/devguides/collection/ga4/reference/events#search

do I want to prevent a default "page_view" sort of event if someone lands on /search/[TERM] and ONLY track an event called "search" or should I be tracking both?

ex:

Someone lands on /search/[TERM], my app currently logs two events called "page_view" AND "search." Will this pollute Google Analytics' data by registering two events for the same action that the user did?

# ¿ Jun 30, 2022 19:11

Adbot: ADBOT LOVES YOU

# ¿ May 3, 2024 12:53

Last Chance: Dec 31, 2004

Awesome thank you both!

# ¿ Jul 1, 2022 22:36

Last Chance: Dec 31, 2004

Instagram?

# ¿ Jul 21, 2022 18:17

Last Chance: Dec 31, 2004

SmugMug is really nice, we use it where I work

# ¿ Jul 21, 2022 18:32

Last Chance: Dec 31, 2004

Just use an image map and call it a day :mmmhmm:

# ¿ Sep 18, 2022 02:33

Last Chance: Dec 31, 2004

Yeah I�ve always assumed that�s how tracking images in email newsletters works

# ¿ Sep 30, 2022 03:53

Last Chance: Dec 31, 2004

Glad to see the web "development" community is catching up to my 2011 jank method of using a serverside php framework to generate a static site and push up the resulting html to prod upon change.

# ¿ Oct 31, 2022 22:27

Last Chance: Dec 31, 2004

prom candy posted:

All the benefits of SSR but then also the benefits of client-side React once it's hydrated

Yeah, I'm actually working on an SSR NuxtJS webapp right now and I just noticed that you can literally browse it fine without Javascript enabled.

It's pretty great and has defeated my curmudgeonly attitude towards SPAs in general.

# ¿ Nov 1, 2022 02:50

Last Chance: Dec 31, 2004

prom candy posted:

Some people just clone their repos on their servers and run git pull (I don't recommend this).

Lol we used to do this at a job I worked at.

# ¿ Nov 1, 2022 22:45

Last Chance: Dec 31, 2004

kiwid posted:

For anyone that is curious, I ended up going with a panning and zooming via JavaScript approach with absolute positioned anchors. It's probably an accessibility nightmare but it does work well on both desktop and mobile with touch support and pinch to zoom. As a fallback, they get a table (as it always should have been).

Here is the result:

And the fallback:

this is awesome, great job fulfilling those requirements, but you're right that table view is much nicer and will be for anyone new that needs the tool and doesn't understand why the legacy view looks all "bubbly"

# ¿ Nov 15, 2022 15:20

Last Chance: Dec 31, 2004

teen phone cutie posted:

they're avatars so no only a possible max width and height, but could be any height and width really

so even if i had a "loading" height of the max, the page might end up shrinking i think

Any way to parse the images serverside and find their height/width, then render the height/width into the markup?

This is an old problem that I believe some rendering engines have tried to solve (e.g. Chrome and its scroll anchoring - https://developer.chrome.com/blog/scroll-anchoring/), but you're not going to solve this reliably without knowing the image heights.

# ¿ Nov 18, 2022 23:26

Last Chance: Dec 31, 2004

teen phone cutie posted:

amazing worked perfectly thanks for the suggestion.

I'm using a microservice backend, but luckily server-side rendering my React app, and it was pretty trivial to have Node just calculate the dimensions when doing a render on the server.

awesome! Glad to help. I had to beg another dev team to expose image width/height through an api once and they really didn�t get why but it can make a huge difference for things like masonry-like layouts and anchors like in your situation.

# ¿ Nov 19, 2022 03:02

Last Chance: Dec 31, 2004

its a wordpress system! i know this!

code:

//gets current categories of the post you're looking at inside wordpress loop as an array:

$cats = get_the_category();

//you could then query + filter the posts using the first result from that array 
//(if you're not doubling up and categorizing things as more than one category)

$args = array(
            'numberposts' => 1, 
             'orderby' => 'post_date',
            'order' => 'ASC', 
            'fields'          => 'ids',
            'category' => $cats[0]["term_id"]
);

More:
https://developer.wordpress.org/reference/functions/get_the_category/

Last Chance fucked around with this message at 20:22 on Nov 29, 2022

# ¿ Nov 29, 2022 20:19

Last Chance: Dec 31, 2004

Sab669 posted:

God drat it thread I hate CSS / UI Design so much, I'm so bad at it

I'm trying to create a layout similar to what you'd see on Bootstrap's documentation site: https://getbootstrap.com/docs/5.0/components/accordion/
I want a collapsible navigation menu on the left with its own scroll bar, the "actual body" to the right, and a row going across the bottom with some buttons that should always be visible.
I'm pretty close to those requirements, but it's not quite there and I don't understand why

The actual HTML file is approximately 200 lines long, but I think I've cut out everything I can to make try and make it a little easier to digest:
code:
<div class="border-top">
  <div class="row">
    
    <div class="col-2">
      <div class="asr-nav border-end ps-2 pt-2 pe-4">
       <span class="fw-bold" style="font-size:larger">Sections</span>
      </div>

      <div class="accordion" id="accordionNav">
                                
      </div>
    </div>


    
    <div class="col-10 scrollContainer">
      <div class="row">      
                                
      </div>
    </div>
  </div>

  
  <div class="row sticky">
    <div class="col-12 text-end">
      <div class="pt-2"> 
                                
      </div>
    </div>
  </div>
</div>
Almost everything is just Bootstrap styles, but the few we do use:
code:
.asr-nav {
  background-color: #f9f9f9;
}

.scrollContainer {
  overflow: auto;
  width: 80vw;
  height: 90vh;
  border: 1px solid #fff;
  position: relative;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  padding: 5px;
}
So what this looks like:

Looks great right?

Until we expand one of the nav menus:

I can't figure out how to get that left-most scroll bar to "belong" to the nav menu on the left. I've tried wrapping the Accordion div in something with overflow: auto, I've tried wrapping the bootstrap column div which encapsulates the accordion in another div and tinker with the overflow there, nothing works

And I'm not sure why, when the menu expands and causes the scroll bar to appear, why does the "app body" have a large gap between it and the footer buttons

I've been digging around in the browser's Inspector all week and I just can't figure this poo poo out.

Possibly wrap the accordion in a div that has a fixed height of 100vh (100% of user's viewport) and has overflow: scroll turned on:

code:

.accordion-container{
  height: 100vh;
  overflow: scroll;
}

May just work on the .accordion div too, but i'm old school and love me a good container

# ¿ Dec 8, 2022 17:52

Last Chance: Dec 31, 2004

teen phone cutie posted:

one thing i just realized about this is that somehow the forums don't have this issue, but also don't seem to render the width/height into the markup

for example this thread with a lot of images

https://forums.somethingawful.com/showthread.php?noseen=0&threadid=4017185&perpage=40&pagenumber=3#pti20

the scroll position remains even if you open up chrome devtools, check "disable cache" in the network tab and load the page. and looking through the HTML, it doesn't seem like there's any CSS or styling added to the containers of each post, so i'm wondering if there's another way to do this?

Not that I'm aware of, but like i said in my OP i do know that Chrome has a "scroll anchoring feature" that will attempt to anchor pages correctly even as images load in with no height/width.

The link you posted does take me to the correct post on Chrome, but when I tried it in Safari and Firefox, they both failed at staying in the right spot so you may be seeing Chrome's specific functionality at work here..

# ¿ Dec 9, 2022 23:56

Last Chance: Dec 31, 2004

prom candy posted:

Oh and also don't just do exactly what you're asked to do because you'll wind up building the wrong thing. Figure out the "why" behind the ask and then work with the stakeholder to come up with the right approach. I'm not a great coder but I've gotten as far as I have in my career because I'm half-decent at talking tech with non-tech people without talking down to them and also making an effort to understand the business needs that are driving tech requests. Important skills imo.

This is extremely good advice

# ¿ Dec 22, 2022 17:14

Last Chance: Dec 31, 2004

teen phone cutie posted:

this might be an extremely dumb question, but is there a way to set a cookie for https://www. and non-www. versions of your site?

currently, mine only will set for the one you're on

May not be an option for you but I�d settle on just one and redirect traffic to it and not have both.

# ¿ Feb 2, 2023 04:52

Last Chance: Dec 31, 2004

Boba Pearl posted:

I'm apologizing in advance, because this is going to be mean, but I kind of need help.

One of you must be old enough to know how to manually set up an rss feed right? My site is programmed in plain PHP, and I upload the files myself, but I don't know how to do RSS.

If you're looping through blog/news posts and displaying them in HTML via PHP in something like index.php, just do that in a new file called rss.php, but output XML that follows the RSS spec instead of HTML

# ¿ Mar 5, 2023 04:41

Last Chance: Dec 31, 2004

prom candy posted:

And meanwhile Sveltekit is doing cool poo poo like this https://svelte.dev/blog/zero-config-type-safety

They've definitely got me peering over the fence

I've been looking at Sveltekit as well. I've really liked NextJS for a couple of projects, but I'm intrigued..

# ¿ Mar 11, 2023 05:31

Last Chance: Dec 31, 2004

???

# ¿ May 11, 2023 14:58

Last Chance: Dec 31, 2004

Dabir posted:

Hi so I don't do web development in any kind of serious way but I've tinkered a little bit. Why did my friend get upset when I told him I do collapsible lists like this?

code:

<html>
	<head>
		<style>
			input.collapsible {
				display:none
			}
			div.collapsible.content {
				display:none
			}
			input.collapsible:checked + div.collapsible.content {
				display:block
			}
		</style>
	</head>
	
	<body>
		<label for="checkboxone" class="collapsible">Click me</label>
		<input type="checkbox" id="checkboxone" class="collapsible">
		<div class="collapsible content">
			Item one<br>
			Item two<br>
			Item three<br>
		</div>
	</body>
</html>

not really accessible unless you went wild with aria-roles everywhere. sort of a nonstandard way of using a form field.

probably better to use and style something like the <details> tag which has pretty wide support nowadays.

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

# ¿ May 12, 2023 16:47

Last Chance: Dec 31, 2004

I love OO programming. Has it fallen out of favor in some areas? I hear a lot of talk about procedural and functional programming these days

# ¿ Jun 23, 2023 16:37

Last Chance: Dec 31, 2004

May not be a popular answer, but that�s the sort of thing I ask ChatGPT to give me the broad strokes for. Seems to work well in lieu of library documentation that can be too abstract or broad.

# ¿ Aug 11, 2023 23:50

Last Chance: Dec 31, 2004

# ¿ Sep 10, 2023 23:22

Last Chance: Dec 31, 2004

That means the style is on the HTML tag itself via the style attribute, and is often changed/set with JavaScript.

# ¿ Sep 12, 2023 04:31

Last Chance: Dec 31, 2004

Yeah, maybe scale with something like

code:

background-size: 200%;

# ¿ Oct 29, 2023 02:35

Adbot: ADBOT LOVES YOU

# ¿ May 3, 2024 12:53

Last Chance: Dec 31, 2004

What the hell is the Orion browser about? Never heard of it

# ¿ Apr 19, 2024 20:39

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