CSS grid garden
cssgridgarden.com
cssgridgarden.com
She recently discovered that one of the company's web sites doesn't look right in IE11, and shit ran downhill into my lap. I checked the logs, and yep... she's the only IE11 machine to hit any of the web sites in a year.
I spent a day and a half downgrading the site from CSS grid to Flexbox only to discover that once I found an old machine in a closet that has IE11 on it that I could test with that IE11 doesn't fully support Flexbox, either!
Solution: Each building on campus has its own IP address. Connections from her building get a table version.
Best case, they decide they pay you too much and you cause too much trouble, and let you go.
Worst case they make her upgrade her browser so they're not dumping mountains of money on her preferences and whims.
Either way, I'd be good with it if I were in that position.
The way I view it is it was good busywork for the weeks before Christmas when not much was getting done anyway. I don't bother fighting it because if they want to waste their money paying me to downgrade a web site for one person, I'm happy to take their money for it.
Or get someone more senior than her to put her in her place.
It's not a tech company, so it doesn't work that way. IT doesn't tell management what to do, it's the other way around.
get someone more senior than her to put her in her place
To get to someone more senior than her would mean contacting her manager on the other side of the country, who would likely wonder why I'm was wasting her time, and come down on me through my boss. Again, it's not a tech company.
If it "swings both ways," I would be most interested in an opinion about the "other way" if you're willing to offer it.
At which point you show how much money is being thrown away here.
You assume that wasting a few days of my time will cost the company more than me wasting her time. Remember, this person is probably seven or eight steps higher than me in the org chart. This is a large organization, not some startup.
Also, 7 or 8 steps in any org chart is insane.
It’s more likely to cost a ton of money if someone hacks her browser/OS though.
Do you honestly believe she cares about the IT department wasting a little bit of money (and it really is just a little bit relative to what she probably deals with), or would respond well to an IT guy pointing out his salary in an attempt to convince her to upgrade her computer? The advice you gave is more likely to get someone fired than it is to help.
That's even worse advice than what I was responding to. Great way to anger a high-ranking executive and probably get fired.
Frankly a lot of the advice in this thread seems to be coming from people who are very junior or otherwise don't have experience dealing with high-ranking executives. Heck, even mid-ranking executives would respond very poorly to the kinds of actions advised in this thread.
Here's the situation: a high-ranking person in the company is so powerful that she can disobey IT policy by refusing to update her computer. This person is also powerful enough to demand that changes be made to a corporate website to make it compatible with her older computer. This is a problem for the head of IT, and the head of IT either lost that battle or decided it was not worth fighting.
This is not the right place for a more junior IT person or developer to stick their nose in by going directly to that executive with some bogus "liability waiver" or appeals to wasted money or whatever else. It won't go well, and it's wrong to do it in the first place because it bypasses layers of management and the historical and political context that led to this outcome. If the head of IT couldn't solve this problem, a stunt like what you are suggesting won't solve it either.
I get what you're saying, and I think that most corporate IT departments run themselves as little fiefdoms with false pretensions of importance and power. But if someone is insisting upon running systems that don't conform to reasonable standards of the company, then something needs to be done. I would consider requiring that device to be isolated from the network with a small firewall.
But the waiver is a good idea—though unlike your assumption that it would be handled by an junior, such matters ought to be sent up the chain to the CIO or equivalent, and it should be the responsibility of the CIO to get the signature or take personal responsibility themselves.
Either you make progress or get... encouragement to go find a better job. Sounds like a win-win to me.
This assumes one has a job where you can easily replace it with an equivalent. Even in IT, this is not the norm outside of a few limited areas and fields. Most people have to worry about keeping jobs that arent perfect.
Frankly, this is the kind of "if it were me Id just be an asshole because being right is the only thing that matters, just don't look at my actual life actions" advice I got from my grandfather growing up and just sounds very unaware and privileged today.
Does it suck? Yes. Is there some act this person can do to change things? Maybe. Are there a lot of actions that can feel morally justified but arent, and are also really bad ideas to attempt? Oh my yes.
Do I think you are offering this terrible advice? Cant say...there's a lot of context we can be assuming differently. I can say that I dont see the take away from many of the messages on this thread being terribly helpful.
Sometimes you need to break the chain of command (either from below or from above) to get things fixed, otherwise some problematic people never called on their shit and the whole organization suffers.
IT might be lowest in the foodchain, but they always have the last word when it comes to something.. technical.
No, but IT come and say "in order to get ISO313186461 certified we need to do an upgrade" tends to work pretty well.
From personal experience for a long time I had to keep an old version of IE running in an old windows VM for one specific app. Had I not had that VM and IT decided to upgrade me without asking I’d have lost my sh$& and gave them the what for.
MS has free downloadable virtual machine images to help with that kind of testing. They have IE8, IE9, IE10, and IE11 Win7 VMs, an IE11 Win8 VM, and an Edge Win10 VM.
They have images for VirtualBox, Vagrant, VMWare, HyperV, and Parallels.
Link:
https://developer.microsoft.com/en-us/microsoft-edge/tools/v...
But I do have a certain fondness for wrapping modern layout in @supports(display: block) {}. It's kind of like a hidden fu in the code. Additionally it has lower specificity than body:not(.ie) &.
See this for details on the IE 10/11 implementation:
https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-...
Most people here will be too young to remember, so let me tell an old-people tale of when everyone used Netscape (which cost $29.99 ...let that sink in first of all), and then microsoft gave IE for free for everyone! Then webdevelopers without a true CS background (and by that i do not mean university), like yourself, started to use IE niceties to develop. One of those niceties was the F12 developer tool. Which now become the every-browser's-dev-panel. And they cursed at everyone that was still using Netscape4 instead of their fancy new IE6. So much so they put buttons on those sites saying "better displayed on IE6" (or 4, don't remember).
I am tired of typing now. So have fun figuring out the moral of the history. I is my cristimas present to you :⁎
I went home to build something personal and thought CSS Grid would be awesome. Turns out my PC runs IE 11 (Windows 7...). I personally use Firefox Quantum for all my web browsing, but the fact that I had it meant there would be good enough amount of people that have it. At the point I gave up on CSS Grid, and just threw in bootstrap.
> From this follows a simple but surprising truth: The lack of support for CSS grid in an old browser should not affect the experience of the visitor, but rather just make the experience different.
> If you agree with this (and you should), there is no reason you can’t use CSS grid today!
> Here’s how that approach could work in practice. Rather than using fallbacks and shims to ensure a design and layout look the same across all browsers, we’d provide the mobile vertical single-column layout to all browsers and then serve up advanced functionality to those browsers and viewport widths that can take advantage of them. It might sound like progressive enhancement, but it’s actually more of an accessibility-centric approach enabled by a mental shift.
https://www.smashingmagazine.com/2017/06/building-production...
That being said, I love the concept. Fun way to get some practice in!
The tradition of starting at 0 just got carried on to everything because having a standard is better than having to memorize what everything uses
http://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EW...
Specially when dealing with Algol derived languages, where the indexes can be specified in a flexible way.
* https://en.wikipedia.org/wiki/Interval_(mathematics)#Includi...
start:1, end:4 = 1,2,3 (start-inclusive, end-exclusive)
start:5, end:2 = 2,3,4 (I guess this means right-exclusive, whether it's 'start' or 'end'?)
start:1, end:-2 = 1,2,3,4 (the puzzle text says -1 is the first grid-line from the right, i.e. 5, but that doesn't follow, because now it's right-inclusive)
start:-3 = 4 (so -1 is grid count+1, which explains the above?)
Usually you get a reasonable relationship between zero- and one-indexed views of the same thing. The relationship is normally that the zero-indexed points 0 and 1 form the start and end bounds of the 1st item.
CSS grid numbers columns 1, 2, 3 and also number the the lines around those columns 1,2,3,4. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
Having grid line 1 come before column 1 makes it feel like the grid lines are substantial and the columns are merely the bounds between grid lines.
Correct. And IIRC the spec doesn't even have columns (they're just referenced to help understanding), just column bounds.
I feel like I'm spending my time doing the wrong things ... I should have been arguing for sensibility during the standards writing. These modern css things are only here to make things easier, not more wonky and strange - we already have that. If they're just dedicated to inventing new bizarreness to replace the older wackiness, where have we actually come?
The positions are, I believe, the positions of the grid lines, not the grid columns.
Between this and how weird the negative syntax operates, I suspect that I would end up using the start/span syntax the most, but my company requires code that supports IE9, so I will probably only touch this on a regular basis in like five years.
It's just a mild thing to get over, and visual tools like this make it very easy to realize the end is exclusive. However, it is not always so easy in video tools unless the next frame to your out is an obvious change.
Consider what the expected outcome would be for "isolate from second 1 to second 10". Then the expected outcome for "isolate from frame 1 to frame 10".
What happens with a video at 1fps?
I'd love to use it but I was looking at the grey box for about 3 minutes before I realized there was text in there.
EDIT: Oh, I see. -3 worked.
column-end means really "end+1", why?
problem: when you go from left-to-right: column-start-3,column-end-5: means column #3 is included
when you go from right-to-left: column-start-3,column-end-1: means column #3 is NOT included
So if you read "column-start-3" you don't know if column#3 is included or not, it depends on column-end.
"column-start-3,column-end-5" should include column 3, 4 AND 5
This is from level 10:
>For example, grid-column: 2 / 4; will set the grid item to start on the 2nd vertical grid line and end on the 4th grid line.
What's the correct interpretation of "start on 2nd and end on the 4th"? shouldn't the 4th be included?
here's an image that may explain better. I numbered the vertical edges, start is green, end is red.
The only thing I would suggest is to add some explanations, maybe some mnemonic aids and such. I'd be happy to help.
> Flex seems more flexible to me than CSS Grid.
Any day :)
But yes, I am also under that impression.
It's not an either/or proposition.
I sometimes use both at the same time, depending on the project. Usually it's Grid for the big picture container layout stuff, and then Flexbox for laying out each individual portion.
I'll be happy when another 15% of my visitors upgrade to better browsers so I can use grid on my biggest project. Right now Flexbox fails with orphan elements, even when using margin: auto;, but this would be a perfect place to use Grid.
For instance, if you want to render a dynamic list of items that wraps if the number of items don't fit in 1 row using flexbox, and want to add equal vertical spacing to each row _only when the list wraps_ (i.e. without introducing any extra spacing on the first row), you'd need to add a margin-top to every item and then add a negative margin-top to the flex container to counteract that extra margin.
I originally found out about this trick in this StackOverflow question: https://stackoverflow.com/a/30891910. I'd love to be enlightened if anyone know of a better way of implementing this using flexbox.
Similarly, adding gutters for horizontal spacing between columns involves adding 1/2 the gutter width as margins to each item on both sides, and then setting negative margins of 1/2 the gutter width on both sides of the container.
With grid, we can simply set the row-gap and column-gap properties on the grid container without any additional ceremony.
Grid Garden copied the concept.
grid-template-columns: repeat (8, 12.5%);
Am I doing something wrong or is it a bug?
Also you should check out http://flexboxfroggy.com/
More explanation at https://news.ycombinator.com/item?id=16403654 and https://news.ycombinator.com/item?id=16344002.
That said, at least this css grid garden has a elegant fallback. Most CSS grid sites don't. Or worse, they fall back to 'mobile' sites.
You could modify Firefox source code to let you run whatever add-on you wish. With Firefox whatever changes you want are limited only by your willingness to implement them (either by doing the work yourself or working with others to get those changes made).
You can even distribute the improved Firefox variant browser to others and help the community. Hacker News recently had a story about some hackers doing exactly this with a variant they call Librefox. Other examples of Firefox variants include IceCat and the Tor Browser.
I create my mobile version of pages with Flexbox, so if the user's browser doesn't support it, they see the full featured mobile view. Progressive enhancement.
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
You'd write two versions, one for browsers which do support grid and one for the ones which don't.
Jen Simmons has written excellent tutorials on doing fallbacks and explaining how we can use css grids nowadays: https://hacks.mozilla.org/2016/08/using-feature-queries-in-c...
And also has a YouTube channel where she explains a lot on how to deal with css grid in the wild: https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag
If the browser doesn't support css grid, the mobile, single column version with flexbox is fully featured, and is loaded first because the css grid is kept in @media queries.
Like the sibling comment mentioned, you can use @supports, however if you use `display: flex` for mobile and `display: grid` for desktop, the grid will never load in old browsers anyways.
This works out pretty well for me personally in 99% of use cases. If you want to use CSS grid as well for mobile, you'll need a more powerful @supports solution, however.