Kernix Posts - Answer Overflow

Kernix

•Created by Kernix on 11/5/2024 in #front-end

Which of Kevin's courses would you recommend?

I took his free course Conquering Responsive Designs back in 2020. I was thinking of either CSS Demystified or The Responsive Design Bootcamp or Beyond CSS. Whihc would be the best one to start with?

4 replies

KPCKevin Powell - Community

•Created by Kernix on 10/24/2023 in #front-end

Does Kevin have a video on adding a "swoosh" under an element?

I don't know what you call it but instead of an underline for a heading, I've seen a line under the heading but it looks like it was done freehand. Usually it's lowest on the left side and rises to the right, and I think also have variable thickness. Is it partly transform: skew and maybe using ::after? Any help on t his would be greatly appreciated!

9 replies

KPCKevin Powell - Community

•Created by Kernix on 3/15/2023 in #front-end

What job boards do you recommend for finding jobs?

I use 3 different websites for web design / developer jobs. 1. Dice 2. LinkedIn 3. ZipRecruiter I haven't found a good match to apply to on Dice for weeks to months, Zip is a little better than Dice, but LinkedIn often has jobs that I feel qualified enough to apply. Are there any other sites that any of you would recommend? Thanks!

1 replies

KPCKevin Powell - Community

•Created by Kernix on 3/14/2023 in #front-end

Aria attributes for JavaScript added content

I have a project where the results of a form submit is added to the DOM. I'm using mostly createTextNode and append to add text to h3 and span elements. Should I add aria attributes to those elements, and if so which one(s)?

16 replies

KPCKevin Powell - Community

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

Which is better: ./style.css or just style.css?

I've been using ./script.js or ./style.css in my HTML files, but I see developers/designers better than me who do not include ./ and just use script.js or images/photo.jpg instead. I know that they both point to the file in the current directory, but is one preferred over the other, or does it not matter?

2 replies

KPCKevin Powell - Community

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

Help with accessibility: Possible heading

I'm using Pa11y and a Chrome extension called Wave Evaluation Tool to check for accessibility issues. I fixed all the errors for one of my portfolio projects but I have some 5 alerts that I don't know how to fix:

Possible heading Text appears to be a heading but is not a heading element.

I have 5 paragraph tags that I'm JS and the textContent property to output values after submitting a form. So I changed the paragraph to an h4 then accessibility checks changed from issues to errors for empty heading elements. Of course they are empty. So I switched back to paragraph tags but how to I fix the Possible heading issue? Should I add an aria-label attribute? How do you handle something like this? The portfolio page: https://everyguitarchord.com/what-chord-is-this.html

5 replies

KPCKevin Powell - Community

•Created by Kernix on 1/21/2023 in #front-end

map() output/return used as next input (class method)

I hope the answer to my question is not recursion. I need to use the result of the 1st iteration of a map method as the input for the next iteration, up to the last item in the array. I'm using map() inside a method that is part of my class. I have to create a new instance of the class that uses 1st an initial array of strings, and then again for the output/return value of that first instance. That output is the input for the 2nd instance of my class and its output is used in the 3rd, and so on. But I know that is not a good approach even though it works. So how can I get the return value for the first item in a map method to be the input for the next item?

16 replies

KPCKevin Powell - Community

•Created by Kernix on 1/14/2023 in #front-end

RegEx with match() and replace()

I have a regular expression that grabs the double quotes and value for an html tag attribute: str.match(RegEx). And then I use str.replace(RegEx, replacementStr) where the replacementStr is a span tag with a class for changing the color in a pre block. It works like a charm when I only have 1 attribute in my html tag. But when I have 2 attributes (e.g. id and class), I get both matches in each attribute. I can't figure out why it doubling since the id and class values are different. Any insight would be great:

convertedArr.forEach(line => {
  // Quotes
  if (line.match(dblQuote)) {
    result = line.replace(dblQuote, `<span class="${classes[1]}">${line.match(dblQuote)}</span>`);
  } else {
    result = line;
  }
});

convertedArr.forEach(line => {
  // Quotes
  if (line.match(dblQuote)) {
    result = line.replace(dblQuote, `<span class="${classes[1]}">${line.match(dblQuote)}</span>`);
  } else {
    result = line;
  }
});

Here is my RegEx and some console.log:

const dblQuote = /(&quot;[.\w\/:*?-]*\w)(&quot;[.\w\/:*?-]*)/g;
console.log(line.match(dblQuote));
// ['&quot;something&quot;', '&quot;test&quot;']
// ['&quot;test-img&quot;', '&quot;./img/file.jpeg&quot;']
console.log(result)
// &lt;p id=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span> class=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span>&gt;words here&lt;/p&gt;

const dblQuote = /(&quot;[.\w\/:*?-]*\w)(&quot;[.\w\/:*?-]*)/g;
console.log(line.match(dblQuote));
// ['&quot;something&quot;', '&quot;test&quot;']
// ['&quot;test-img&quot;', '&quot;./img/file.jpeg&quot;']
console.log(result)
// &lt;p id=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span> class=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span>&gt;words here&lt;/p&gt;

Mt regexr.com link: https://regexr.com/76539

18 replies

KPCKevin Powell - Community

•Created by Kernix on 1/12/2023 in #front-end

Need help with my JavaScript RegEx

I working on a JavaScript program to output formatted span tags to be pasted into a pre tag for code blocks in my blog posts. 1. I got a RegEx to capture the double-quotes and content in between them for some HTML attributes. 2. I have an HTML entities conversion function for < > ' " and & and I use the result to add a span tag with a class for a paragraph class and image src but not tor a title tag without any attributes. 3. Then I output the html entity conversions with the span tags around them, plus a different span and class around each line. I'm getting the result I want but for some reason my class and src values out outputting twice. It looks like my RegEx is returning an array of 2 matches for each attribute. I wrote another function called matches to convert the array to a string and use that output to write to the DOM but I'm getting an error: line.match is not a function at line 75 of my JS code. Any help or insight into what I'm doing wrong would be greatly appreciated. In my CodePen pen I have a comment and example in the code block of what I want, and then the problem code is below that. The actual code is in the light gray area above the code block: https://codepen.io/jim-kernicky/pen/xxJrwXz

2 replies

KPCKevin Powell - Community

•Created by Kernix on 12/10/2022 in #os-and-tools

What brackets extension do you use in VS Code?

I'm currently using Rainbow Brackets by 2gua. I was using Bracket Pair Colorizer but saw the warning a number of months ago about it not being supported anymore so I made the switch. I'm happy with Rainbow Brackets except for PHP files - the PHP tags are red: <?php and it's unnerving. It makes me thing there is an error. Do any of you use a different brackets extension, or is there a way to adjust the color for PHP tags in Rainbow Brackets?

5 replies

KPCKevin Powell - Community

•Created by Kernix on 12/7/2022 in #front-end

Problems using Parcel

All of a sudden I'm getting a lot of errors trying to run a parcel project that was fine before. I switched all the files to a new laptop and I'm not sure if I ran npm run dev on the new laptop or not. I 'm getting errors for js modules, sass files, and the following:

Server running at http://localhost:1234 
🚨  No entries found.

Server running at http://localhost:1234 
🚨  No entries found.

I also got some kind of windows popup about allowing something to run which I clicked "Allow". I uninstalled Parcel and then installed it again but still the same problem. Does anyone know what is going on? It was working before. I wanted to see if Parcel would load .env variables.

7 replies

KPCKevin Powell - Community

•Created by Kernix on 12/4/2022 in #front-end

I need some help with an async await fetch call

I am using openweathermap.org to get the weather for a hard-coded city name. I created a function before that fetch call using zip code and I am getting and returning the city name from that function. However, I can't seem to use the return value to set the city name. I obviously do not have promises down because I'm getting Promise pending when I console log the function call. I have the code in question in CodePen: https://codepen.io/jim-kernicky/pen/ZERmxaM What am I doing wrong?

15 replies

KPCKevin Powell - Community

•Created by Kernix on 12/2/2022 in #front-end

Do any of you use PostCSS if you are using Parcel?

I'm trying to find an article on why to use both but I can't find anything contrasting the two or when to use both of them together.

8 replies

KPCKevin Powell - Community

•Created by Kernix on 11/28/2022 in #os-and-tools

Any recommendations for a free anti-virus program?

I am almost done setting up my new laptop now (Love it!) and I want to install an anti-virus/malware program. I'm interested in Avast, AVG, Malwarebytes, or Bitdefender. Any thumbs-up or down for those? Something better? I have a Dell Latitude 7490, 8 GB RAM, Windows 11, 64-bit.

8 replies

KPCKevin Powell - Community

•Created by Kernix on 11/25/2022 in #os-and-tools

GitHub SSH key or username and email?

I'll be getting my new laptop tomorrow and I'll have to do all the setup like installing node and git. When I first connected to GitHub I used a username and email to verify my identity. I watched a freeCodeCamp video on Git and they had a section on authenticating with SSH. I was confused by that method. Is there a benefit to using an SSH key? What do you all use?

20 replies

KPCKevin Powell - Community

•Created by Kernix on 11/16/2022 in #os-and-tools

Computer recommendations part 2

I settled on a laptop to buy but I would also like to buy 2 monitors for it and a wireless keyboard/mouse. What do you all use? Is your primary monitor for your editor, and your secondary one for viewing your localhost/webpage? Or vice versa? The monitor I have now seems fine for my editor but it is too horizontal for viewing web pages IMO: 22" 1920x1080. I would like something less rectangular and more square. That ratio is too big for my liking. I am searching Amazon now but wanted to get some recommendations first. Also, any ideas on the "best" wireless mouse/keyboard brand? And what about external speakers? On a side note, would it be worth it to either 1) Upgrade the RAM for my laptop, and/or 2) Somehow "reset" my laptop to ignore Windows 11 updates? For #2, somehow I may have clicked a link to update my Win10 to Win11 and it's been causing problems since then.

15 replies

Gaming

Programming