Hello again and welcome to this week's responsive design weekly newsletter.
This week Tim Kadlec makes a few appearances, as done Alex Russel from Google. We take a look at some tools to help you understand CSS Specificity and take a closer look at WebXR... plus much more.
Let's get linking.
Headline Last week we spoke about the latest release of Chrome and the new approach to avoid loading javascript on pages that are being requested over a 2G or slower network. This week, Tim Kadlec has done a whole bunch of research around this. The article explains how you're able to set your browser to emulate this experience, and how two sites are actually LARGER without Javscript. The key message here is you can not always rely on JS, so build your sites with that as a rule.
"JavaScript is the web's CO2. We need some of it, but too much puts the entire ecosystem at risk." - Fine words from Alex Russel
| | Explore new things in front-end and UX design At SmashingConf NYC! We'll cover Performance, Progressive Web Apps, HTTP/2, Vue.js, Design & Branding, Webpack and much more!
Save 100 USD by adding a workshop to your conference, and make your SmashingConf even more memorable.
| | Articles Github has been working over the past couple of years phasing out jQuery bit by bit. If you're looking to do the same with your own projects they had a great approach.
The next big design change following Responsive Design will be the arrival of WebXR and how we move our sites into Augmented and Virtual environments. The team at Mozilla are doing a wonderful job, and in the coming months FF nightly will let you test these out based on the spec's being developed today.
Earlier this week there was a question posted on twitter which a lot of people got wrong. It was
Given these classes:
A whole comment thread started up about whether people should know about the cascade or not, and part of that discussion was if you're using CSS in JS then the cascade won't matter. Tim's article goes into why it's important that we learn about the tools we have at our disposal, and how it is never a bad idea to do so. By forcing designers to use real or worse case scenario data in their initial designs is means that the product you're building will grow, behave, and last much longer.
Canvas is an infinite white space where your team can visually assemble your front-end, from simple to complex, quickly and easily—zero coding or 'design-to-dev' handoff required. Draw on a library of pre-built components or build your own from scratch. Add custom images, copy, user interactions, and link them all together inside the Mason builder.
// sponsored
Tutorials A cracking list of suggestions from TJ Fogarty about how to get the most out of your site when it comes to performance when launching or reviewing a website
Dave goes ol' school game graphics with the new Paravel homepage and, as usual, he does a great job at teaching us how to do something similar.
Last weekend I made it to the UK Space Centre in Leiscester and spent some time in the gift shop (kids!). They had a couple of bookmarks there which had two images, and as you moved the bookmark you could see one or the other image.... apparently we can do that on the web too!.
Tools & Resources
A browser developed by Mozilla for the iPhone designed purely to test out the new WebXR experiences. What can you build?
A CLI tool to create an annotated tree visualization of any project
This is a great little tool that will create images of your code in a number of different predefined styles. You can switch between a number of languages too including HTML, CSS, JS, Sass, Python, C, PHP, Markdown and more. The images for the CSS test above was done using this tool.
Based on the results of the little CSS test this week, here are a couple of ways to learn about specificity (which I still struggle to pronouce)
If you don't like batman, try some fish
| | Finally
Thanks to those that suggested some of the links for this week, if you have come across something that you found interesting, or have written yourself, hit reply and let me know.
Cheers,
Justin. | | | |
No comments:
Post a Comment