Chooβ™šπ•‚π•šπ•Ÿπ•˜
Chooβ™šπ•‚π•šπ•Ÿπ•˜
KPCKevin Powell - Community
Created by tejveer on 7/23/2024 in #front-end
Replicating Android Clock
The simplest option is to use an intersection observer and control the opacity based on the intersection ratio. This is also possible to do in pure CSS using animation timeline, but that is still too new to use in production.
4 replies
KPCKevin Powell - Community
Created by StarPlatinumSan on 7/22/2024 in #front-end
What's the best framework for Web Apps vs Static Pages
React only replaces DOM manipulation. It does not erase the need to know or understand any other aspect of the Javascript language or the major JS APIs.
30 replies
KPCKevin Powell - Community
Created by StarPlatinumSan on 7/22/2024 in #front-end
What's the best framework for Web Apps vs Static Pages
The only part of vanilla JS that React really replaces is DOM manipulation. You still need to learn other aspects of JS to use React properly. I'm not sure what "full-on React" really means. You can start practicing React more, but don't abandon learning JS.
30 replies
KPCKevin Powell - Community
Created by StarPlatinumSan on 7/22/2024 in #front-end
What's the best framework for Web Apps vs Static Pages
Weird exercises are sometimes given to students because the instructor couldn't think of any better way to practice a specific technique.
30 replies
KPCKevin Powell - Community
Created by StarPlatinumSan on 7/22/2024 in #front-end
What's the best framework for Web Apps vs Static Pages
Yes. Use an anchor tag. That is their purpose.
30 replies
KPCKevin Powell - Community
Created by StarPlatinumSan on 7/22/2024 in #front-end
What's the best framework for Web Apps vs Static Pages
I just looked at the code more carefully and it looks like you are using buttons to do the job of anchor tags. That is overkill. This could be HTML/CSS without any JS. If you want links to look like buttons, you can style them with CSS to look that way.
30 replies
KPCKevin Powell - Community
Created by StarPlatinumSan on 7/22/2024 in #front-end
What's the best framework for Web Apps vs Static Pages
Your site is still responding to user input with JS, so React is fine to use. It's only overkill if the site just provides information and the only possible user interaction is clicking on a link.
30 replies
KPCKevin Powell - Community
Created by StarPlatinumSan on 7/22/2024 in #front-end
What's the best framework for Web Apps vs Static Pages
If React is overkill, Vue and Svelte would be too. I'm not sure which meaning of "static" you are using. If it's static in the sense that content is not dependent on data coming from an external source, React isn't necessarily overkill. If it's static in the sense that there is no Javascript driven changes in the DOM, then React is overkill. For that, I would recommend Astro or Eleventy. Many developers use React solely for the purpose of having reusable code because HTML doesn't have import. Static site generators like Astro and Eleventy allow you to have reusable components that render to plain HTML without any JS, unless you explicitly indicate that you want JS in the output.
30 replies
KPCKevin Powell - Community
Created by octavia0914 on 7/21/2024 in #front-end
Animate on scroll
If you want to use vanilla Javascript, there are two techniques available, which are scroll events and intersection observers. The choice depends on the specific type of scroll linked animation you want. Intersection observers are useful for starting and stopping animations based on what is visible, but they are not ideal for controlling the amount or speed of the animation based on the speed of scroll or scroll position. The scroll event is better if you want the scroll speed or position to control the animation.
12 replies
KPCKevin Powell - Community
Created by snxxwyy on 7/22/2024 in #front-end
position absolute on heading
The white-space is a shorthand that can include white-space-collapse with text-wrap. In this specific case, you can also use text-wrap, because no white-space-collapse was specified. The nowrap is specifically a text-wrap setting that is being declared via white-space instead.
8 replies
KPCKevin Powell - Community
Created by snxxwyy on 7/22/2024 in #front-end
position absolute on heading
I did that to prevent the icon from going on the next line alone. It is forced to stay with the last word.
8 replies
KPCKevin Powell - Community
Created by snxxwyy on 7/22/2024 in #front-end
position absolute on heading
I reduced the height of the icon because I made it stick to the last word, and that looks bad when it overlaps text on the line above. The alternative would be to increase the line height of the h1.
8 replies
KPCKevin Powell - Community
Created by snxxwyy on 7/22/2024 in #front-end
position absolute on heading
8 replies
KPCKevin Powell - Community
Created by octavia0914 on 7/21/2024 in #front-end
Animate on scroll
That is why "polyfill" was mentioned.
12 replies
KPCKevin Powell - Community
Created by snxxwyy on 7/20/2024 in #front-end
tables | col & colgroup
1) That structure works. 2) It's a very old technique. I think nth-child is more popular now.
10 replies
KPCKevin Powell - Community
Created by snxxwyy on 7/20/2024 in #front-end
tables | col & colgroup
Yes.
10 replies
KPCKevin Powell - Community
Created by snxxwyy on 7/20/2024 in #front-end
tables | col & colgroup
Nesting would have made more sense, but that isn't how the spec was written.
10 replies
KPCKevin Powell - Community
Created by snxxwyy on 7/20/2024 in #front-end
tables | col & colgroup
You have to look at the span attribute of the <col> for it to make sense. In the Batman/Flash example, there is 1 <col> without a span and 2 <col> that each have a span of 2. That matches the 5 columns that are in the table. The first column is not assigned a class. The second and third are in the batman class and the fourth and fifth are in the flash class.
10 replies
KPCKevin Powell - Community
Created by snxxwyy on 7/20/2024 in #front-end
tables | col & colgroup
The <colgroup> is used as a container for the <col> tags, and the <col> tags are for enabling the ability to apply a class to entire columns within a table without placing class names on every <td> directly.
10 replies
KPCKevin Powell - Community
Created by snxxwyy on 7/17/2024 in #front-end
Recommended way to store values for this circumstance
You can use an array of correct answers. If they are in the same order as the questions, you can use the question number as the index for the array to access the correct answer for that question.
8 replies