justinavery + snippet   19

Detect WEBP Support with JavaScript
You can also just use <picture> and allow the browser to decide which image type should be loaded.
tutorial  snippet  add-site  272  newslettered 
august 2017 by justinavery
Styling an external link a href | Snippets | Responsive Web Design
This is a super simple way to distinguish external and internal links on your site without having to require the content editors to do anything more than link to what they need to.

The trick to display different styles for external links comes through the use of the attribute selector.

You can include anything you want for the alternative style, but in this case I’ve decided to change the color of the link and include a pseudo HTML element (the content: "\21B8"; bit)which I then flipped to face the right rather than the left (the trasform scale(-1,1) bit).

To get it to sit higher I used the vertical-align:super rather than negative margins, and it’s set to display:inline-block because you can’t transform pseudo elements without setting it to this (or block)

a[href*="//"]:not([href*="codepen.io"]) {
/* external link styles, use :before or :after if you want! */
color: coral;
&:after {
content: "\21B8";
font-size: 0.6em;
vertical-align: super;
margin-left: -0.1em;
display: inline-block;
position: relative;
transform: scale(-1, 1);
newslettered  267  snippet 
july 2017 by justinavery
Some Extremely Handy `:nth-child` Recipes as Sass Mixins
I've been a big fan of :nth-child since I started using them to set repeating rows with unknown content and they just keep getting better. Have you got any useful ways that you use :nth-child selectors?
tutorial  codepen  snippet  259  newslettered 
may 2017 by justinavery
Responsive Design for Motion
A great overview on how you can introduce one of the new media query recommendations — reduce motion (currently available in Webkit). This is where a user might choose to switch off animation effects, or 'prefers reduced motion'... very common for a number of reasons (including medical reasons).
snippet  tutorial  news  259  newslettered 
may 2017 by justinavery
Hassle-free Full Bleed with *:not()
Two weeks ago we posted an approach on making certain element full width "break out" from the regular paragraph content. This week the snippet looks at another option which Dave Rupert has come up with.
tutorial  snippet  250  newslettered 
march 2017 by justinavery
Service worker and caching from other origins – Filip Bruun Bech-Larsen – The frontend frontline
Holy crap, you can install a service worker through a http header!

Maybe include all the types of headers that you can send, service workers and also the HTTP2 push option
RWD246  snippet 
february 2017 by justinavery
Add <h> element
Well, this looks like it escalated quickly. This is a proposal to introduce a new element that is trying to fix the hierarchy problem, and it's the topic of this weeks podcast too.
newslettered  245  headline  podcast  snippet 
february 2017 by justinavery
Everything you need to know about HTTP security headers - Appcanary
The most popular question I get asked is, why doesn't Am I Responsive work for x site... the answer is that they have x-frame-options set to either Deny or Same Origin - https://blog.appcanary.com/2017/http-security-headers.html#x-frame-options
article  snippet  244  newslettered 
february 2017 by justinavery
Flex-grow 9999 Hack
This is sure to become part of the snippet show in the future, but for now let's give Joren credit where it's due.
article  tutorial  flexbox  snippet  adobemax  newslettered  news  229 
october 2016 by justinavery

Copy this bookmark: