Very nice list. TIL amount meter and datalist. One remark, if your first point explains lazy loading, your intro does not need to explain what HTML is.
HTML Tips (2020)
91–100 of 136 posts
Re: HTML Tips (2020)
#92I actually used 5 (native search) for a fully static web (non spapp) that I helped build recently:
Re: HTML Tips (2020)
#93Is there any good 'linear'(with a clear learning path, e.g. course/book, as opposed to MDN) resource to learn modern HTML/CSS? Preferably not one starting at Hello World. The thing is I'm primarily a BE developer but I have to do some front-end tasks every now and then and I often catch myself reinventing the HTML5 wheel.
John Duckett's book "HTML & CSS" is good. You can skip to the more advanced chapters if you don't want to start from zero. As much as W3Schools is hated, I find their HTML/CSS/JS guides to be a lot simpler to understand than MDN: https://www.w3schools.com/html/default.asp
Thanks everyone for all the recommendations. I need more time to look into them but I just wanted to add here that the book you mentioned [1] stands out as one of the most aesthetically pleasing IT books I've seen.
Re: HTML Tips (2020)
#94Earlier quoted context omitted.
There's so much stuff in HTML that's almost good enough to replace things we use Javascript for. We should also have had built-in pagination and sorting on tables, like, years ago, with some kind of (optional, if your data aren't all available on the initial page load) back-end spec for how the requests will be shaped and for delivering the data. An awful lot of "AJAX" Javascript use could just be frames and iframes,…
The HTML form element has a lot of interactive controls already e.g. colour picker, a date control for entering dates, file picker, number entry with spinner controls and more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... The problem is that some HTML form controls cannot be styled with CSS to render consistently across browsers. So, many sites fall back on JavaScript to render the control. Here is…
Date pickers and color pickers don't have to be consistent across desktop/tablet/mobile/kiosk/etc. They just have to be consistent across sites, but on the same device.
On Firefox, the date picker is good and I can easily navigate to a year from muscle memory. The same wouldn't work on mobile, so they have different UI and controls. I don't want to use iOS style date pickers on my Android, or the other way around just for consistency.
Many custom date pickers are sluggish and has bad UX, and adds a lot of extra validation complexity with pseudo elements.
Re: HTML Tips (2020)
#95Does lazy loading at least carve out a placeholder spot for the image so that it doesn't throw off the layout? Because if not, please use something that does. There's nothing more frustrating than when I'm trying to read through a page and my spot keeps getting pushed up and up because of dynamically loading elements.
Currently loading="lazy" is not supported by safari https://caniuse.com/loading-lazy-attr
Re: HTML Tips (2020)
#96I wish the tag receuves some love, from both users and browsers.
I recently worked on a page (e.g https://php.watch/rfcs/fibers) that I didn't want to set inline CSS to set a dynamic width for an element. Helps me not use a strict CSP.
I kind of abused the progress element because it has customizable width. Elements that support a width attribute (object, iframe, image, etc) didn't fit that well. Progress elements are pretty nice, supported almost everywhere it mattered to my audience, and with some pseudo properties I never heard before, I could customize the colors and other properties as well.
Re: HTML Tips (2020)
#97So much in this that I didnt know that I will refactor in my code immediately. Thank you for this post!
Re: HTML Tips (2020)
#98Is there any good 'linear'(with a clear learning path, e.g. course/book, as opposed to MDN) resource to learn modern HTML/CSS? Preferably not one starting at Hello World. The thing is I'm primarily a BE developer but I have to do some front-end tasks every now and then and I often catch myself reinventing the HTML5 wheel.
YouTube, NetNinja had great courses that are real easy to follow.
Also read MDN often.
Re: HTML Tips (2020)
#99so, regarding part 2: Email, call, and SMS links:
first of all that is not limited to those kinds of links, generally, in Windows this used to be handled by registering a uri scheme in the registry and associating it with an application for handling that uri scheme, mac has a similar method https://kaihao.dev/posts/Make-your-own-custom-URI-scheme-res...
it used to be that Linux didn't have a way to handle uri schemes (like back in 2006), but it seems to no longer be the case https://unix.stackexchange.com/questions/497146/create-a-cus...
so you can use any uri scheme, magnet links etc. in a link, you can also do stuff with JavaScript with those uri schemes, for example window.location = "tel:some telephone number you want to call".
Nowadays if you have not used a uri scheme in a browser on a particular OS and you click on a tel:phone number link you will end up getting asked if you want to associate links of type tel with a particular application for handling it (assuming you have a handler for tel uri scheme on your OS - on mine it asked me if I wanted to open with FaceTime, as I am on Mac). It used to be that it would just open whatever application was associated with the scheme. I guess it is a security measure.
So you could theoretically end up in a situation where someone does not have a handler for a scheme you are using to make a link. If you want to avoid this for tel and sms links detect if the user is on a phone of some sort because of course those will have handlers for tel and sms built in. Otherwise you need to take your chances.
on edit: a not very great article I wrote on this subject in 2003 http://www.devx.com/webdev/Article/17120