The Web Design & Development Megathread

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

«‹›361 »

kedo: Nov 27, 2007

God I hate Tableau.

# ? Nov 17, 2022 17:18

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 17:35

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

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()
}

# ? Nov 18, 2022 17:55

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

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

The Merkinman posted:

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?

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

# ? Nov 18, 2022 19:34

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

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

Last Chance posted:

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.

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.

# ? Nov 19, 2022 00:33

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

Head Bee Guy: Jun 12, 2011; Retarded for Busting; Grimey Drawer

I�ve been teaching myself webdev while my day job has been slow, and I�m looking for some react projects I can do to build a portfolio for when it comes time to monetize computer touching. What kinds of projects or apps would be actually impressive to an employer instead of boilerplate to-do apps and the like?

Side note, any tips on finding FOSS projects to contribute to?

# ? Nov 21, 2022 21:48

camoseven: Dec 30, 2005; RODOLPHONE RINGIN'

Head Bee Guy posted:

I�ve been teaching myself webdev while my day job has been slow, and I�m looking for some react projects I can do to build a portfolio for when it comes time to monetize computer touching. What kinds of projects or apps would be actually impressive to an employer instead of boilerplate to-do apps and the like?

I find it's easiest to solve a problem you actually have. Anything you can make better at work? Any hobbies you have that might could use a little website?

# ? Nov 21, 2022 21:58

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Head Bee Guy posted:

I�ve been teaching myself webdev while my day job has been slow, and I�m looking for some react projects I can do to build a portfolio for when it comes time to monetize computer touching. What kinds of projects or apps would be actually impressive to an employer instead of boilerplate to-do apps and the like?

Side note, any tips on finding FOSS projects to contribute to?

This can be pretty subjective. My advice is to pick a project related to an existing hobby or some idea you can be excited about for its own sake. This really helps with motivation and actually delivering something, instead choosing based on what you think will look good to potential employers.

For example, one of my early personal projects was building a modernized version of NASA's astronomy picture of the day website. I loved the original but the design is literally stuck in the early 90s, and I was able to add a lot of features like a date picker, filmstrip navigation, keyboard shortcuts, etc. https://apod.jered.io/

# ? Nov 21, 2022 22:31

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

Head Bee Guy posted:

I�ve been teaching myself webdev while my day job has been slow, and I�m looking for some react projects I can do to build a portfolio for when it comes time to monetize computer touching. What kinds of projects or apps would be actually impressive to an employer instead of boilerplate to-do apps and the like?

Side note, any tips on finding FOSS projects to contribute to?

camoseven posted:

I find it's easiest to solve a problem you actually have. Anything you can make better at work? Any hobbies you have that might could use a little website?

Anony Mouse posted:

pick a project related to an existing hobby or some idea you can be excited about for its own sake. This really helps with motivation and actually delivering something.

+1

I'll throw in some practicals:

- Put the project on GitHub with a nice readme, code with comments, and nicely formatter according to some linter. It MUST include a live demo.
- Make at least one project that eats some data from an API and renders it into a useful website

CarForumPoster fucked around with this message at 02:23 on Nov 22, 2022

# ? Nov 22, 2022 02:20

Violator: May 15, 2003

Any good Black Friday discounts on educational resources or services?

# ? Nov 25, 2022 04:19

punissuer: Nov 6, 2009

Violator posted:

Any good Black Friday discounts on educational resources or services?

Level up tutorials is 50 pct off of pro - Scott Tolinski from Syntax podcast

# ? Nov 25, 2022 04:51

prom candy: Dec 16, 2005; Only I may dance

RefactoringUI book plus TailwindUI in a package for half off I think. Dan Abramov's Just JavaScript course is also half off.

# ? Nov 25, 2022 06:27

Violator: May 15, 2003

Here�s a list of Laravel Black Friday sales mixed with general PHP/JS courses/tools:

https://laravel-news.com/black-friday-specials

# ? Nov 25, 2022 18:59

Boba Pearl: Dec 27, 2019; by Athanatos

So I'm thinking about running two webcomics simultaneously on the same site, maybe a bad idea, maybe not an extra domain name wouldn't be that much, but keeping all the traffic in one place is nice too.

Anyways, what I want to do, is depending on which comic you're in get the first and last page of that comic, So if you're reading Comic 01, which is Category id 01 the first link is the first comic in that category.

If you're instead reading Comic 02, which has Category id 02, then the first link is the first comic in category 02.

Here's what I've found so far

code:

$args = array(
            'numberposts' => 1, 
             'orderby' => 'post_date',
            'order' => 'ASC', 
            'fields'          => 'ids',
            'category' => 8 
);
     $post_cus = get_posts($args);
     $first_post_id = $post_cus[0];
     $post_url = get_the_permalink ($first_post_id);

What options are available to me / how would I get, the category of the post that's being loaded.

# ? Nov 29, 2022 19:59

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

Disappointing Pie: Feb 7, 2006; Words cannot describe what a disaster the pie was.

This might be the best thread to ask this question inside... I dunno.

I am trying to forward a domain to a Discord Invite. It doesn't work lol. It's a hover domain. I've set the @ and * correctly as specified in Hovers documentation and I've set the nameservers correctly. I'm mostly positive of this because my subdomain discord.website.com redirects perfectly to the Discord. But I can't get the root domain to redirect. Any ideas? I don't have web hosting setup or I'd do a simple redirect script. It was a two decade old web forum that we moved to Discord for.

# ? Dec 1, 2022 00:16

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

What's some decent React component libraries that look much alike applications? For something that'll run as an application in Electron.

I've been looking at Fluent UI, given what the new Outlook beta looks like. But going from v8 to v9, they seem to be axing a lot of the CSS grid abstractions like that Stack component. And the documentation seems to suck.

What about ~~Maltine~~ Mantine? It looks visually pleasing and sort of in-between application and web in regard of looks. But I can't get a proper feel about popularity (and implied continued longevity).

--edit:
Also, ag-grid vs react-data-grid?

Combat Pretzel fucked around with this message at 19:50 on Dec 1, 2022

# ? Dec 1, 2022 19: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!

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

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.

The Merkinman posted:

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

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.

# ? Dec 2, 2022 21:09

Busy Bee: Jul 13, 2004

Busy Bee posted:

Thank you, I reviewed the website but still looking into it to see if it can accomplish what I want it to do.

I essentially want the one page to show something like this. Just a simple week breakdown where the day by day options changes based on the original inputs on top of the page.

Perhaps the different training plans can be a simple text file that can be easily edited / added?
code:
Training Plan - Dropdown menu with X options 
Weight Input - Your weight
Lifting Goal Input 1 - Your lifting goal
Lifting Goal Input 2 - Your lifting goal
Lifting Goal Input 3 - Your lifting goal 


Week 1: Mon             Tue             Wed            Thu             Fri             Sat              Sun
              XYZ             XYZ            XYZ             XYZ           XYZ           XYZ             XYZ

Week 2: Mon             Tue             Wed            Thu             Fri             Sat              Sun
              XYZ             XYZ            XYZ             XYZ           XYZ           XYZ             XYZ

Week 3: Mon             Tue             Wed            Thu             Fri             Sat              Sun
              XYZ             XYZ            XYZ             XYZ           XYZ           XYZ             XYZ

Week 4 etc. 

CarForumPoster posted:

If you're past that point and your users need features that you cant get through a no code app or no code + Zapier type solution, MVP2 from a Fiverr person might not be a bad idea. Expect to throw it away. Expect it to be buggy. Make sure you know how to handle your users data security. Frankly you're still gonna need someone who knows a thing or two about coding just to be able to keep the MVP2 running, get it deployed, etc. prom candy identified some possible solutions to this.

I wanted to follow up on this post I made back in August and the response.

I've spoken with a few web developers on Fiverr and wanted to run it by here to hear your thoughts.

As shown in my first message I quoted above, I have a folder with over 30+ different workout training plans in json format. A user can initially filter out the available training plans by choosing difficult, length etc, and / or choosing a training plan from the list on the website. After they add some further details such as the start date of the workout, the user can see a calendar in a grid format with different weeks.

Initially, the user will only be able to choose the 30+ different workout training plans but in the future, a user could create their own plan if they wish.

How should I best approach the backend here? One suggestion I received is having a MySQL database.

I want to understand this further before I move forward with MVP2 on Fiverr.

# ? Dec 5, 2022 22:32

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

Is there a chat bot that doesn't suck? Clients always have them but they're all a massive drain on page speed and insert so much render-blocking code that PageSpeed Insights throws a fit. Sometimes all the red in every area is the chat bot and the site would score a 90+ otherwise.

# ? Dec 5, 2022 22:38

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

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.

The Merkinman posted:

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

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?

# ? Dec 6, 2022 21:50

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

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.

The Merkinman posted:

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?

Seems like you either wait until February, or verify that the select alternatives work and switch them over. That sucks, oh well.

# ? Dec 7, 2022 04:50

Sab669: Sep 24, 2009

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

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 :saddowns:

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">
    <!-- NAVIGATION MENU -->
    <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">
                                <!--
                                       Goons: Here be 1 <div *ngFor="..."> that loop over an array
                                                     in order to print out all the Nav/Accordion menu items.
                                -->
      </div>
    </div>


    <!-- BODY -->
    <div class="col-10 scrollContainer">
      <div class="row">      
                                <!--
                                       Goons: Here be 6 <ng-containers *ngFor="..."> that loop over a bunch of arrays
                                                      in order to print out various input controls / Angular components.
                                -->
      </div>
    </div>
  </div>

  <!-- FOOTER ROW BUTTONS -->
  <div class="row sticky">
    <div class="col-12 text-end">
      <div class="pt-2"> 
                                <!--
                                       Goons: Some <buttons>
                                -->
      </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. Although I suppose if I can get the scrollbar to tie to the nav menu, then that'll probably fix this issue...

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

Sab669 fucked around with this message at 17:55 on Dec 8, 2022

# ? Dec 8, 2022 17:41

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

Sab669: Sep 24, 2009

Last Chance posted:

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

Put that class right on the accordion div and I do have a scrollbar on the menu now, but for some strange reason I still have that right-most scrollbar :sigh:

Changed it overflow: auto instead as I'd prefer not to always have scrollbars -- but man I swear I tried that earlier this week and it wasn't doing what I wanted lol. Maybe I had it on a wrapper div instead or something.

I'll continue to tinker with it, but definitely a step in the right direction, thanks.

# ? Dec 8, 2022 20:11

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

LifeLynx posted:

Is there a chat bot that doesn't suck? Clients always have them but they're all a massive drain on page speed and insert so much render-blocking code that PageSpeed Insights throws a fit. Sometimes all the red in every area is the chat bot and the site would score a 90+ otherwise.

Maybe this is why websites never load those in right away. There's always 30 seconds or a minute before the chat bot loads in.

Likely helps with speed ranking.

As far as why they all suck I don't know. Seems if I wanted to build one I'd just need to connect to a websockets endpoint. Perhaps after it's js css html load from a script. Wouldn't need to be too intensive.

# ? Dec 8, 2022 21:02

Boba Pearl: Dec 27, 2019; by Athanatos

This code seems to link to the page it's on every time, and I don't know why. I'm still trying to make buttons.

PHP code:

<?php
/**
 * The template for displaying all single posts
 *
 * @link [url]https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post[/url]
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();

// Get the current post object
$post = get_queried_object();

// Check if the post has an ancestor
if ( $post->post_parent ) {
    // Get the ancestor of the post
    $ancestor_id = get_ancestors( $post->ID, 'post' );

    // Customize the navigation links
    $args = array(
        'prev_text' => __( 'First Page', 'text-domain' ),
        'next_text' => __( 'Last Page', 'text-domain' ),
        'screen_reader_text' => __( 'Post navigation', 'text-domain' ),
    );

    // Use a custom WP_Query object to get the posts in the ancestor
    $query = new WP_Query( array( 'post_parent' => $ancestor_id ) );

    // Get the total number of pages
    $total_pages = $query->max_num_pages;

    // Set the first and last page URLs
    $first_page_url = get_pagenum_link( 1 );
    $last_page_url = get_pagenum_link( $total_pages );

    // Modify the previous and next text arguments to include first and last page links
    $args['prev_text'] = '<a href="' . esc_url( $first_page_url ) . '">' . $args['prev_text'] . '</a>';
    $args['next_text'] = '<a href="' . esc_url( $last_page_url ) . '">' . $args['next_text'] . '</a>';
}

// Start the Loop
while ( have_posts() ) :
    the_post();

    // Output the post content
    get_template_part( 'template-parts/content/content-single' );

    // Output the navigation links
    ?>

<div class="pagenavigation">
    <div class="col1"> 
        <a href="<?php echo esc_url( $first_page_url ); ?>">First Page</a>
    </div>
    <div class="col2">
        <?php previous_post_link('%link', '%title', TRUE); ?>
    </div>
    <div class="col3">
        <?php next_post_link('%link', '%title', TRUE); ?>
    </div>
    <div class="col4">
        <a href="<?php echo esc_url( $last_page_url ); ?>">Last Page</a>
    </div>
</div>

<?php
endwhile; // End of the loop.

// Output the footer
get_footer();
?>

# ? Dec 9, 2022 19:38

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

Last Chance posted:

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.

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?

# ? Dec 9, 2022 23:43

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

Boba Pearl: Dec 27, 2019; by Athanatos

If anyone was wondering I gave up on Drupal, Hugo, Jekyll, and Wordpress, and now I'm just running pure html and js

https://bobapearlessence.com

I hate how much I had over complicated this process.

# ? Dec 16, 2022 03:18

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

neocities is sick, well done.

although change the color of your footer text, it's unreadable

Last Chance posted:

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..

huh yeah interesting. good to know at least, thanks!

# ? Dec 16, 2022 03:32

Boba Pearl: Dec 27, 2019; by Athanatos

Thanks, I also found out if I add just a half second of fade in, the weird jumping around and loading never happens, because it's all hidden during fade in.

# ? Dec 16, 2022 06:53

Boba Pearl: Dec 27, 2019; by Athanatos

Does this look OK? I'm colorblind and I don't want to sear anybodies eyes. A lot of color's look much duller to me. I tried to go to the web critique thread in the OP but that's been dead for 6 years. I'm trying to optimize for phones because about 70% of my viewers view on mobile.

https://bobapearlessence.com/

# ? Dec 17, 2022 03:32

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

Boba Pearl posted:

Does this look OK? I'm colorblind and I don't want to sear anybodies eyes. A lot of color's look much duller to me. I tried to go to the web critique thread in the OP but that's been dead for 6 years. I'm trying to optimize for phones because about 70% of my viewers view on mobile.

https://bobapearlessence.com/

It scrolls horizontally on my phone (Galaxy S22 Ultra) because the word "Characters" at the bottom is too long without breaks. But otherwise the layout works.

# ? Dec 17, 2022 04:13

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 17:35

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

Boba Pearl posted:

Does this look OK? I'm colorblind and I don't want to sear anybodies eyes. A lot of color's look much duller to me. I tried to go to the web critique thread in the OP but that's been dead for 6 years. I'm trying to optimize for phones because about 70% of my viewers view on mobile.

https://bobapearlessence.com/

what might help is using a tool like this:

https://accessibleweb.com/color-contrast-checker/

in web there's a set of guidelines for accessibility, and with background and foreground colors, you want to reach at least a AA score, but AAA is usually best. you can use a tool like that to make sure your color choices are visible to people with varying types of vision

e; but yeah your colors look good now!

# ? Dec 17, 2022 06:22

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

«‹›361 »