RWD Weekly #267

Welcome to another week of Responsive Design Weekly Newsletter, this week it is edition number two hundred and sixty seven. Boom!

This week I was sorry to see this week that Zendy has shut down the Be Responsive meetup in Australia but congratulate him and all the members on a brilliant community. I remember sharing links for the meetups while he encouraged people to sign up to the newsletter.

All side projects take their toll though, and I can honestly say there has been times where I’ve considered moving on from the newsletter. For now though I still love my Thursday evenings gathering all the best content from the week and sharing with you… and it even gives me the chance to play around things again like the Snippet Show.

Snippet Show: Styling an external link

While not exactly responsive in nature, it was something which came up on a website I was working on this week.

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 transform 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"]) {
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);
}
}

View the code on codepen

Headline

Designed lines.

Ethan touches on something which I’ve been wrestling with myself lately. While there is a clear benefit from a commercial point of view to improve the speed of your website we often forget about the human impact. Everyone should be able to access the content we create yet a lot of the time we put barriers (page weight/speed) in the way.

Focussing on what matters

We work and live in a bubble. Our limited perspective of what it means to use technology influences the way we build, the tools we use, and the tasks we prioritise. In the process, we risk losing the most powerful thing about the internet: its ubiquity. Tim discusses the importance of broadening our perspective and makes the case for not losing sight of the fundamentals that make or break the web for people around the globe, and down the street.

Sponsor

Manage content & code directly from your website with an easy WYSIWYG editor

Make changes faster, empower your team, & avoid bugs from redeployment. Works everywhere, from WordPress to jQuery to React. Join hundreds of projects already using Component IO, with a free tier & plans from $7.95/mo. It’s built by web developers to make web development easier for everyone.

Use code RESPONSIVE to get 1 month Standard Plan for free!

Articles

PWA Directory: Loading content faster in the Application Shell.

Loading your application shell as part of the first request can help improve perceived load times, however you can still ensure the content request is occurring at the same time allowing the user to receive the content as fast as possible

On Link Underlines

Since around 2005 I’ve used the text-decoration: none; and :hover border-bottom approach to most of my content links. For a while I went with border-bottom: dashed or dotted but this article puts forward a really good argument for the underline.

Your Site—Any Site—Should be a PWA

^ honest… the title does not lie. Your site could be available offline, have push notifications, be added to a home screen…. what are you waiting for?

Does__BEM — work?

I’ve been on the ‘nay’ party for__BEM mainly because I like the look of HTML that is clean and has very little classitis. In our recent redesign the very talented developer, Ryan Taylor, used BEM to build out the templates and there were a number of areas I look at thinking it could be simplified using just the HTML elements. While this might be true, it overlooks the issues that BEM solves. I’m the sole contributor to RWD.is and therefore it’s all in my head, no explanations needed (until I bring on a contributor). For sites that have large teams, or use the same templates across a range of sites, the need for greater clarity that BEM provides far outweighs the “feel good” need for less classes. This article does a great job at pointing out the reasons why BEM is such a good option.

(Now More Than Ever) You Might Not Need jQuery

I’ll admit it, I still reach for jQuery for client projects because I’m comfortable with it, but for my own personal projects, I’m trying to get as far without it as I can (or just avoid trying to do things that make it more attractive to use). Here are a few more reasons you might want to consider the same.

Etsy Lessons

Over the past couple of years I’ve covered a lot of articles from Lara Hogan on performance at Etsy. This article is a slight change of pace, but it will arguably provide you some valuable insights on how to be part of a team and manage a team

Building Pattern Libraries With Shadow DOM In Markdown

Heydon writes about using Hugo (static site generator) in his workflow to delivery pattern libraries.

CSS: The Definitive Guide, 4th Edition

Originally published, and bought by me, in 2000 the Definitive Guide to CSS is getting a huge overhaul for its fourth edition in 2017. Take a look at where all the work has gone from the Author, Eric Meyer.

Life Is About to Get a Whole Lot Harder for Websites Without HTTPS

Are you working towards getting your site running on https? Well pretty soon it’s going to be really apparent for my Mum to realise that a site is NOT secure, and given that it’s me who always has to fix her computer she’s going to leave them as soon as she notices it’s not. With updates to the next releases of browsers it will be very obvious which is secure that those that are not.

Building m.uber: Engineering a High-Performance Web App for the Global Market

Uber might do a lot of things wrong, but their engineering team sure knows how to put together a web app for a global market.

JavaScript really is overtaking the world – FED || Dead

Chris takes a stand on what Front End really means. There is too much focus these days around Javascript being THE thing that you need to have to be great Front End developer. You need to have the other two skills, HTML and CSS, as well as the other ingredient of Javascript.

London gets its first robot receptionist in Shoreditch

They took our jobs….. So I think that it would be a lot nicer to have someone welcome you rather than a robot, but I recently read something of Brad Frosts where he said that 65% of the students studying today will go into jobs that don’t exist anymore.

Tutorials

Dropdown alternatives for better (mobile) forms

Some really great tips on how to handle forms a little better on mobile (and it extends to desktop as well).

Creating Augmented Reality with AR.js and A-Frame

So, well, um, yeah….. now you can create an AR image in your phone browser in ten or so lines of code….. no biggy.

Codepen of the week

Castles, responsive parallax landscape

See you next week!

Cheers,

Justin.