Responsive Design Weekly #210


Welcome to edition #210

Hello everyone and welcome to another week of responsive design.

Baby update: still no baby at the time of writing, but things are definitely starting to rumble.

If you didn’t last week make sure you head over to contribute to the voting of the CSS Dev Conference sessions. C it comes down to your contributions so please vote now.

Headline

airberlin Progressive Web App

Progressive web app technology makes it possible for airberlin passengers to access their personal boarding pass and further travel information about their destination at any time, wherever they are and even without an internet connection, after a one-time web check-in.

Mediaqueryless Responsiveness

This sounds like a great talk at this years CSS Day in Netherlands.


Our Sponsor

Try GoNative.io to convert existing websites to native Android & iOS!

9 Beautiful Handwritten Modern Script Fonts

Packed with 9 beautiful handwritten typefaces, this bundle sports loads of extra goodies. Besides the spectacular collection of modern script fonts, you’ll get tons of OpenType features from alternates to ornaments to swashes. Whether you’re designing wedding invitations, menus or greeting cards, this typeface collection is the perfect solution.
See the previews


Sponsor RWD Weekly and reach more than 28,096 responsive champions


Articles

CSS Grid Layout

The CSS Working Group has published an updated Working Draft of CSS Grid Layout Module Level 1. This module defines a new type of layout manager, the grid, which makes it extremely easy to specify complex, responsive 2-dimensional layouts for a page or components.

Regressive Web Apps

Jeremy Keith looks at the current state of Progressive Web Apps (PWAs) and is concerned that rather than focussing upon the web it seems to be heading first and foremost towards “being more like native”.

Menus, sharing, and dynamic CSS classes in AMP

AMP are increasing the complexity of their markup and including an amp-sidebar, amp-accordion, and amp-social-share.

A Guide To Personal Side Projects

I love a good side project, in fact this week our feature site is one that I’ve only just picked up again… my problem is too many side projects and keeping focus 😉

Position Wanted: Front-End Director

With Design Directors and Creative Directors, do we need Front End Directors? Zeldman looks at why we should.

Optimizing for the Next Billion Users

Not all networks are equal – and it is important to design services that account for this variance in quality.

The importance of URLs

Bruce Lawson from Opera chimes in on keeping URL’s obvious and easily accessible in Progressive Web Apps.

Design systems and Postel’s law

Atomic CSS Modules

On URLs in Progressive Web Apps


Tutorials

Autofill: What web devs should know, but don’t

Making forms easier to fill out, especially on mobile, is something we should all be aiming to achieve. Did you know these tricks you can take advantage of today though?

Using Let’s Encrypt SSL With Your WordPress Project

Now with the V1 of Lets Encrypt, a free SSL certificate, there’s no reason not to secure your own site. This tutorial will help you out with your next wordpress project

Sticky Footer, Five Ways

Do you want your footer to always be visible at the bottom of the screen? Not so easy with the various sized devices, browsers and OS…. but here’s 5 different ways to get you going

The box-shadow Property

The chances are that you’ve already been using box-shadow and with the “flat” design era you’ve probably stopped using them too. This is a very comprehensive look at the basics and some fun ways to use them.

Web App Manifest

Want to give your web app a spiffy splash screen when the user adds it to their home screen? Web App Manifest is the place to look.

Debugging CSS

Ben Frain’s methodical approach to debugging CSS.

Considerations for styling the < pre > tag

If you’re writing articles and tutorials about the work that you do, and I really hope you are, then having a well designed code block or <pre> tag can make your content easier to consume.


Tools & Resources

Caniuse command line tool

Just what you’ve always wanted, it’s a caniuse command line tool! All the power of caniuse.com with none of the nice UI or interactivity!

Lighthouse

auditing and performance metrics for Progressive Web Apps

Flex Layout Attribute (FLA)

Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes.

CSS Guidelines (2.2.4)

High-level advice and guidelines for writing sane, manageable, scalable CSS.

Service Workers 101

An infographic to summarize the most important parts of the Service Workers’ API.

Web Performance Tooling

Let Paul Irish and Sam Saccone show you new tips, tricks and features in DevTools (and beyond!) that help you debug the performance of your site. Measuring your key user interactions and diagnosing your bottlenecks is key, and Paul will illuminate the best practices by showing performance opportunities in real world sites.

Finally

Thanks for subscribing and I hope you managed to pick up a few new ideas and learned something new this week.

See you next Friday!

Cheers,

Justin.

Responsive Design Ebook

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *