Thanks for exlpaining the fonts, didn't realise i could give them the same font-family and assign the weight to differentiate.
Few people do... when it's right there in the spec. Specific fonts often have their own pre-drawn versions, and don't look as good when you "let the engine do it", hence the mechanism for specifying different weights and styles that way.
Almost all windows system fonts work this way, if you look at the ACTUAL contents of the fonts directory you'll see that even humble arial has multiple font files for multiple weights, style,s, and all the combinations of the two... and yet if you look in the system fonts list you'll only see Arial and Arial Black -- and that's because the over-bold that is black doesn't fit into a normal font-weight stack.
I thought it was bad practice (appears malicious) to hide an element off of the viewport and that this may have negative impact on seo etc? Is this just nonsense that i read on a stupid article?
Probably just nonsense. Display:none is far more likely to cause SEO issues, but in this case the only penalty any search engine Should
apply is to ignore the element. That's fine, it's not content so what do we care.
As a rule of thumb, search engines shouldn't give a flying purple fish what your style is. What they SHOULD be caring about is your text content, and the structure / meanings provided by the semantic use of markup. That SHOULD
be the be-all end-all of the topic. BUT...
Thanks to black hat SEO dirtbags constantly trying to game the system, they started looking into the style about 17-18 years ago, Specifically a technique called "content cloaking" where text was hidden somehow. To that end they started applying SOME of the style to elements to test for this, specifically ignoring the existence of any text that was display:none, visibility:hidden, or that had a color set the same as the background-color.
Problem with this is how does one then implement dropdown menus that search engines don't ignore? Position:absolute with off-screen positioning was the obvious answer... but that too was soon targeted as the SEO dirtbags abused it. Finally search engines -- or at least Google -- compromised and said that if you position it off screen the text itself will not be indexed, but it will still spider any links present and use the associated text of those anchors.
But overall the only real penalty any of these bring to the table is that the text content of such hidden elements are ignored.
I'd also point out that since INPUT is a "void" element, its presence and content would/should NEVER be used as part of a search ranking in the first place. The LABEL on the other hand...
Worst case, apart from being ignored there are no search penalties for this; though I've heard a lot of people flap their arse-cheeks in the wind about it. If this were in fact a thing 99%+ of all dropdown menus and 100% of all mobile / hamburger menus would get you smacked by the search engines. That clearly is NOT happening as if it did, there would be a huge outcry.
If i keep the tiles the same quantity however added different length text, is this the adjustment i would need to make to keep the tiles all lined up when the collapse?
That width tweak to prevent "one on its own" is something you'd have to adjust to meet the content, though the overall wrapping behavior once you're down below that is completely automated. It's just one spot that it's nice to adjust for.
Some things just can't be trusted to automate on their own properly, so changes to things like the menu do eventually -- no matter how well planned the layout -- end up having to be tweaked.
It's part of why if you read my progressive enhancement article's page 3:https://cutcodedown.com/article/progressive_enhancement_part3
I talk about starting out at a desktop resolution, then resizing the display until it breaks. I figure out where it broke in EM width (pixels / 16 if at "normal" font size, / 20 for "large font" users like myself, Divided by 32 on my 4k media center)
, toss 5% rounded down to the nearest half EM as a bit of "wiggle room" to account for possible differences in font-family or font rendering/kerning, and use that as my media query break-point.
It's the fastest and easiest way to make sure all devices get the best layout for them. Take the desktop resolution, shrink the window until it breaks, add a query to fix what broke. shrink the window until it breaks, add a query to fix what broke. shrink the window until it breaks, add a query to fix what broke. Over and over again until you're down to 256px / 16em (if at normal system font scaling)
the smallest one should really worry about in 2020 for display resolution. We [ii]used[/i] to go down to 192px, but these days there's no real point going that small.
I am still playing (mainly with the flex components) to understand the impact of changing values like flex: 1 0 auto
It's one of the things I don't like about flex, is that it uses 0 and 1 for on/off making it cryptic compared to other things in CSS where they use names. If they had simply said that "off" was saying nothing, and using "shrink" and "grow" instead of 0/1 0/1 would have been far far clearer.
Even though I KNOW it's "flex-shrink, flex-grow, flex-basis" as the order of the condensed "flex" properly, I STILL occasionally have to refresh my memory on that.
If instead of
flex:1 0 auto;
It had been:
flex:1 1 2em;
flex:grow shrink 2em;
I think it would have been a lot easier for those just learning it to understand. But that's not how they chose to do it. In that way I think that the CSS3 grid layout module is better written and crafted as I find it easier to understand and far less cryptic... but grid sucks at doing anything you want to dynamically wrap or stack compared to flex. Sometimes that inflexibility is a blessing, sometimes it's not. It's why unlike a lot of dev's out there I don't go "flex or nothing, screw grid" or "grid or nothing, screw flex".
It's a problem this industry has as a whole, insisting on using the wrong tool for the wrong job. In regular programming you've got objects for nothing because "rawrz teh functions are teh evilz", or convoluted functions because "Objects are hard" (they aren't!)
. In HTML we have people who insist on presentational classes or presentational markup because "but the CSS is hard" or "it's more work" (it isn't, it's usually less work, see the derpitude that are frameworks that just make things harder by doing it ALL WRONG!)
. In HTML/CSS these days we have people going "now that we have flex there is no reason to ever use floats" or "floats aren't as versatile". Yeah, sure, of course. Call me when I can do shape-outside:ellipse on a flex child.
Simply put most people seem to only want to learn one way of doing things, then try and planket apply that one way to everything. Whilst in some cases -- like obeying the reason HTML exists and what it's for -- this makes perfect sense... well, in other cases all you're doing is running around with a hammer in one hand and a bag of screws in the other, and calling the hammer a "flathead screwdriver". Whilst you CAN drive a screw with a hammer, that doesn't make it a good idea.
Right tool for the right job, don't throw all the specialty tools out of your box just because you got a multitool. You'll find it kind of sucks when it's time to peen a pin, or tighten a bolt to a specific torque
But no, we have people out there -- ESPECIALLY career educators and students -- who insist that one specific way -- like flex -- is the be-all end-all answer to every problem. It's shortsighted, arrogant, and ignorant... and when you call them on it? They spew all the typical propaganda based nonsense that brainwashed them into thinking that way in the first place.
Basically, a mix of the 7 classic propaganda techniques
riddled with fallacies, and a bunch of Lame excuses for not being a web professional.
Identifying when that is the case on "advice" you are given is an essential skill these days, given the sheer volume of snake oil peddlers out there, much less those who simply want to believe whatever lie they are peddled simply because it's soft, soothing, and exactly what they want to hear.
The truth is often harsh, brutal, and the last thing anyone wants to hear. Advocating for the truth is therefor often controversial, confrontational, and it's why the rank and file are often suckered in by the first good bullshit story they come across.
Hence how places like Sitepoint continues to sell books despite their authors clearly knowing jack about ****, how web rot scammers like W3Schools continues to have advocates and users despite being riddled with inaccuracies, omissions, and just plain bad practices, and how many "career educators" continue to be "influential" far past their expiration date... when in point of fact more often than not they've got less legitimacy than Amway, Mary Kay, Goop, Mercola, or the dirtbag calling himself an Avocado.
There's a reason a lot of businesses who deal in high volume software turnaround treat their new hire's first few months as a crash course in how things REALLY work, having to deprogram all the BS that was packed into their heads by alleged "educators". A situation only exacerbated by the fact that so many places now blindly believe all the bald faced LIES
about frameworks, in the process screwing their employees, their products, and their customers.
Sorry there, didn't mean to rant, but it's stuff you really should be aware of. Web development as an industry has serious problems, mostly relating to truth and honesty. Most of the people I've dealt with freelance consulting the past decade I wouldn't trust to hold my beer for a minute.