NazCodeland Posts - Answer Overflow

Topics

NazCodeland

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers TtRPC KKysely

KPCKevin Powell - Community

•Created by NazCodeland on 6/9/2024 in #front-end

Breaking out a descendent

Hey everyone, I've got this https://codepen.io/bbonsaye/pen/mdYMpKe I'm trying to make the section element take up the space given to the named grid column breakout. If I make it a sibling to article it can be done but I am wondering if I can do this while section is a descendent of main? I even tried doing it by applying subgrid to article but I just learned that article only aligns it's own grid lines to the parents grid lines, and doesn't inherit all of the parents grid lines.

1 replies

KPCKevin Powell - Community

•Created by NazCodeland on 4/10/2023 in #front-end

multiple animations with transition on one of them

20 replies

KPCKevin Powell - Community

•Created by NazCodeland on 4/6/2023 in #front-end

position: relative;

Hey everyone, I have div which has a padding on it, within that div I have an image. These are the styles

div {
  padding: 1rem;
}

img {
  width: 100%;
  position: relative;
  left: -16px;
  right: -16px;
}

div {
  padding: 1rem;
}

img {
  width: 100%;
  position: relative;
  left: -16px;
  right: -16px;
}

It seems like I can only use either left or right but not both.

10 replies

KPCKevin Powell - Community

•Created by NazCodeland on 3/9/2023 in #front-end

tabindex attribute on radio input

It seems like we need to have a name attribute on an input of type radio, otherwise, we can't tap through them, is this correct or am I doing something wrong?

21 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/28/2023 in #os-and-tools

new branch or repository for different tech stack implementation of same site

Hey everyone, I been working on my site with plain HTML, CSS, and JS so far and I've implemented a decent amount of it. I also want to re-create what I have done with a different technology stack (Svelte/SvelteKit/Tailwind)

6 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/20/2023 in #front-end

using spread operator in json obejct

Hey everyone

14 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/14/2023 in #front-end

css theming

Hey everyone, I been trying to implement a contrast theming palette for my website. What I've managed to do: 1) The site contains light/dark mode toggle button 2) The site contains 4 additional contrast themes. If a user selects a theme, the light/dark mode toggle is turned off. 3) When user visits the site with their own OS contrast mode(Contrast Themes on Windows and Increase Contrast on Mac), the sites contrast themes are hidden, to prevent the user enabling a contrast theme on top of their OS contrast theme. 4) When a user visits from from Mac and they have "Increase Contrast" enabled, I've chosen one of the contrast themes of the site for that request. It's working well but I am facing an a problem I can't think a solution for. The problem: in number (4) from above, when I select a contrast theme for the Mac user... this becomes a problem for the Windows user. If the Windows user has their own OS contrast theme selected, when they visit the site, they still get the same theme I selected for the Mac user. That is because, on Windows, you can target high contrast themes with forced-colors: active and for Mac users you can target their "increase contrast" preference with prefers-contrast: more but, it turns that, prefers-contrast: more get's activated even for a Windows User so forced-colors: active == prefers-contrast: more The theme of the website is being added for the Mac user with JavaScript. This is super long message but I needed to include the details.

3 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/12/2023 in #front-end

<system-colors>

16 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/10/2023 in #front-end

media query based on an attribute or media query within an a selector

Hey everyone, I have light/dark mode setup on my website. I'm also trying to handle prefers-color-contrast: less and prefers-color-contrast: more everything is working as expected but one thing! if I go to my site when my OS system theme is light, I get my website in light theme and vice versa if I go there when my OS is set to dark, I get my website in dark mode... however, if I click the theme changer on my website it doesn't change my prefers-color-scheme because that's set by my OS settings.

6 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/7/2023 in #front-end

css selectors

shouldn't these two be identical https://codepen.io/bbonsaye/pen/KKBLdzW

19 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/7/2023 in #front-end

Colorblindness accessibility

Hey everyone, it seems impossible to have a specific set of foreground/background colors pass AA and AAA contrast checks for all types of colorblindness. Any ideas on how to make a specific set of foreground/background colors as accessible as possible for different types of colorblindness or any suggestions on that.

7 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/7/2023 in #front-end

keyboard accessibility

Hey everyone, I have a menu where the links are keyboard accessible. I just learned that for mobile viewports where the menu is minimized, the menu links should not be keyboard accessible unless, the menu is not minimized when in the mobile viewport. so, my nav looks like this

  <nav class="menu">
        <ul class="menu__links">
          <li><a tabindex="-1" href='/' autofocus>Home</a></li>
          <li><a tabindex="-1" href='/about'>About Me</a></li>
          <li><a tabindex="-1" href='/portfolio'>Portfolio</a>
          <li><a tabindex="-1" href='/viewResume'>Resume</a>
            <ul class='nested-menu'>
              <li><a href="/design">UX/UI Design</a></li>
              <li><a href="/development">Web Development</a></li>
            </ul></li>
          <li><a href='/contact'>Contact</a></li>
          <li><a href='/blog'>Blog</a></li>
        </ul>
    </nav>

  <nav class="menu">
        <ul class="menu__links">
          <li><a tabindex="-1" href='/' autofocus>Home</a></li>
          <li><a tabindex="-1" href='/about'>About Me</a></li>
          <li><a tabindex="-1" href='/portfolio'>Portfolio</a>
          <li><a tabindex="-1" href='/viewResume'>Resume</a>
            <ul class='nested-menu'>
              <li><a href="/design">UX/UI Design</a></li>
              <li><a href="/development">Web Development</a></li>
            </ul></li>
          <li><a href='/contact'>Contact</a></li>
          <li><a href='/blog'>Blog</a></li>
        </ul>
    </nav>

When the viewport goes below 847px the desktop navigation is changed with a mobile hamburger icon. If you click this icon, the CSS open class get's added to it and it shows the menu links. So, my thinking was, in JavaScript I should check if the viewport width is <= 847

if (window.innerWidth <= 847) {
  // if (the menuElement classList contains 'open' {
  // menuLinks.forEach(link => remove the tabindex Attribute}
}

if (window.innerWidth <= 847) {
  // if (the menuElement classList contains 'open' {
  // menuLinks.forEach(link => remove the tabindex Attribute}
}

8 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/6/2023 in #front-end

word break

Hey everyone, I've got a tricky situation where I have my logo that has each letter in a span (because I am adding animation to each span) but at a certain screensize if the logo overflows, I want it to break at a specific index so I have something like this

11 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/3/2023 in #front-end

animation

I don't understand why is it that square isn't doing a 360deg rotation but instead it goes back up -100px on the y-axis https://codepen.io/pen/?editors=1100

18 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/2/2023 in #front-end

Overflow: hidden;

Hey everyone, I found my question asked on stackoverflow. Basically, I am trying to put an overflow: hidden on body but to do that I need to put overflow: hidden on the html element also. But when doing that, on page refresh 50/50 chance I get a black screen, anyone come across this issue before?

21 replies

KPCKevin Powell - Community

•Created by NazCodeland on 2/1/2023 in #front-end

css flexbox gap

Hey everyone, is there a way to make the gap diminish to 0 while resizing a nav bar before the navbar overflows (assuming the nav bar items have a min-inline-size so they can't shrink)

4 replies

KPCKevin Powell - Community

•Created by NazCodeland on 1/25/2023 in #front-end

css animation with css variable

23 replies

KPCKevin Powell - Community

•Created by NazCodeland on 1/20/2023 in #front-end

Switch case

Hey everyone, I have this code

/* eslint-disable import/extensions */
import wait from '../utils/wait.js';

const monitor = document.querySelector('.monitor');
const monitorBody = document.querySelector('.monitor-body');
const monitorLeg = document.querySelector('.monitor-leg');

const languageIcon = document.querySelector('.language-icon');

const languageIcons = [
  'html icon.svg',
  'css icon.svg',
  'javascript icon.svg',
  'python icon.svg',
  'svelte icon.svg',
];

async function rotateIcons(icons) {
  for (let icon = 0; languageIcons.length > 0; icon += 1) {
    if (icon === languageIcons.length) {
      icon = 0;
    }

    languageIcon.href.baseVal = `/images/${languageIcons[icon]}`;

    switch (languageIcons[icon]) {
      case 'html icon.svg':
        monitor.classList.remove('svelte-svg-monitor-fill');
        monitor.classList.add('html-svg-monitor-fill');
        break;
      case 'css icon.svg':
        monitor.classList.remove('html-svg-monitor-fill');
        monitor.classList.add('css-svg-monitor-fill');
        break;
      case 'javascript icon.svg':
        monitor.classList.remove('css-svg-monitor-fill');
        monitor.classList.add('javascript-svg-monitor-fill');
        break;
      case 'python icon.svg':
        monitor.classList.remove('javascript-svg-monitor-fill');
        monitor.classList.add('python-svg-monitor-fill');
        monitorLeg.classList.add('python-svg-leg-fill');
        break;
      case 'svelte icon.svg':
        monitor.classList.remove('python-svg-monitor-fill');
        monitorLeg.classList.remove('python-svg-leg-fill');
        monitor.classList.add('svelte-svg-monitor-fill');
        break;

      default:
        break;
    }

    // eslint-disable-next-line no-await-in-loop
    await wait(2000);
  }
}

if (languageIcon) rotateIcons(languageIcons);

/* eslint-disable import/extensions */
import wait from '../utils/wait.js';

const monitor = document.querySelector('.monitor');
const monitorBody = document.querySelector('.monitor-body');
const monitorLeg = document.querySelector('.monitor-leg');

const languageIcon = document.querySelector('.language-icon');

const languageIcons = [
  'html icon.svg',
  'css icon.svg',
  'javascript icon.svg',
  'python icon.svg',
  'svelte icon.svg',
];

async function rotateIcons(icons) {
  for (let icon = 0; languageIcons.length > 0; icon += 1) {
    if (icon === languageIcons.length) {
      icon = 0;
    }

    languageIcon.href.baseVal = `/images/${languageIcons[icon]}`;

    switch (languageIcons[icon]) {
      case 'html icon.svg':
        monitor.classList.remove('svelte-svg-monitor-fill');
        monitor.classList.add('html-svg-monitor-fill');
        break;
      case 'css icon.svg':
        monitor.classList.remove('html-svg-monitor-fill');
        monitor.classList.add('css-svg-monitor-fill');
        break;
      case 'javascript icon.svg':
        monitor.classList.remove('css-svg-monitor-fill');
        monitor.classList.add('javascript-svg-monitor-fill');
        break;
      case 'python icon.svg':
        monitor.classList.remove('javascript-svg-monitor-fill');
        monitor.classList.add('python-svg-monitor-fill');
        monitorLeg.classList.add('python-svg-leg-fill');
        break;
      case 'svelte icon.svg':
        monitor.classList.remove('python-svg-monitor-fill');
        monitorLeg.classList.remove('python-svg-leg-fill');
        monitor.classList.add('svelte-svg-monitor-fill');
        break;

      default:
        break;
    }

    // eslint-disable-next-line no-await-in-loop
    await wait(2000);
  }
}

if (languageIcon) rotateIcons(languageIcons);

27 replies

KPCKevin Powell - Community

•Created by NazCodeland on 9/23/2022 in #front-end

Two solutions, which is best practice

Hey everyone, I have a simple counter element that can be increased and decreased, this is the way I chose to do it.

let numberOfItems = document.querySelector('.number-of-items')
let decreaseItem = document.querySelector('.decrease-item');
let increaseItem = document.querySelector('.increase-item');

decreaseItem.addEventListener('click', subtractItem)
increaseItem.addEventListener('click', addItem)

let counter = 0;

function addItem(){
    counter += 1;
    numberOfItems.innerHTML = counter;
}

function subtractItem(){
    if (counter === 0){
        alert("You don't have this item in your cart.")
    }
    else {
        counter -= 1;
        numberOfItems.innerHTML = counter;
    }
}

let numberOfItems = document.querySelector('.number-of-items')
let decreaseItem = document.querySelector('.decrease-item');
let increaseItem = document.querySelector('.increase-item');

decreaseItem.addEventListener('click', subtractItem)
increaseItem.addEventListener('click', addItem)

let counter = 0;

function addItem(){
    counter += 1;
    numberOfItems.innerHTML = counter;
}

function subtractItem(){
    if (counter === 0){
        alert("You don't have this item in your cart.")
    }
    else {
        counter -= 1;
        numberOfItems.innerHTML = counter;
    }
}

36 replies

KPCKevin Powell - Community

•Created by NazCodeland on 9/22/2022 in #front-end

src attribute of img tag

Hey everyone, is there a way to make the src attribute of an img detect an image name in subfolders?

7 replies