Hello and welcome to RWD Weekly Edition #271.
Our featured image this week is kinda lame I'll admit, but it's showcasing the awesome font-display capabilities which you can see more of if you click on the image and head to the JS Bin. When I first loaded the page it didn't do too much, but if you throttle your connection in Dev Tools you can see how each of the font-display methods render.
This week I've been playing around with AR.js and I'm really excited about the possibilities of extending what we see on a desktop screen by using our mobile screen and camera to bring it to life a little bit more. I love that every day I open my laptop that someone in our community has put two things together in a totally different way to everyone else and has created something new and awesome that didn't exist yesterday.
What a time to be building the web!
Headline "Javascript is so hot right now" - I hear Mugatu say in Zoolander5. CSS comes a close second with a tonne of talk about CSS Animations and the new Grid Layout now.... but what of poor ol' web ingredient number 1.... HTML! If you think HTML is something of a given I invite you to take a look through the HTML5.2 candidate recommendation... simple yet powerful AND complex at times.
This is your homework for Friday! When you get into work you should pick one of the sites you've been wanting to make a few updates on for a while and start going through this list one by one.e | | WP Migrate DB Pro is literally the best plugin available for Wordpress for anyone that wants to do some local development or content creation. I use it for writing content on trains and plans with patchy wifi and it's so worth the money it's not funny. Take advantage of this deal today.
Get 20% off any purchase today.
| | Articles Jason Grigsby weighs in with his thoughts on the move from Apple to start working on Service Workers in WebKit.
With the world of AR now even more possible there are a number of use cases that seem to jump out. These would have to be more useful then it would be to charge and wear a set of silly glasses all day so let's see what he Luke W came up with.
The properties for defining the grid gap is going to be changed and will be dropping the prefix 'grid-' and just have column-gap, row-gap and gap. This is great because it provides the ability to extend the declarations to things like Flexbox. Rachel is also taking over the multi-column spec, something which is desperately missing in CSS layouts.
Firefox 55 brings WebVR to the desktop browser. I've been really enjoying playing around with AFrame especially creating little planetariums that show off the stars and planets. FF55 also comes with some performance improvements and brings the IntersectionObserver API to allow the browser to report easily on something being within the visible area of the page (think lazy loading content, or performing animations when in view).
This is a wonderful site, very beautifully typeset but also the visualisations are really well done across a variety of viewports.
A really interesting look and study into how people perceive VR before using it and how they react afterwards. It goes further into looking at the best applications for VR too.
I love the look of the new PWA logo and it was neat that it came about through the community. PWA is the new RWD.
Tutorials Rolling out Service Workers can be disastrous if you get the caching and offline elements wrong — here's how you can test them first.
Learn all about setting explicit grids, where you define the column widths and heights, and the implicit grid where you allow the grid contents to define it.
As the web moves on the concept of responsive web design is growing as well. The speech input method has been around for a while, but until recently we haven't been able to capture, make sense of, and reply to that input easily. Well the future is now folks, and this tutorial will show you how you can use a few tools to pull it all together.
A great little progressively enhanced approach to removing the focus ring from elements on your site unless they're required. arguably they should always be there, but I bet that on 90+% of the sites you've built you've removed it (or a 'reset' has removed it for you).
A simple set of python functions to help working with animated SVGs exported from Illustrator
I've already mentioned the intersection observer in the story about Firefox 55 but this tutorial goes into a lot more detail (with Polyfill).
Paul Kinlan builds a progressive progressive web app (not a typo) and questions whether the App Shell is the right approach. A great in-depth tutorial with all the code available to try out yourself.
If you're digging into CSS Grid Layout then you might want to check out using something like this Sass Mixin to provide some better browser support.
A great example of how to include grid-auto-flow: dense; to get the masonry style layout with CSS Grid Layout.
Using resource priorities to improve the speed of delivery. A great article that covers not just the approach to prioritising the right assets, but also how you can dig into the Dev Tools to find out what to prioritise.
Find out why and how people are overhauling the way that they read.
// sponsored
Plugins, Resources, & Tools This looks pretty neat. Kinda link codepen but offline.
I find the analysis of content incredibly interesting, and especially the real-time feedback as you type. This tool is designed specifically to keep job descriptions clear, and where possible, gender neutral (although you could use it to be biased in either direction).
💰Expenses is a progressive web application on top of Google Sheets 📉 written in React ⚛️. It is only a static HTML that works great on mobile 📱 and can be deployed anywhere.
Efficient Augmented Reality for the Web - 60fps on mobile!
Give users new ways to interact with your product by building engaging voice and text-based conversational apps with API.AI.
A chrome extension that allows you to see the grid that has been applied to the page. Kinda the same thing as the Firefox built in version but for Chrome (but surely the dev tools team can't be too far away with this).
With all this talk of AR this week I wanted to showcase some amazing new art....
Michelle Tilley 🌈 on Twitter: "HOLY SHIT the art in our new office addition is SO COOL 🎨 https://t.co/kA4UyX0hip"
Now this is what I really call responsive design.
See you next week!
Cheers,
Justin. | | | |
No comments:
Post a Comment