This makes me sad. Not because I don't like grid. But because two weeks ago I found out that a very senior person in the company has a computer running IE11, and will not let IT upgrade her machine.
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.
The solution there is to document every moment of your time spent on this issue, alongside the user agent logs, and present that alongside your salary, and present it.
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.
I already document every task I do (my immediate boss requires it).
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.
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.
I wasn't saying it doesn't. I wasn't saying anything remotely like that. Someone was downvoted for the normally unremarkable observation that intentional sabotage is unethical. I thought that this community response was hilarious and worthy of remark.
If it "swings both ways," I would be most interested in an opinion about the "other way" if you're willing to offer it.
This is somebody who successfully refuses to let IT upgrade her computer. That means she has a huge level of power in the organization and feels entitled to disregard policy.
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.
She seems like she's an easy attack vector into the company network. Is her computer also completely firewalled off from anything important or does the company not care about breaches?
Either that or “IT” is someone who doesn’t feel qualified enough to be assertive in their position. If I was this “IT” person, I would explain to the individual that there was a critical vulnerability found which will not be patched and then print up a liability waver form for them to sign and date, stating that they are doing this on their own terms and I cannot be held responsible should anything go wrong.
> If I was this “IT” person, I would explain to the individual that there was a critical vulnerability found which will not be patched and then print up a liability waver form for them to sign and date, stating that they are doing this on their own terms and I cannot be held responsible should anything go wrong.
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.
Your advice is worse. Situations like this are entirely a game of dick swinging. If the IT department wants to become a room of ineffectual little shrinking-violet yes-men, then why would you want to work there in the first place?
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.
While I agree that some of these approaches are too agressive and this should first be approached with an honest conversation, I completely disagree that people should just stick to their role and shut up even when they see problems.
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.
> Either you make progress or get... encouragement to go find a better job
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.
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.
Has anyone asked her why? She may have a legitimate reason.
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.
We just finished deploying a major contract where the military is a primary customer. They still have many machines running IE 11. I used CSS Grid and it's working well. IE 11 supports the initial version of the spec and has the -ms prefixes, but works. There are some things you can't do (like areas), but it largely works with that syntax, if you design with column/row in mind.
See this for details on the IE 10/11 implementation:
Former soldier (national guard) here, and yes, yes they do. You know how aids it is to be a civilian software engineer and have to work with IE11 to complete assignments. The good thing is that 95% of the time I could convince their software to give me a certificate without completing the course on stuff like OPSEC (yes, I am aware I shouldn't share my password with others). Guhhh.
Its a general government thing. The amazing power of contractors to determine what systems their precious software will run on is amazing. I have a Windows Server 2003 machine still on my network because of a grant contractor that hasn't certified anything beyond that.
> [...] only to discover that once I found an old machine in a closet that has IE11 on it [...]
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.
I tried one of these in VirtualBox on an iMac, and it crashed the computer. Hard. Like locked it up, and after three minutes frozen the thing rebooted. That was when I went searching for an old machine in the IT building.
> 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.
One pattern I've heard (I think previously via Hacker News) is to start with a mobile design and progressively enhance the site for browsers with grid support. That way, older browsers fall back to the same experience as the mobile design.
Interested to hear what flexbox features were unsupported? I’ve been in a same kind of situation but was able to support everything on “IE version” of the app by using flexbox.
Most of flexbox is supported in IE11, but some "defaults" are not the same as other browsers --> see the known issues tab if you're interested, most of the time it works but when it doesn't it's frustrating https://caniuse.com/#feat=flexbox
Its been too long for me to remember the details but I remember flexbox 90% working but having some bugs that were a huge pain to work around. Its at the point where you can use flexbox on IE but you have to specifically test each use on IE to make sure it works.
I've got a similar situation with a web app millions use, but a couple corner office people use IE11. We were able use an IE only CSS selectors to degrade; in theory you could do the same without compromising the layout for other users.
whoa. tables seem like a overkill. something you did back in the IE5 and Netscape days. i would recomend using ei snippets that let you specify css rules that will only run on that version of ie. which have been available since ei 7.
I was playing with CSS Grid at work 2 weeks ago...but it didn't look right on my work PC. I was running IE 11. IE 11 has some specific tags for CSS grid, and they don't work like other browsers.
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.
I prefer using user agent sniffing and adding the class ie to body. With autoprefixer you get a lot for free too.
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) &.
Why not make the version you send to her the default experience, then progressively enhance with flexbox and grid, while only iterating on the grid version?
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 :⁎
Navigator was free at first; Netscape's idea was that the money was in the web server. Free (that is, initially price-matched) MSIE just made changing strategy different when the server thing fell flat. Netscape going all in on JSSS (with a half-assed CSS translation module) didn't help at all, nor did strict hierarchical access paths (no "all" collection object, which also affected how the CSS-that-was-really-JSSS worked)... and missing the idea of background requests (XMLHttpRequest) sealed the deal.
This couldn't be more timely. I was just thinking maybe a day or so ago "It's probably about time I sit down and learn CSS grids." Love the format, thanks for sharing!
Curious as to why CSS Grid chose to start at 1-index rather than zero, and why the end column is one more than the position of the column that actually stops.
Ultimately these are just conventions. There are probably good reasons for them, too. For example having [a,b)* allows easier computation when you have things that abut. E.g. it's [a,b) [b,c) [c,d) rather than [a,b-1] [b,c-1] [c,d-1].
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.
Isn't there some presumed universal convention for how to index things, present in the most popular programming languages, that avoid all of these issues that would have really easy to code?
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?
There are programmers who don’t count from zero. And even programmers who count from zero but don’t do so consistantly as soon as they implement even the simplest personal indexation.
Programmers don't count from 0. Its just in many languages it makes sense like in C where an arrays name is actually a pointer to the first element and the index says how many positions to move away from it so foo[0] is the pointer to the first element and then move 0 spaces away.
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
There are good reasons to start counting at 0 beyond convention. Dijkstra wrote a small essay on the topic in 1982 called "Why numbering should start at zero."
That still seems super unintuitive to me, because the whole thing is ‘grid-column-end’, not ‘grid-column-line-end’.
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.
I really hate products where the in/out points are not the same inclusiveness. There are several video programs I've used in the past that are similar to this where the in-point is inclusive, but the out point is not. If the in/start designates the first thing I want to include, then I would expect the out/end to also designate the last thing I want to include.
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.
There's an extra difficulty with something like video software.
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".
Now we're getting into definitions of "what is 1 second?", and I always reply "a second is a second, regardless of the divisions". Same when syncing audio to video. Straight audio is just a division of sampling rate, so regardless if you record video at 24,25,30, etc, audio recorded at 48kHz is always the same. It only gets confusing when trying to force sync by embedding timecode into the audio or laying the audio to a video format. Now, you're trying to subdivide the audio into video frames, and that's just going to make framerate conversions difficult. My biggest pet peeve with this is all of the MP4 based capture formats where the audio alignment is within +/- frames. I love frame advancing to the clapper in the clapped position, but the audio pop is frame(s) ahead/behind, and sometimes even sub-frames ahead/behind. It's one of the things I miss the most about FCP7. I could option-click the timeline and slip the audio into alignment with the video. Premiere doesn't allow for this, and I refuse to even install FCPX to investigate. I know just make it the audio department's problem ;-) Wow, I just jerked the wheel so hard far left from the actual topic.
You can use your browser's inspector to change the CSS for the background and/or text color of the box. There aren't any page loads between exercises, so it'll stay changed as you progress.
I believe it's talking about the vertical lines, not the column space between them. So the "+1" is because it's talking about the rightmost edge of what you're calling a "column".
here's an image that may explain better. I numbered the vertical edges, start is green, end is red.
My only major pain point working with flexbox have been gutters. With flexbox, implementing gutters often involves some kind of hack involving negative margins, which is both inelegant and can sometime result in strange layout issues in my expereince.
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.
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.
They are complementary technologies. CSS Grid really shines for doing the "full page layout" portion of websites. One really useful feature of CSS grid is that it composes really well with media queries, so you can create responsive websites really easily by just defining different grid area layouts for various screen sizes.
My first advice to anyone regarding CSS: Don't just slap on more rules to get things working. Gain an intuition and you'll be so much happier and produce much better layouts.
Honestly, my experience with both flex and grid is that they are 80% solutions and the easiest ways to get the other 20% is to rewrite everything using floats and `display: block`
On HN it doesn't count as a dupe if the story hasn't had significant attention in the last year or so. This is in the FAQ: https://news.ycombinator.com/newsfaq.html.
There's no mainstream browser that doesn't suck (ie, they're all walled gardens) that supports CSS grid. Plus the other 4 billion people on Earth not in modern countries.
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.
I build all my mobile layouts with flexbox, so they are usually one long column, and content collapses into the grid from CSS media queries.
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.
The walled garden I speak of is the implementation of add-ons cryptographically signed by Mozilla only. Unless you run one of the betas (w/bugs) you cannot use any add-on not approved by Mozilla. And lately they've even been removing/banning add-ons that aren't illegal but otherwise upset outside corporations (ie, the paywall bypasser that uses googlebot's http headers substituted in).
It's important not to lump together the proprietary browsers (where the limit you speak of can only be worked around if the proprietors allow) and free software browsers which respect your software freedom, like Firefox.
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.
Is there a browser you would recommend, if we ignored their HTML/CSS rendering for a second, based on ethical considerations, so to speak? I like making things compatible when I don't need anything modern, and would be interested in hearing about any browsers you think are worth supporting.
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.