Hello and welcome to RWD Weekly #293, and a special Happy Australia Day to all our Australian readers... have a Tim Tam and a packet of twisties for me.
I've just come back from a PWA (Progressive Web App) meetup in London where there were a lot of helpful tools and resources shared (see below). I also got to — all too breifly — meet Peter O'Shaughnessy from Samsung Internet and thank him for all his help on the WebVR testing and prototyping I was doing last year. Very clever guy and incredibly helpful.
The PWA meeting was timed perfectly as well after the big announcement from Apply that they're shipping Service Worker support in the next Safari release on OSX and iOS. While it is going to be missing push notifications (for now) I encourage you to focus on the positives and more than ever start building (or pestering your clients) your apps on the web. For a long time I've heard "Yes, they sound great but until they're suppored on the iPhone grumble grumble"... well now they are and it is very exciting times as a result!
Let's get clicking!
| | Headlines This is brilliant from Erik. Don't be put off if you're not into Chess, however, I do think it's a great analogy. The article takes you through the many design decisions you might be faced with designing a simple download button, and why focussing on individual elements can help build up a great design rather than trying to tackle everything at once.
Just out of interest, that article is from A List Apart who are celebrating their 20th birthday today (or yesterday as you read this).
As I mentioned in the introduciton, Service workers are coming to iOS.... let the dawn of the PWA begin! This twitter feed covers off just some of the amazing features coming to Safari.
| |
This hands-on course empowers you to build responsive websites that look great and perform even better across multiple devices.
thegymnasium.com | | Articles If you're redesigning your site and thinking about the potential move to a new platform then this article on the review of static site generators is a great read. Big sites, like Smashing Magazine, have moved over to the static approach and it's interesting to see how different sites deal with different teething problems.
This is a great article by Dan around the best approach to scoping a website build (or anything for that matter). Breaking it down logically into chunks allows us to see the components, and down further and further until you can see if you're able to get it done within the time (if not, increase your time or decrease the scope).
In my years of experience the general rule for the time it takes to delivery anything is the time quoted/defined plus 5%. Why? Well because if something is done early I always find a way to use the extra time to do something even better... which takes a smidge longer. Client is always happy though ;)
If you're still using jQuery (and a lot of people are) take note that they've released another update along with a new feature.... the ability to add an array of classes.
Slacks Engineering team uses WebPack for bundling front end assets. This is great news for your users, however as you application grows over time the build process can take longer and longer. Here's what they did to help keep it speedy on both sides of the fence.
Aria expanded can be used to let assistive technologies know if an element is opened or closed. The TL;DR is in the title of the article, but the rationale behind it (the important bit) is worth reading.
Tutorials If you're a performance AND typography nerd then this is the article for you. Using the UserTiming API along with the Font API you're able to capture the font performance, and then use Boomerang to log it for later reporting.
Just because you can..... generally means you should.
I'm building a little Progressive Web App for an event and the event timetable is on a 3rd party with no API. This is a great article for working on how to get data for these kind of situations.
Here are a series of common issues across common layout modules that can be easily fixed by using CSS Grid and Flexbox (both of which are fully supported with all current browsers). Don't support only the current browsers? No problems, there's fallbacks here to help too.
Having your site appear faster for your users is the best thing you can do for your site in any industry.... period. If you're pulling in resources from outside your own site (fonts, scripts, videos, ads etc) then using preconnect will ensure that they don't slow you down (as much as they can do).
With the combination of SVG and CSS Grid you no longer need any funky position/padding tricks to keep elements in ratio.
Bringing Grids and Columns together in one big amazing awesome layout family. Because columns can be set a width and it will fill the space as required, if you add a grid inside the columns it will also spread those elements out for you within the confines of the grid and column rules? Sounds complex, but in practice it's pretty freaking cool.
Below we've added a video of Benjamin De Cock delivering a retrospective talk on CSS Grid at DotCSS. This is more the tutorial on the type of work he was doing on the Stripe site with CSS Grid Benjamin De Cock walks you through a retrospective review of including Grid Layout in production after rolling it out on the Strip.com site. For anyone that says 'I need to support older browsers' I've got to say roll with this video.
Tools & Resources The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web sites.
PWA.tools takes data from your site and uses that to generate cross-platform Progressive Web Apps (thanks, Christian Heilmann for sharing this)
This is great for marking up potential changes to your site.
J.A.R.V.I.S. (Just A Rather Very Intelligent System) will put in your browser all the relevant information you need from your webpack build whether in dev or in prod. Personally, I haven't got my head around webpack or started using it, however my much smarter friends have and they have great things to say about this
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos.
A lovely little tool that will check to see how your site is configured with your meta tags. Meta tags allow your site/articles to be shared on other channels and bring across the right introduction, image, and title which will lead to more clicks to your site... so you should get it right (says the guy who's site failed the test)
Free online image upscale and enhancement with neural networks
BackPocket provides high quality notebooks that conference attendee's will keep forever instead of putting it into the hotel room bin. Check out our examples and make a lasting impression with your next event. 10% off when you mention 'RWDWEEKLY'.
// sponsored
That's all from me this week. If you've read something interesting, or even better yet if you've written about something you've done please hit reply and share the love/knowledge/link.
See you next week.
Cheers,
Justin. | | | |
No comments:
Post a Comment