Hey everyone and welcome to week #385 of the responsive design weekly.
This week we’re back to seeing the web die…. there are some great video tutorials for you this week plus a few new offline tools. Gymnasium have also published a couple more shorts for us with CSS grid prototyping in the browser, and using auto animate in XD for some sweet transitions.
Right, let’s get linking!
“The web platform, this beautiful thing that we build sites and apps on, is alive and thriving.”Chris Ferdinandi
The web has been on and off its deathbed for the past 25 years and each year someone/thing gets traction around the end of times and the cometh of native. There are some serious issues, don’t get me wrong, but with people like Chris Ferdinandi and you at the helm to steer us in the right direction we won’t see the web die any time soon.
Take 5 minutes to learn a practical skill with Gymnasium’s Take 5 video tutorials. Gymnasium is dropping a new video every day this month with a different theme each week — from web design to career development. What are you waiting for? Start learning!
Windows had a release candidate out to go with their fancy new logo (does anyone else get reminded of the Firefox logo?)
A new Edge means they’re finally rolling out the changes which essentially make Edge the same as Chrome. I wish they would have stuck with their own rendering engine and helped provide some competition to Google and the Chromium browser, but what we have now essentially is a different UI over the top of Chrome with some different features switched on and off by default.
That sounds familiar though right? Remember that every browser on iPhone is safari with a different UI and less features.
there are some really great suggestions here from Chris. The “find a dribbble shot and recreate it in a clean semantic accessible way” is one of my tasks for next year.
Yes, that’s right. Even though some folks can create amazing artwork with CSS, like oil paintings, there are still things we can not do. The thing I want most from this article is the Page Regions option… allowing text to flow from section to section of a page layout.
What do you wish CSS could do?
After many many complaints about Gutenberg editor within WordPress the future is starting to look a lot brighter. I think they still have a number of accessibility issues to look at for editors that will continue to use the product, but if they put half as much energy into that process as they are to grow Gutenberg’s capabilities they should be in a better place.
This was the first time I’ve missed Adobe Max for a few years but I managed to catch up on the announcement videos. While XD has a pretty constant release schedule, it had some big splash announcements last week. The key ones for me are the introductions of component state design, co-editing, and the improved import/export for Sketch.
I love the light heartedness of this post, but also the fact that it hits WAY too close to home.
An interesting approach in using inline CSS variables to control the layout of your page. I think this is most practical for quick prototyping rather than something you would build out in production, but I love the idea
I had this exact issue last week while building out a mobile AR experience. The idea was that a full screen popup appeared and I mistakenly used 100vw and 100vh to set the width and height and wondered why I couldn’t see all my content. I’m happy to say the solution I found is what Chris has done in this tutorial, so yay for me actually knowing the right CSS to use for a change.
Now, this won’t actually fix the performance/slow loading issues you have on your site from the giant unoptimised images you have on the site — there’s another tutorial about that. Instead, Firefox is fixing the problem of moving content as your images load. Add width & height attributes to all your images, and see load jankiness disappear. Jen Simmons explains how.
Finally in 2019, we have new CSS that allows us a lot of powerful ways to style underlines. Jen Simmons walks you through the options.
Tools & Resources
Jotter is a helpful little notepad that’ll save your notes offline, automatically for you as you type. A lovely little project from Andy Bell.
A blogging platform with no interface
Keep your free Heroku dynos awake while you are working on them and saves the wait time to spin it up every time you want to test it.
That’s all for this week. As always thank you to those that sent through link recommendations, if you’ve come across something or have written something please send it through.
See you again next Friday.