This content originally appeared on DEV Community and was authored by SparkedScience
I like to find shortcuts for programming problems. While working on the ELMS:LN web components project, I noticed they like to copy-paste br tags to show off intersection observers. So, to make life easier, I made a simple b-r tag. It apparently makes kittens cry.
Intersection observers
These are used for conditional rendering. An element on the page using intersection observers will not render until the viewable page is within a certain range of the element. For example, say at the end of a long webpage is a wikipedia element. The actual rendering of the wikipedia page, and the API calls to get the information, won't occur until the element is visible on the page. This is very helpful for slower or more taxed connections.
b-r
The b-r tag does not use intersection observers, but it was created to show off the usage of it. b-r has two modes; numbered and automatic. The developer can supply an amount of br tags to insert, and the element will create the line breaks. If no input is supplied, the tag will get the height of the viewable window and insert br tags to push the rest of the content off of the screen.
Feedback loops
My first solution was not elegant, but it worked. (Shamefully, my mentality with most first iterations.) I had a simple for loop to add the tags to the page. During my IST 402 class, my professor used my tag to teach on tag properties and a different way to add tags to html code. He also helped us understand how to make a tag stateful. Honestly, the best help this tag needed.
The kittens
b-r is a tag I made in less than a day for a specific use case. I know copy-pasting a br tag is easy, I'm guilty of that. While the first iteration of just user input was not extremely helpful, I believe the second iteration of conditional numbering based on window height can be useful when working across developers.
Final thoughts on Web components
This is by far not the last web component I will make or work on; My barcode-reader still has a ways to go. Maybe I'll get the chance to bring that project to THON. Either way, web components are here to stay, and I don't plan on going anywhere. Highly adaptable, very useful, and easily portable.
Except with dev.to. Social media isn't really my thing, but I try to stay updated. So expect monthly(?) updates.
This content originally appeared on DEV Community and was authored by SparkedScience
SparkedScience | Sciencx (2021-05-04T18:36:46+00:00) Making a web component that makes kittens cry, apparently. Retrieved from https://www.scien.cx/2021/05/04/making-a-web-component-that-makes-kittens-cry-apparently/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.