The past two days I've been having a smashing time — hanging out with some super clever web folks and watching some front-end performance champions on stage at the Smashing Magazine Conference in London. I'm going to be writing some of my particular key takeaways but I took something more significant away as the conference wrapped up.
Vitaly Friedman, the face of Smashing Mag (and who's birthday it happens to be today), gave a lovely closing speech/thank you to everyone that was in the audience. In the speech he mentioned that everyone that was there in attendance was thought of as part of the family and it was something that struck a chord with me and I realised that I feel the same way about you (don't worry, it's not going to get weird... or any weirder). You let me into your inbox every Friday to say hello and rattle off everything that I found for the week which is really cool and I appreciate the opportunity.
Smashing do a wonderful job keeping us all up to date with what is happening on the web and give new writers opportunities to get published (paid as well). If you don't already, I would encourage you to join the smashing family so they can continue to keep you up-to-date (plus you get access to all their books for free, and free webinars for things like WebVR, CSS Grid, UX frameworks and more). It's only $9 a month (also $5 and $3 options) and the books are worth $381 on their own.... Think of it like a special birthday present for Vitaly — Say Happy Birthday :)
I also wanted to say apologies and thank you to everyone who received two editions of last weeks email. A lot of you replied to explain how you consume the newsletter each week and it's made me realise that relying on email stats just doesn't work. THANK YOU for writing back and providing your feedback, I love it when I get to hear from you.
Okay then, let's get linking. | | Headlines With most of our clients ignoring the benefits of Progressive Web Apps because it doesn't really work on iPhones and iPads it's time to get your 'new project' pitching hat on and book in some meetings. Service workers are done and implemented in the technology previews for Safari Desktop and the next release of iOS. Once that lands there's a real argument to move most of the native apps for companies across.. the only real thing missing will be notifications on iOS.
Although the CSS Grid has only just (relatively speaking) hit browsers they're already well on the way to working out what the CSS Grid Layout Module Level 2 should contain. If you've started buiding with Grid, and I highly recommend you should, then head along to this link they voice any opinions you might have to make it better. And yes.... if you have started using it already then I can tell you that SubGrid is already in the specification.
| | | Early-Bird Pricing: Join us in San Francisco on April 12th 2018 & learn from some of the industry's leading experts as they discuss user & industry trends that span machine learning, web performance, & how VR/AR will impact your organization. Use promo code RWD99 | | Articles If you rewrite that app as a PWA today it will work as intended 50 years from now. Are you confident enough to say the same about that Java or desktop Windows app you're using currently? Me neither.
Aside from the Service Workers updates we also have a media query update. You can now include calc() within the media query itself. I've never had a need to do this so I'm interested if you have had a use case in the past for it, hit reply and let me know. Either way, you can now do it in the next round of Safari release.
Brew, Bower, Node, NPM, Gulp, Yeoman, Webpack.... do you recognise some of these things but don't _really_ know what they are or how they fit in? This article gives you an overview of front-end tooling in a simple and easy to understand way.
I've been working on training new markers for a web-based AR experience lately. If you're looking to get started this takes you through the requirements of a marker and provides a command line approach to configuring/training ARKit with them.
WCAG 2.0 guidelines have been around for a long time now, y'know the ones which are graded A, AA, and (almost impossible to get) AAA? Well version 2.1 has now become a candidate recommendation and I would encourage you to start working towards this as your new standard. The new spec is backwards compatible to 2.0, so any legal requirements you might have will be covered.
The overview of modern CSS from the basic layout to preprocessors to post processors and CSS methodologies.
Mark Boulton has redesigned and re-platformed his blog. I've always loved Marks design work and his first book on web design is still my all time favourite. Check out how he undertook his recent redesign.
Tim is another one who has recently updated his site platform. Previously on Jekyll he used a lot of insight from Sarah Soueiden's blog to help him make the switch over.
Tutorials In my day to day job I always have clients asking us to come up with 'innovative' ways to engage with users. *sigh*. That's a tough brief. That is why I love it when people like Daniel write web tutorials like this to introduce interesting ways to add interactivity on their site... but through the medium of visual illusions. Very cool!
This course is focused on getting you up to speed as quickly as possible. Even if you only watch the first lectures, you'll be able to take advantage of your new skills in your next project.
If, for what ever reason, you want to fill any places in a densely packed grid (using grid-auto-flow: dense) then this bit of JS does that for you. It inserts randomly-sized elements to the end of the grid until the grid changed size. At that point, you know that you've added one-too-many; so, remove the last-inserted element.
Hui Jing takes us through a great approach to designing with Grid. Taking an image for inspriation, sketching out the grid layout on paper, creating the content (HTML) and then styling up that CSS Grid Layout. A lovely process (which I also subscribe to) and a wonderful example of how CSS Grid can create amazing layouts previously unachievable on the web.
This tutorial takes you through how to build a page layout that wouldn't be possible without the wonderful CSS Grid.
Tools & Resources Fontanello is a browser extension for Google Chrome and Firefox that lets you display the basic typographic styles of a text by right-clicking it.
Displays network quality as reported by Network Information API... lets you see what your effective current connection is (4g, 3g, 2g LTE)
Hexi-Flexi Grid is an SCSS component, built on the CSS Grid layout, that creates a hexagonal lattice. The mixin includes a number of customizeable settings to control the size, layout and look of the hex grid.
A nifty little grid generator that might help you put together the CSS you need. After a few times I think you'll end up going to writing it out yourself to get a bit more control (and it's surprisingly simple after a few times)
Learn to drive effective digital communication and prepare for cross-functional careers in information management, design, content strategy, and technology.
// sponsored
Jobs The Digital Concert Hall is the leading classical music video streaming service, available worldwide on nearly all media platforms. We're looking for passionate developers who like to deep dive into specific client-side areas and love to collaborate.
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