RWD Weekly #381
Hey everyone and welcome to weak #381 of the responsive design weekly.
This week I’ve started on a small project that is utilising Web AR. To do this I’m using a combination of 8th Wall’s image tracking and AR capabilities, along with Mozilla’s Aframe to control what is being rendered onto the screen.
To help along with the user experience I want to check to see if the image target has been detected, and if not it should provide some feedback to the user that they should point their camera towards the target. I also want to detect once an action has stopped (a video has played) and they add some additional elements into the scene
As I occasionally do, I turned to twitter for some advice on JS courses that I could take as a beginner to try and build those skills back up again. The response was brilliant. I had recommendations for courses I’d already come across (always good), and brand new recommendations for courses that I hadn’t seen before (just as good). This week I’m going to feature all those recommendations in the newsletter in the order they came through on Twitter. If you’ve done any of the courses please hit reply and let me know how you found them, and if you’ve done a starter JS course that isn’t listed please let me know so I can build out more of a comprehensive list. Check them out in the links.
I touched on the
For new subscribers (and old ones of course…) every day, any day, any time, any where…. if you’re feeling anxious, sad, depressed, if you’re struggling with your job, relationship, kids, life….
Let’s get linking.
Is Using Coil to Monetize Prompts Gonna Work?
Dave Rupert looks at the process of adding Coil as a revenue stream for his PWA drawing app. This week I had my biannual catch up with friends Al and Bart where the topic of Coil and making money was discussed at length. There were some good ideas, but there was also some scepticism around how easy it would be to scam potential business ideas. We’re planning on doing a podcast on it, but if that doesn’t evenuate I’ll share our ideas in the next few weeks.
Toucaan—Rethinking CSS Frameworks
I’m not sure the web is asking for a new CSS Framework, far from it, but I like the idea behind looking at what we need from a framework and starting again from scratch.
Editorial Design Patterns With CSS Grid And Named Columns
By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.
A Guide To New And Experimental CSS DevTools In Firefox
As I’ve mentioned (a lot) before, I’ve switched over to Firefox as my primary browser. At first, the only downside was my lack off familiarity with the dev tools, but now I prefer it over Chrome’s. In this tutorial, you can see how the Grid Inspector, Fonts editor, Shape Path Editor and more work (seven tools in total)
Jeremy applies a dark mode to his site during a recent indie web camp. The thing that I quite like about it, aside from the use of CSS Custom Properties, is the approach to darken your images with CSS as part of the update. I never would have thought of that.
Patterns for Practical CSS Custom Properties Use
Jeremy’s article was about implementing some great features for Dark mode using CSS Custom Properties but in this article Tyler goes through everything you might want, and need, to know when using them.
Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout)
What the title says ^
How to read a Web Page Test waterfall chart
If you’ve ever looked at a Performance Waterfall chart and wondered what all the sections/colours meant then this tutorial is certainly something that will help you.
Images done right: Web graphics, good to the last byte
The other day I was explaining a lot of this stuff to someone who was sending me 15mb PNG’s of photographs… ugh, and had I not been checking at the time these would likely have made it onto a site. Images are one thing you have a LOT of control over so please make them as teeny tiny as you can get them.
Mozilla Developer Video Channel
Lots and lots of short videos about how you can get the most out of Firefox Dev Tools
Vanilla JS Academy
A series of posts from Tania Rascia and Lisa Tagliaferri that cover from using the developer console right the way through to an article this week on This, Bind, CAll and a bunch of things I don’t understand (yet).
ES6 for Everyone
How it’s done now. From the basics to advanced topics with simple, but detailed explanations
Zell has a course on JS but it only opens a couple times a year. The next time it opens will be January 2020.
Screen Size Map
An interactive map of screen sizes for responsive and adaptive design. It’s a great visualisation but remember, there is no spoon.
A powerful 2.7KB pure CSS framework
Get Your Free .design Domain Name!
A .design domain name is like .com and .net, but it’s more relevant to what you do as a designer. Your free .design domain name lets potential clients and employers know what you do before they even arrive to your website. And it helps with your branding. It looks great on resumes, business cards & as a professional email address. Claim yours today!
Click the button!
That’s all for this week, see you again next Friday.