Hello and welcome to a very exciting edition of RWD Weekly. Why is it so exciting I hear you ask... well it's because I've got the opportunity to give one you a 12-month membership to Frontend Masters. For the rest of you, you can get 38% off annual memberships if you subscribe before Tuesday.
Frontend Masters has lots of great workshops to help people level up their front end skills, in particular, I'm looking forward to Jen Kramer's two-day intensive on CSS Grids and Flexbox.
New workshops that are added to the catalog every month recorded every month in front of a live audience--and members can attend them online for free with their membership.
Now, I won't be announcing the winner until next weeks newsletter so if you don't want to miss the 38% discount then subscribe now and, if you win, you'll get your money back! Boom!
Okay, so you probably want me to cut to the chase and let you know how you can enter, right? Well, it's as easy as clicking a button (that red one below) and letting us know on twitter why you'd like to win. This link will automatically mention @reswebdes and @frontendmasters so we can see the entries.
Get clicking (but also, y'know, read the rest of this weeks email too) | | Headline I've recently looked at a couple of Front End related jobs and was disappointed to see all of the requirements being focussed around React, Vue.js, Ember etc and not a single mention of HTML or CSS. It's time to make HTML and CSS first class citizens again, while still maintaining the importance that Javascript has.
This is perhaps one of the most comprehensive reviews of flexbox and how it can power just about any layout you're trying to achieve. | | To celebrate the launch of their new site Frontend Masters are giving you 38% off their annual subscriptions. As a bonus for one lucky reader you can win an annual subscription by simply clicking on the button below and telling us why you want it.
| | Articles I think everything on the web should be debated, discussed, and decided upon by the people that will be building the solutions and consuming them as well. Personally, as you will have noted in the past, I'm not a fan of AMP itself but I love the push towards faster websites. This article is all about embracing AMP rather than my usual Anti-AMP sharing. You should read it and make up your own mind about it.
Treebo is India's top rated budget hotel chain, operating in a segment of the travel industry worth $20 billion. They recently shipped a new Progressive Web App as their default mobile experience, initially using React and eventually switching to Preact in production.
What they saw compared to their old mobile site was a 70%+ improvement in time to first paint , 31% improvement in time-to-interactive. and loaded in under 4 seconds over 3G for many typical visitors and on their target hardware. It was interactive in under 5s using WebPageTest's slower 3G emulation in India.
This is a wonderful article that talks about everything that we need to know when crafting our sites. A must read.
An initial look at some considerations around designing for the upcoming iphoneX, although we all design for any viewport right?
I love the animations that we're seeing more and more of the web now but I'm always at a loss about the entire process from concept to completion. This article takes you from a paper sketch to finished code pen.
Windows are working on brining Progressive Web Apps to be available in the Windows Store - the web is a first class citizen on the phone!
Tutorials This is one of the best Grid tutorials I've seen so far. It steps through the process of creating a grid using inline-block and layering improvements with flexbox and then CSS Grid through the use of Feature Queries. Amazing job by Hui Jing.
Building a better seat reservation process.
Here's a case study from the Wordpress Hosting team over at Kinsta around their results with AMP and why they chose to abandon it (and also, how to do it without harming your site rankings with Google).
With a single line of CSS we can completely reorient any element on our page – we can move it, rotate it, resize it, or send it into another dimension (to an extent). This all comes to us via the transform property.
Ditch console.log debugging once and for all! Learn how to use breakpoints to debug code within the Chrome Developer Tools
And it's visual! Start your free trial now
// sponsor 
Resource Practice briefs, resources & skill development for designers. Create a learning path or complete series...
iOS 11 introduces ARKit, a new framework that allows you to easily create unparalleled augmented reality experiences for iPhone and iPad. Kits like this are great to get started, but I'd urge you to put those learnings back into WebVR so that we extend for the web, and not just a couple of devices.
Design apps quickly by using Photoshop and Sketch templates, plug-ins, and other preconfigured UI elements. Oh, it's also got AdobeXD templates too.
htmlreference.io is a free guide to HTML. It features all elements and attributes.
Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API.
Video & Presentations CSS Grid Layout promises to revolutionize layout on the web, bringing true two-dimensional layout to the web for the first time. Melanie Richards shows how Grid Layout got started at Microsoft in XAML, and through partnership with standards bodies and the community, is now shipping simultaneously across all major browsers in 2017.
Just short of 50 minutes, and drawing on Mark's long (no, longer than that) experience with VR, this talk may well change the way you think about the technology and what it means to your work on the web.
Finally If you don't have a twitter account and still want to go in the drawer for the Front End Masters subscription you can hit reply to this email and let me know personally why you'd like to get it.
That's it for this week. See you next week!
Cheers,
Justin. | | | |
No comments:
Post a Comment