Is 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.
HTML Tips (2020)
31–40 of 136 posts
Re: HTML Tips (2020)
#32Some remarks, with some opinions, some caveats, and some extra info that I find interesting: 1. Lazy loading: generally speaking, just don’t do this. It’s much better than doing it in JavaScript (especially when combined with a blurry image until it loads, which I and many others find surprisingly disconcerting), but if you’re not very close to the server (which very commonly means “if you’re not in the USA”) then it…
Regarding lazy image loading, I'm not a fan of these wholesale opinions that don't consider how varied our needs are. I'm showing a gallery of photo thumbnails going back a decade. I want to provide a smooth experience similar to how you'd watch your gallery on Android or iOS. So this means no, I don't want to have the user click links with years and months on them, I want a single page. But do I want to load literal…
I mean, that's not the default webpage. If you have special use-cases ("load literally THOUSANDS OF IMAGES at once"), then of course special techniques or different approaches are on the table. I posted a comment arguing against lazy loading elsewhere in this thread, but obviously that just doesn't apply to every special scenario imaginable.
Re: HTML Tips (2020)
#33Does 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.
Oh yes it does, you need to specify width and height for it to work properly.
Re: HTML Tips (2020)
#34Does 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.
I believe that with current browsers the layout will change unless the width/height are specified in HTML.
That being said, lazy loading does at least some of the time work "invisibly" with images getting loaded before they would become visible. It's up to the browser to decide how aggressive it wants to be about this.
Re: HTML Tips (2020)
#35Is 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.
Not linear but I recommend: for HTML read chapter 3 & 4 of HTML spec - https://html.spec.whatwg.org/
For CSS I recommend Wes Bos tutorials about flexbox and grid - https://wesbos.com/courses and this blog: https://ishadeed.com/articles/
Re: HTML Tips (2020)
#36Didn't know about ">
Now I can have proper zero indexed lists and annoy friends. Chrome even supports negative integers.
Re: HTML Tips (2020)
#37Is 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.
To build upon this question, more broadly: I'm also someone who's done quite a bit of HTML but it definitely isn't my day job. Finding good info is quite hard whenever I do want to make some site: most of the time I end up on reference pages but they don't give a good overview, whereas beginner's tutorials might have the piece of info I'm missing somewhere on the middle of part 7 (I don't have the patience for that). Searching for "modern HTML mobile scaling for someone who's about 12 years out of date please" doesn't quite seem to do it.
Does anyone have a good way to approach this? Or for HTML in particular, is there some way to keep up with it (on a decade time scale, not this year's framework hype)?
Re: HTML Tips (2020)
#38#1, images that load only when they scroll into view, bother the hell of out me. I doubt there's a website that enabled this where I haven't noticed the constant flashing of content as I scroll down. Looks rather glitchy and constantly distracting from the text you're reading. Luckily not that many sites have it, but come to think of it, does anyone know of an add-on or something to disable the lazy attribute?
In Firefox you can set "dom.image-lazy-loading.enabled" to false in about:config.
In Chromium based browsers set "Enable lazy image loading" to disabled in about:config
In Safari it's still an experimental feature you have to enable manually.
.
Of course since Safari doesn't support it yet plenty of sites lazy load via classic JS style solutions and trying to fix those is like playing whack-a-mole.
Re: HTML Tips (2020)
#39Earlier 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,…
drag and drop rearrangeable lists as a form element!
Business users looooove drag and drop. I've seen products burn a stupid amount of money to have it, and decision-makers insisting it was a must-have no matter the cost in time and ongoing overhead in time & bugs for everydamnthing else added to the UI after. I've seen business-side people favor terrible products because they have drag-n-drop, while a better alternative doesn't. They love it.
It's heavy-weight, fragile, lots of implementations are framework-specific, and most of them are horribly buggy, but it's nonetheless a must-have feature in many cases. It'd be a great candidate for better support in the browser, generally, if we're going to insist on using it as an application platform.
Re: HTML Tips (2020)
#40Some remarks, with some opinions, some caveats, and some extra info that I find interesting: 1. Lazy loading: generally speaking, just don’t do this. It’s much better than doing it in JavaScript (especially when combined with a blurry image until it loads, which I and many others find surprisingly disconcerting), but if you’re not very close to the server (which very commonly means “if you’re not in the USA”) then it…
Lately I've been a fan of lazy preloading . First I just load the requested page and all resources on it. Then, if javascript is enabled, I start loading the rest of the site (or section of the site) into hidden dom elements, starting with the resources most likely to be requested next. Then the rest of the user's interactions on the site are near-instant and you can even bring the entire thing offline.
There was a "priority hints" feature that got put on hold in Chrome that let you set importance= of a resource to low/high which had this kind of use case in mind.