RWD Weekly #317
Hello again and welcome to this week’s responsive design weekly newsletter.
This week we look at why you might not want to support IE11 with Grids, how you can comment better on the web with web mentions, we have live coding tutorials and examples on how to delivery some pretty damn impressive data visualisations and MUCH more.
Let’s get linking.
Headline
CSS: A New Kind Of JavaScript
Heydon uncovers a new way to apply visual styling in your javascript applications. Prepare to have your mind BLOWN!
Fractional.
Ethan Marcotte talks about one of the best sizing methods you can use for Grid, the FR unit. He shows how you can create fixed columns and let FR take care of the rest, or how it can allow you to have lovely margins on the side of our pages while still allowing for full bleed imagery when we need it.
Sponsor
State of The Browser 2018
State of the Browser is a one day conference on Saturday 8th September in London. The conference started and continues as an event for everyone in the web community, the goal to make it as accessible to as many people as possible. This is why, unlike many other conferences, we run it on a Saturday so no one has to take time off and we only charge a minimal fee to make sure that our attendees have an assentive to turn up on a Saturday morning. Heavily discounted tickets are available for students, and they have a diversity scheme for under-represented members of the community.
Saturday 8 September 2018 at Conway Hall London.
Draw inspiration anywhere: Affinity Designer for iPad is out now
The full power of professional vector graphic design at your fingertips. Developed with input from leading designers, and based on Apple Design Award-winning technology, Affinity Designer is the most ambitious creative app developed for iPad. It’s available now with a launch discount of 30%, priced $13.99/£13.99/14,99€ and no subscription.
Articles
CSS grid in Internet Explorer 11
It just wouldn’t be a weekly newsletter without looking at what Jeremy Keith has been doing this week. After we featured a three part series of making Grid work in older versions of IE Jeremy puts down a great argument for counting IE11 as a non-supporter of grid and to include it in that set of browsers you design fallbacks for.
Webmentions: Enabling Better Communication on the Internet
Comments are one of the most terrible and hateful places in all of the internet. Yet, they are key to providing feedback and to bring a collective community together. The problem with comments are often they are castaway mentions with no ownership, web mentions helps change that.
Nick Sherman on Twitter
These pictures from 1948 show Coca-Cola’s plans on how to create a responsive advertisement when more and more wall space was available.
Tutorials
Baby Spike Live Coding
Nadia Bremer is one of my favourite speakers and digital artists (she may not agree with that title). The visualisations that she developers are simply amazing, and this resource is all the code split into steps that she live coded during a recent talk… all of which is based on the Baby Spike visualisation that Nadia and Zan created last year in Scientific America. Amazing.
Simple Image Slider Transitions
This is a really long video, but it’s great to see two people pair programming their way from a UI video and implementing it directly in Code Pen along with all the mistakes that might happen along the way.
9 Biggest Mistakes with CSS Grid
As we start using CSS Grid more and more we’re going to make mistakes or assume that we should be doing things in a particular way… and that’s cool! Luckily, Jen Simmons covers off 9 most common mistakes she see’s in CSS Grid
Animating SVG Files With SVGator
Although this is a sponsored post over on Smashing Magazine it is a very cool looking cool that will give non-developers an ability to build out their own SVG Animations. I’m interested to see how ‘production ready’ the out put is.
How to use Docker for easy and fast WordPress development
If you’re using WordPress and need something light and easy that you can use to spin up new environments quickly and easily for development make sure you read this tutorial. Docker can create containers that work just as well for production and development, and are lighter than most of the alternatives
The web designer’s guide to Flexbox
Learn how to create better CSS grid systems to easily centre, align, scale and reorder elements on your web page.
Buidling complicated Grids with CSS Grid
Tools & Resources
Font Playground
This is a great place to play around with variable fonts, just remember that you need to use a variable font browser (Chrome) to see the effects.
Let there be light
Jobs
Digital Consultant
To enjoy this role, you need to be the sort of person who really ‘gets’ tech and can think about applied uses of emerging tech within a niche industry, whether it’s AR and VR, Machine Learning and AI, or enterprise search and Google Analytics. You need to know about DNS, be pushing HTTPS, understand Service Workers, and be responsive by nature. We don’t tell you what to do in your spare time, but we won’t be surprised if you go to conferences, have side hustles, and have a blog or podcast.
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.
