For those of you who've never heard of it, MirrorConf is a conference that happens in Braga, Portugal, gathering designers and developers under the same roof with a really interesting speaker lineup. "Refraction: technology that changes" was this year’s title — the 2nd edition — packed with two days of workshops, two days of talks, twelve speakers, one party and more than 400 attendees, including Hugo and me, coming from all over the globe. Now — before we go any further — I suggest we set the proper reading environment, ok? So plug your headphones, here we go:
(thank you MirrorConf for the playlist)
It became clear in this edition that MirrorConf is a major event of great relevance in the industry scene. With technology changing and evolving at a crazy pace, it couldn’t be more appropriate. There’s a need to "fill the gap" between designers, developers and business.
As you may already know superhuit landed in Porto this year and is putting together a super team, so it’s fair to say that Portugal is already part of our company’s DNA. All things considered, we couldn’t miss this really great event and the opportunity to connect with such talented people!
Things aren’t really always
#000000 and #ffffff
So "things aren’t really always black and white" as MirrorConf says well, and we couldn’t agree more: in the last couple of years we’ve been seeing a lot of changes happening around design and development. New technologies arise in the blink of an eye, development tools and applications are becoming more and more refined allowing us to work more efficiently within teams. Scary on the one hand, amazing on the other hand. Exciting times for sure, and we get the chance to be part of this and shape the future.
Let’s talk about some of the conference highlights.
The <svg> of .svg
Sara Soueidan is a well known developer from the web community, and one of the subjects she is currently focusing on is SVG. In her talk she explained in detail the SVG coordinate system - viewport, viewBox, and preserveAspectRatio - and how one can use SVG to produce cleaner code and take advantage of it for great responsive design. If you’re interested in learning how you can use SVG to do more than just serve scalable vector graphics you should definitely follow Sara and read more about the subject on her website.
Solving Layout Problems with CSS Grid
and Friends
We went a long way into creating layouts for the web. In her talk Rachel Andrew explained how we can use css grid layouts today and how to approach non-supporting browsers. Basically we need to take advantage of cascading, so the solution is writing code for old browsers - the fallback css - then for new browsers - the grid css. This way, what will happen is that all browsers will interpret the fallback CSS first, the ones that don’t support Grid CSS will stop there, and of course the ones that do will use it. Because of the way rules are defined in the spec, many of the fallback declarations will not take effect in the grid layout. Some though will ‘leak’, like most certainly widths set on items, and this is where we can use CSS Feature Queries to override those leaked styles, because there is no browser supporting Grid Layout that doesn’t support Feature Queries. There is a lot more to explore here and go into detail but to sum it up, like Rachel well said, we should keep in mind while adopting these new features that ‘The fundamentals of CSS haven’t changed’. So we need to take advantage of what we already know and move forward in a smart way. If you’ve been wanting to know more about CSS Grid make sure to check Rachel’s talk resources. Oh and by the way, she just published a new book about CSS Layout so you should definitely check it out!
A Little Story About A Big Bang Redesign
You sure know Vitaly Friedman, editor-in-chief and co-founder of Smashing Magazine. In his talk he shared some good insights into Smashing Magazine’s Relaunch in 2017. It’s always interesting to see which approach and workarounds developers take to solve difficult challenges in a smart and creative way. Again there are a lot of opportunities for us to use what we already know. For instance, have you ever had the thought you could drop all those media queries for setting really smooth responsive typography? You can with CSS calc() and viewport units and some trickery around to set minimum and maximum constraints. This gets even more interesting when you apply the very same technique to other properties like margins and paddings. A lot more was covered, make sure you check out the upcoming version of Smashing Magazine.
Evaluating Technology
Jeremy Keith is a web developer and author from England, Founder & Technical Director of Clearleft. Anyone working in the field knows how hard it is to keep up with technology. In his talk Jeremy brought some really good perspective and insights on how we can evaluate tools and technologies in a way that benefits to the best the people who use the websites we design and develop. A lot more was covered from service workers to web components. To wrap it up, when evaluating technology, more importantly than asking "how well does it works?" we should also be asking ourselves: "How well does it fail?"; "Who benefits?"; "What are the assumptions?". Make sure to check Jeremy’s website where you can find a lot more about the subject.
Let’s Work Together
The last speaker of the conference was Brad Frost, web designer and author of the popular book Atomic Design. We couldn’t end without mentioning this one, even if briefly. This topic is one of the most challenging aspects on team collaboration because yes, "our work is done with other people, for other people"! In his talk he explored methods, tools, and techniques teams use to produce great web experiences and he talked about some important principles and helpful tactics to help make great work together. Principles and guidelines, culture, voice and tone guidelines, design systems, code style guides - so much was covered. In a sentence: "Collaboration and communication beat deliverables". If you’re interested in the subject, Brad has a lot of resources available on his website for you to check out, don’t miss it.
MirrorConf was a blast and they know how to put together a really interesting event. The standard has been set very high and superhuit will certainly be there next year! See you there.
Luís