Snippets

Standard drop-down menus that contain sub-menus very often have no concept of user intent, and this can lead to a repeating frustration that most of us have likely run into: straying off course by even a single pixel can cause the sub-menu to close instantly. Ways around this include adding a delay to try and account for user error, but that doesn’t feel as snappy. Amazon has a really clever solution that accounts for user error yet responds instantly:

At every position of the [pointer] you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. If the next mouse position is within that triangle, the user is probably moving their [pointer] into the currently displayed submenu. Amazon uses this for a nice effect. As long as the [pointer] stays within that blue triangle the current submenu will stay open. It doesn’t matter if the [pointer] hovers over “Appstore for Android” momentarily – the user is probably heading toward “Learn more about Cloud Drive.”

And if the [pointer] goes outside of the blue triangle, they instantly switch the submenu, giving it a really responsive feel.

So if you’re as geeky as me and think something this trivial is cool, I made a jQuery plugin that fires events when detecting this sort of directional menu aiming: jQuery-menu-aim.

See the source link for more.

May 17th is Global Accessibility Awareness Day. See the source link for more. The participate page is a great list of things to test for and be aware of.

The target audience of GAAD is the design, development, usability, and related communities who build, shape, fund and influence technology and its use. While people may be interested in the topic of making technology accessible and usable by persons with disabilities, the reality is that they often do not know how or where to start. Awareness comes first.

I’m one of those weirdos who never switched to Chrome from Firefox, and the more marketshare Chrome has gained, the less inclined I am to use it for anything other than testing my sites in. I remember the days when Internet Explorer 6 was the assumed default, and I never want to see that again.

Microsoft might have celebrated the death of Internet Explorer 6, but if Google isn’t careful then it might just resurrect an ugly era of the internet where “works best with Chrome” is a modern nightmare.

This article makes the important point that CSS custom properties - a.k.a. variables - are not a complete and ideal replacement for variables in preprocessors like Sass: they have different but overlapping use-cases, and custom properties are far better if used when cascading or changing the values in the browser are needed, while preprocessor variables are more performant for the browser when they perform the same role as custom properties, i.e. not repeating oneself. There’s also the issue of browser support for custom properties, but that’s another story.

If you’ve ever needed to have a content column with a maximum width, but have specific elements span the full width of the viewport, thus breaking out of the column, CSS Grid can do this really simply. First the grid on the container:

This defines the columns, including the max width of the content, and a gutter. For normal content:

Then for items to span the full viewport:

See the source link for more details.

Say you’re trying to pull off a design effect where the corner of an element are cut off. Maybe you’re a Battlestar Galactica fan? Or maybe you just like the unusual effect of it, since it avoids looking like a typical rectangle.

[…]

I suspect there are many ways to do it. Certainly, you could use multiple backgrounds to place images in the corners. You could just as well use a flexible SVG shape placed in the background. I bet there is also an exotic way to use gradients to pull it off.

But, I like the idea of simply taking some scissors and clipping off the dang corners. We essentially can do just that thanks to clip-path. We can use the polygon() function, provide it a list of X and Y coordinates and clip away what is outside of them.

I’ve written a Sass mixin to make this easier to reuse:

You can use it like so:

While this doesn’t seem to have been updated since 2014, it has a bunch of links to best practices for reducing jank and improving performance.

Welcome to the MDN Learning Area. This set of articles aims to provide complete beginners to web development with all they need to start coding simple websites.

The aim of this area of MDN is not to take you from “beginner” to “expert” but to take you from “beginner” to “comfortable”. From there you should be able to start making your own way, learning from the rest of MDN and other intermediate to advanced resources that assume a lot of previous knowledge.

If you are a complete beginner, web development can be challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly. You should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work.