рари Comments - Answer Overflow

рари

Posts Comments

KPCKevin Powell - Community

•Created by clevermissfox on 11/9/2024 in #front-end

Testing workflow

It's a nice topic, would be interesting to read the thread when more people give their opinions on it

15 replies

KPCKevin Powell - Community

•Created by clevermissfox on 11/9/2024 in #front-end

Testing workflow

I've never encountered such a huge need, but I'd probably break down the testing process into several steps: 1) Let's call it "Major Testing" (e.g maybe daily): - Latest Chrome on Windows - Safari on iOS - Chrome on Android - FF latest 2) "Secondary" testing (e.g maybe weekly): - Edge (as it's Chromium-based, mainly check for Edge-specific features) - Additional devices comes in here - Maybe some older versions of primary browseres 3) Edge Cases (e.g maybe montly) - Opera - Older devices/OS ver - Niche browsers It's more about focusing on which browsers/devices represent the majority of traffic on your resource. We have a dominant group (70-80% or even more) - we prioritize it Also good tip would be creating kind of a spreadsheet-checklist template thingy for what you really wanna check. I believe BrowserStack has one already, you can build your own based on that. Speaking of Chromium-based browsers, we can't really treat all as "Chromium" collectively, because Chrome is kind of a master browser in here. Because of the different speed of implementing of new APIs, it's not uncommon for these browsers to implement something new “long” enough, Chrome tends to do it faster On the other hand, there are cases when Edge implemented something faster than the Chrome team. These are quite specific cases, more affecting some APIs not yet supported by all browsers (for example Payment Request API which is not fully supported by FF for now) But I'd still treat the Chrome as a sort of big brother that you want to give more love to, the others wouldn't be forgotten, but they'd get noticeably less attention

15 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/8/2024 in #front-end

icon swap | InnerHTML security risks

so many little details, that's why I really love the frontend

43 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/8/2024 in #front-end

icon swap | InnerHTML security risks

Didn't play with the sprites enough, thanks for the insights

43 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/8/2024 in #front-end

icon swap | InnerHTML security risks

Briefly: 1) Class Based Approach as in Codepen below is good 2) Approach like this

const toggleTheme = (button) => {
  const sunSvg = `<svg class="sun-icon">...</svg>`;
  const moonSvg = `<svg class="moon-icon">...</svg>`;
  
  button.innerHTML = button.innerHTML.includes('sun-icon') ? moonSvg : sunSvg;
};

document.querySelector('.theme-toggle').addEventListener('click', toggleTheme);

const toggleTheme = (button) => {
  const sunSvg = `<svg class="sun-icon">...</svg>`;
  const moonSvg = `<svg class="moon-icon">...</svg>`;
  
  button.innerHTML = button.innerHTML.includes('sun-icon') ? moonSvg : sunSvg;
};

document.querySelector('.theme-toggle').addEventListener('click', toggleTheme);

Can lead to some XSS and DOM manipulation risk 3) replaceChild is wacky cause it creates a new DOM element on each toggle

const createIcon = (type) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("viewBox", "0 0 24 24");
  svg.classList.add(`${type}-icon`);
  // paths and attrs
  return svg;
};

const toggleTheme = (button) => {
  const currentIcon = button.children[0];
  const newIcon = createIcon(
    currentIcon.classList.contains('sun-icon') ? 'moon' : 'sun'
  );
  button.replaceChild(newIcon, currentIcon);
};

document.querySelector('.theme-toggle').addEventListener('click', toggleTheme);

const createIcon = (type) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("viewBox", "0 0 24 24");
  svg.classList.add(`${type}-icon`);
  // paths and attrs
  return svg;
};

const toggleTheme = (button) => {
  const currentIcon = button.children[0];
  const newIcon = createIcon(
    currentIcon.classList.contains('sun-icon') ? 'moon' : 'sun'
  );
  button.replaceChild(newIcon, currentIcon);
};

document.querySelector('.theme-toggle').addEventListener('click', toggleTheme);

4) SVG sprite is cool just like 1)

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-sun" viewBox="0 0 24 24">
    <path d="[path]"/>
  </symbol>
  
  <symbol id="icon-moon" viewBox="0 0 24 24">
    <path d="[path]"/>
  </symbol>
</svg>


<button class="theme-toggle" aria-label="Toggle theme">
  <svg class="icon icon-sun" width="24" height="24">
    <use href="#icon-sun"/>
  </svg>
  <svg class="icon icon-moon hidden" width="24" height="24">
    <use href="#icon-moon"/>
  </svg>
</button>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-sun" viewBox="0 0 24 24">
    <path d="[path]"/>
  </symbol>
  
  <symbol id="icon-moon" viewBox="0 0 24 24">
    <path d="[path]"/>
  </symbol>
</svg>


<button class="theme-toggle" aria-label="Toggle theme">
  <svg class="icon icon-sun" width="24" height="24">
    <use href="#icon-sun"/>
  </svg>
  <svg class="icon icon-moon hidden" width="24" height="24">
    <use href="#icon-moon"/>
  </svg>
</button>

const toggleTheme = () => {
  document.querySelector('.icon-sun').classList.toggle('hidden');
  document.querySelector('.icon-moon').classList.toggle('hidden');
};

document.querySelector('.theme-toggle').addEventListener('click', toggleTheme);

const toggleTheme = () => {
  document.querySelector('.icon-sun').classList.toggle('hidden');
  document.querySelector('.icon-moon').classList.toggle('hidden');
};

document.querySelector('.theme-toggle').addEventListener('click', toggleTheme);

43 replies

Gaming

Programming