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
These interactions require JavaScript, and while I’ve been fine in the past 15 years to build websites with enough knowledge to be able to look at existing JS implementations and re-engineer them for what I need, I now feel that my JS skills are inadequate to continue to develop the types of the products that I want to create (and that’s a horrible feeling).
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.
Article
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.
Tutorial
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)
Dark mode
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
JS Courses
Vanilla JS Academy
A project-based online JavaScript training program for beginners. This one is starting on Monday and there’s a 30% discount on it now (more if you’re in the UK)
How To Code in JavaScript (free)
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).
Eloquent JavaScript
This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here, or get your own paperback copy.
ES6 for Everyone
A premium training course to strengthen your core JavaScript skills and master all that ES6 has to offer from Wes Bos.
javascript – Lynda
Watch our JavaScript how-to videos and learn to code, create, and build JavaScript arrays and functions. Understand how to write JavaScript code to create HTML5 sites and other interactive websites.
Practical JavaScript (free)
Build a strong JavaScript foundation for web development with Watch and Code.
JavaScript Foundations (free)
I’ve been a long-time user of Gymnasium. JavaScript Foundations will teach you the fundamentals of programming with JavaScript and get started on the road to its mastery.
The Modern JavaScript Tutorial
How it’s done now. From the basics to advanced topics with simple, but detailed explanations
Learn JavaScript from scratch
Zell has a course on JS but it only opens a couple times a year. The next time it opens will be January 2020.
Tools
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.
Cutestrap
A powerful 2.7KB pure CSS framework
//Sponsor
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!
Finally
Click the button!
That’s all for this week, see you again next Friday.
Cheers,
Justin.
