object(WP_Query)#497 (51) { ["query"]=> array(1) { ["category_name"]=> string(4) "blog" } ["query_vars"]=> array(63) { ["category_name"]=> string(4) "blog" ["error"]=> string(0) "" ["m"]=> string(0) "" ["p"]=> int(0) ["post_parent"]=> string(0) "" ["subpost"]=> string(0) "" ["subpost_id"]=> string(0) "" ["attachment"]=> string(0) "" ["attachment_id"]=> int(0) ["name"]=> string(0) "" ["static"]=> string(0) "" ["pagename"]=> string(0) "" ["page_id"]=> int(0) ["second"]=> string(0) "" ["minute"]=> string(0) "" ["hour"]=> string(0) "" ["day"]=> int(0) ["monthnum"]=> int(0) ["year"]=> int(0) ["w"]=> int(0) ["tag"]=> string(0) "" ["cat"]=> int(1) ["tag_id"]=> string(0) "" ["author"]=> string(0) "" ["author_name"]=> string(0) "" ["feed"]=> string(0) "" ["tb"]=> string(0) "" ["paged"]=> int(0) ["meta_key"]=> string(0) "" ["meta_value"]=> string(0) "" ["preview"]=> string(0) "" ["s"]=> string(0) "" ["sentence"]=> string(0) "" ["title"]=> string(0) "" ["fields"]=> string(0) "" ["menu_order"]=> string(0) "" ["embed"]=> string(0) "" ["category__in"]=> array(0) { } ["category__not_in"]=> array(0) { } ["category__and"]=> array(0) { } ["post__in"]=> array(0) { } ["post__not_in"]=> array(0) { } ["post_name__in"]=> array(0) { } ["tag__in"]=> array(0) { } ["tag__not_in"]=> array(0) { } ["tag__and"]=> array(0) { } ["tag_slug__in"]=> array(0) { } ["tag_slug__and"]=> array(0) { } ["post_parent__in"]=> array(0) { } ["post_parent__not_in"]=> array(0) { } ["author__in"]=> array(0) { } ["author__not_in"]=> array(0) { } ["ignore_sticky_posts"]=> bool(false) ["suppress_filters"]=> bool(false) ["cache_results"]=> bool(true) ["update_post_term_cache"]=> bool(true) ["update_post_meta_cache"]=> bool(true) ["post_type"]=> string(0) "" ["posts_per_page"]=> int(15) ["nopaging"]=> bool(false) ["comments_per_page"]=> string(2) "50" ["no_found_rows"]=> bool(false) ["order"]=> string(4) "DESC" } ["tax_query"]=> object(WP_Tax_Query)#239 (6) { ["queries"]=> array(1) { [0]=> array(5) { ["taxonomy"]=> string(8) "category" ["terms"]=> array(1) { [0]=> string(4) "blog" } ["field"]=> string(4) "slug" ["operator"]=> string(2) "IN" ["include_children"]=> bool(true) } } ["relation"]=> string(3) "AND" ["table_aliases":protected]=> array(1) { [0]=> string(21) "wp_term_relationships" } ["queried_terms"]=> array(1) { ["category"]=> array(2) { ["terms"]=> array(1) { [0]=> string(4) "blog" } ["field"]=> string(4) "slug" } } ["primary_table"]=> string(8) "wp_posts" ["primary_id_column"]=> string(2) "ID" } ["meta_query"]=> object(WP_Meta_Query)#240 (9) { ["queries"]=> array(0) { } ["relation"]=> NULL ["meta_table"]=> NULL ["meta_id_column"]=> NULL ["primary_table"]=> NULL ["primary_id_column"]=> NULL ["table_aliases":protected]=> array(0) { } ["clauses":protected]=> array(0) { } ["has_or_relation":protected]=> bool(false) } ["date_query"]=> bool(false) ["queried_object"]=> object(WP_Term)#138 (17) { ["term_id"]=> int(1) ["name"]=> string(4) "Blog" ["slug"]=> string(4) "blog" ["term_group"]=> int(0) ["term_taxonomy_id"]=> int(1) ["taxonomy"]=> string(8) "category" ["description"]=> string(0) "" ["parent"]=> int(0) ["count"]=> int(712) ["filter"]=> string(3) "raw" ["term_order"]=> string(1) "0" ["cat_ID"]=> int(1) ["category_count"]=> int(712) ["category_description"]=> string(0) "" ["cat_name"]=> string(4) "Blog" ["category_nicename"]=> string(4) "blog" ["category_parent"]=> int(0) } ["queried_object_id"]=> int(1) ["request"]=> string(343) "SELECT SQL_CALC_FOUND_ROWS wp_posts.ID FROM wp_posts INNER JOIN wp_term_relationships ON (wp_posts.ID = wp_term_relationships.object_id) WHERE 1=1 AND ( wp_term_relationships.term_taxonomy_id IN (1) ) AND wp_posts.post_type = 'post' AND (wp_posts.post_status = 'publish') GROUP BY wp_posts.ID ORDER BY wp_posts.post_date DESC LIMIT 0, 15" ["posts"]=> &array(15) { [0]=> object(WP_Post)#237 (25) { ["ID"]=> int(6441) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-26 10:30:53" ["post_date_gmt"]=> string(19) "2016-07-26 00:30:53" ["post_content"]=> string(5035) "Code conferenceWith our Code conference starting in Sydney in just a few days and in Melbourne next week, our Idea of the Week this week comes from the conference's Scroll magazine and its editor, Ricky Onsman. As he explains, you should definitely see what your Sydney and Melbourne code-focused meetups are up to this week and next.

Meetups at Conference Time

by Ricky Onsman Web Directions has long been a sponsor of meetups that have a focus on web technologies. Often, these meetups in different cities around Australia provide an opportunity for conference speakers to test material in front of a willing and supportive audience, in the process helping to promote the conference and also attracting more people to the meetup. For that reason, meetups that happen around the time of a conference event are often exciting affairs, with more people than usual and an international flavour. The SydCSS meetup held the night before our Respond conference in Sydney in April was just such an event. One hundred and thirty of us turned up to the rather cool rooftop bar of the Pyrmont Bridge Hotel on a balmy Sydney early autumn evening, where we found a generous bar tab and regular rounds of tasty snacks circulating through the room. Classy, or what? There was a real air of excitement as the usual buzz of friends and colleagues seeing each other was heightened (literally!) by the spectacular semi-outdoor setting, as well as the awareness that tonight would be graced by two major speakers from Respond. Rachel Ilan Simpson is an American UX Designer based in Munich who works on the Chrome team for Google. Her Respond presentation was to be a version of a talk she’d originally created and presented with Guy Podjarnik, and this meetup would give her the chance to test some of the material solo with a live Australian audience. The topic Rachel addressed was one with which developers and designers alike often struggle: finding the balance between website Usability and Security. Users want sites that can guarantee the security and safety of any information they provide, but they don’t want things to get in their way, like passwords. Rachel took us through several aspects of the situation, looked at some of the core issues, made us cringe at some of the statistics and wince at some of the examples, and offered some ways all of this might be addressed. It was an excellent preview of her longer presentation at Respond itself. The other main speaker was Russ Weakley, an Australian designer, front end developer and trainer based in Sydney who has built an international reputation not only as a CSS expert, but as someone who can make the often arcane world of stylesheets comprehensible even to beginners, while inspiring veterans to look at new ways of using CSS. On this occasion, Russ took us into the world of CSS Property Values and the syntax required to use them properly. That might sound dry – but have you ever seen a Russ Weakley talk? Dry, it was not. He’s a very funny speaker who nonetheless has an excellent grasp of his subject, and that special knack of clarifying things that often look dauntingly complicated. He even came up with a code puzzle for us to solve, with the winners taking home copies of the excellent Offscreen magazine. Both speakers received a very warm reception from a knowledgeable crowd. The post-talk questions and answers were informed and technical, which helped to give the whole evening a comfortably techy feel. As with most meetups, there were short announcements of local projects, opportunities, events and jobs, then a lot of chat until the food and drinks ran out. A top night out. In Melbourne, a similar event took place the day after the conference, in the form of a mega meetup between the MelbCSS, MelbJS and BeResponsive groups. That time, Jen Simmons and Ryan Seddon spoke to another packed audience. Wherever you are, whatever your specialties, it’s definitely worth searching out meetups in your area that focus on your interests - especially when they’re sponsored by Web Directions, and even more especially when it’s conference time.  " ["post_title"]=> string(30) "Idea of the Week: Ricky Onsman" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(22) "idea-week-ricky-onsman" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-24 22:45:05" ["post_modified_gmt"]=> string(19) "2016-07-24 12:45:05" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6441" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [1]=> object(WP_Post)#236 (25) { ["ID"]=> int(6435) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-25 10:30:46" ["post_date_gmt"]=> string(19) "2016-07-25 00:30:46" ["post_content"]=> string(7288) "Yoav WeissThe Code conference is upon us this week! Monday Profile is again with one of our international speakers, Yoav Weiss. Yoav is a Web performance and browser internals specialist, whose talk at Code focuses on third party content on websites, mitigating its impact on performance and security, and its longer term implications. This interview is also in the second issue of our Scroll Magazine. Q What made you decide you could do this for a living? A I grew up in Israel where software development is the major industry. So, before I started higher education, I decided to work for a while to save up some money that would help me get myself through school. With software being the major (if not only) non-minimum-wage option, I started working as a software tester, picked up programming while doing that, and moved to software development a few weeks later. I found it to be extremely fun and creative and I loved the problem solving part of it. Before I knew it, I was deep in the trenches in a software engineer position. Took me few more years to actually take some time off in order to go to school and complete a Computer Science B.Sc. Q Have you ever coded live on stage, or in front of an audience? How did it go? A No, I have not. I don't think that my typing skills are up for the task. If I had to demonstrate code on stage, I'd probably use a pre-recorded video. Q How do you further develop and extend your skills? Books, courses? Noodling by yourself? A I read professional books from time to time, but most of my reading is done online. A large chunk of my work day (and evenings) is dedicated to reading the latest blog posts, standards discussions and specification changes. Whenever I encounter a new subject that I need to study, I usually tackle it with a mix of tutorial reading and playing around with it in practice. Q Is it better to learn HTML then CSS then JavaScript, or JavaScript then HTML then CSS, or all three at once, or something else? A HTML is the foundation upon which the web is built, and it's certainly not advised to reimplement basic HTML functionality in JavaScript. So, if your job is to build Web pages, you probably want to learn the foundations first, starting from HTML, then CSS and then JavaScript. That way you can be sure that you're tackling the problems you encounter with the right tools for the job, creating page components with HTML, styling them with CSS and adding functionality on top of that using JavaScript. Q What's the best way to get more women coding? A I think the real question is how do we avoid discouraging the women and other under-represented groups about to enter the field from feeling marginalized and unwelcome. To me, the key is to create welcoming and "noob-friendly" environments. Many projects use the "meritocracy" narrative in order to justify shitty behaviour to people new to the project, or to people in general. That behaviour is particularly hostile to women and other under-represented groups, but at the end of the day, it's bad for everyone. No-one likes to have to take verbal abuse as part of their work, and certainly not as part of their off-hours open source participation. I believe that a code of conduct with clear rules regarding unacceptable behaviour and strict enforcement of those rules helps everyone, enables everyone to express themselves, and encourages new people of all kinds to participate. Q Frameworks. What's your take? Are they good, bad or does it depend on how you use them? A Frameworks help speed up development and have certain UX advantages, but they often do that at the expense of our users. Our users often have to run more code on their machines than necessary, which can be taxing for both loading and runtime performance. Especially today, when more and more of our users are on mobile devices, the performance price of frameworks must be taken into account when deciding to use them. At the same time, the wide use and popularity of frameworks indicates that there's a need for the abstraction they provide. As someone working on browsers and the Web platform, I give a lot of thought to that subject. I'm hoping that one day we can figure out a way to provide the UX and development ease of frameworks as part of the platform itself. Q Tabs or spaces? A Vim. Q What's on your horizon? A I plan to continue working on browsers and their performance-related features, at least until I feel that loading performance is no longer an issue. I don't think that will happen anytime soon :) Another issue that's close to my heart is getting more people involved in Web standards and browser work, which is why I took on co-chairing the Web Platform Incubation Community Group (or WICG for short). So I intend to continue to do what I can in order to make "getting involved" as painless a process as possible.
Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our Scroll magazine.
" ["post_title"]=> string(26) "Monday Profile: Yoav Weiss" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(25) "monday-profile-yoav-weiss" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-24 22:16:36" ["post_modified_gmt"]=> string(19) "2016-07-24 12:16:36" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6435" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [2]=> object(WP_Post)#235 (25) { ["ID"]=> int(6433) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-22 09:57:04" ["post_date_gmt"]=> string(19) "2016-07-21 23:57:04" ["post_content"]=> string(2682) "At Respond this year, Jen Simmons gave a very well received session on the current state of CSS layout. A great deal is now possible that never has been before with flexbox, and even more is in the pipeline with Grid layouts. We finally have the tools necessary to create amazing page designs on the web. Now we can art direct our layouts, leveraging the power and tradition of graphic design. In this eye-opening talk, Jen explores concrete examples of an incredible range of new possibilities. She walks through a step-by-step design process for figuring out how to create a layout as unique as your content. You’ll learn how Flexbox, Grid, Shapes, Multicolumn, Viewport Units, and more can be combined together to revolutionize how you approach the page — any page.

Get more like this delivered weekly

Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our brand new magazine, Scroll.
" ["post_title"]=> string(62) "Video of the Week–Jen Simmons: Real Art Direction on the Web" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(45) "video-week-jen-simmons-real-art-direction-web" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-21 16:40:51" ["post_modified_gmt"]=> string(19) "2016-07-21 06:40:51" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6433" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [3]=> object(WP_Post)#234 (25) { ["ID"]=> int(6430) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-21 15:23:53" ["post_date_gmt"]=> string(19) "2016-07-21 05:23:53" ["post_content"]=> string(33001) "With this conversation with Rachel Simpson we reach the end of the first round of conversations we recorded around our Respond Conference. If you've missed my other conversations to date, why not take a bit of time to listen to conversations with Rachel and I spoke about security, and how this is as much a design problem as an engineering problem. If you in any way connect with any information about your users, I heartily recommend this chat. If reading's more your thing, there's a full transcript below of the covnersation. If you'd like to know more about Rachel, we profiled her in the Respond conference Wrap, a free download, and also online recently as well.

Part I

Part II

Part III

Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our brand new magazine, Scroll.

Full Transcript

John
So Rachel, one of my favorite words in English is actually an ancient Hebrew word and it's the word shiboleth. And you were saying it's not an idea that you'd actually heard of.
Rachel
I have heard of it before but it's a fantastic story.
John
Right, so, thank you. So, it's in the Bible and there are a lot of great stories in the Bible, it turns out. Even atheists like myself can actually kind of appreciate and get a lot of value from the Bible. So there's shiboleth or if you're a fan of the West Wing there's a whole episode about shiboleth so you might be familiar with that. So, it's a word that's still in common usage but it's quite obscure. And the idea was this, that in probably any exposure to the Bible you probably know you had the tribes of Israel and their mortal enemies the Philistines. So, you had David and Goliath and Goliath was a Philistine and we even get the term philistine obviously from the Philistines. But they're in constant conflict. And there's a story around how these Israelites use the word shiboleth to recognize one of their own in the dark. I guess what we would call a watchword. That's probably a more contemporary English word for that. Again what's the watchword is the word that you say. It's like a password. To me it seems like one of the really earliest examples of a password. And you have a particular interest in passwords by way of an interest in identity and authentication. We'll probably come back to passwords and whether they're good or otherwise in a minute. But to start with, you're a user researcher and a UX designer, but you've got a particular interest in identity and authentication. How did that come about?
Rachel
Yeah, I mean, so my background's in user experience and I care a lot about making things that are important easier to use. And I think that the story of how I became most interested in passwords, I think the background was there. We talk a lot about passwords and security, in general, on Chrome and thinking about--
John
So you're the Chrome user experience team.
Rachel
I'm on the Chrome UX team, so obviously I have an interest in various systems that people use, platforms for communication, all those kind of things. So, all of that interest I think led up to a somewhat heated discussion with Guy, Guy Pajarnis. We talked about Guy. We both were speaking at a conference. We were sitting together in a speakers' room and got to talking. And somehow managed to get into this heated discussion about, sort of, this tension between security and usability. So, Guy has a very technical background. My background is in actually in industrial design, then user experience design. So, after we had this argument, then we realized that we should create this presentation. We talk about, sort of, how to make these systems work better for users. And thinking about in a lot of detail why people behave the certain ways that they do. How can designers and engineers work better together to kind of bring about change in this existing system?
John
For a long time, I guess, we've thought about security as being an engineering problem.
Rachel
Exactly.
John
And I think going back before computer systems, we have technologies like keys which we use to secure our cars, which are the most expensive thing we own other than possibly our houses which we secure with keys. And the key technology is like thousands of years old. We've more or less solved that engineering problem in one sense a long time ago. But we, as I said, we think of that as an engineering problem. And engineers think well we can solve this. And engineers think well the users are the weakest link.
Rachel
Exactly, yes.
John
It's very much an engineering response. If only those users had perfect memories and chose unique, random one-time passwords,
Rachel
If they followed the rules, yes.
John
Then there would be no problem here in any way with security, but that isn't really the case. So, first and foremost, I guess, in a browser like Chrome, where are the really big security touch points, or where are the big, where are the things that you guys worry most about when it comes to security and identity?
Rachel
Well, I think it's the answer to that problem is challenging because Chrome is different, in that. It's not really a product, it's a platform. So, not only do we have to think about the security of the pages themselves, you know, thinking about http vs. https and these kinds of details around the platform for developers, but we also, I mean not directly, but it's important to consider the security of the products on our platform. And that's something--
John
But you've got identity built into the browser now. You can choose your persona and that then flows into Google products and potentially other products as well that kind of can hawk into that. So, all the way out to the wrapper around the whole experience, you've got identity and security kind of built in.
Rachel
Embedded into the whole system. Yeah, absolutely, I think and this is something that its not just a question of how do we behave in Chrome, but how do we behave across Google, so a sort of complexity associated with where your account is connected to Chrome.
John
I always find it interesting that I get a phone call from my bank or my credit card provider and they'll say, "Hey, this is X from credit card provider Y. "I just wanna ask you security questions, right."
Rachel
It's so distressing.
John
So the training is to do. It's astonishing. I had a close relative who is a very intelligent woman and a little bit older than us but who's been literally was walked through the process of getting the two-factoral authentication codes and giving them to that third party because she'd been so well-trained to basically identify herself to our banks. So, it's not only when I ring my bank, it's actually when they ring me. So it seems like we've really got these horrendously broken security systems, and privacy systems because I think they do go hand in hand. So, what are some lessons that you've learned maybe about, I'll step back just a bit. One of my themes and the people I've been talking to over the last couple of days has been what I call jet pack futurism. And the idea behind jet pack futurism, is we often have this vision of the future that is wedded in the past and is never revisited. So when you think about the future, it's probably through the prism of what we thought of what the future was like 20, 30, 40 years ago. We watched it as we grew up on Saturday morning cartoons or we watched it in the movies. And it became our sense, the default sense of what the future was gonna be, right? And then we complain that we never got jet packs and flying cars and we don't observe that well, in fact, we weren't promised them anyway, but what we did get is the globally connected network which was all free. So, I guess, you know, I kind of have this interesting sort of what some people will call retro futurism. In terms of technologies and solutions around privacy and security, are there these kind of classic futuristic all, when only we get retinal scanning or, by way of example, then the world will have solved these problems. Are there some classic sort of jet pack futuristic security features that people come to you with, people think about? Is there a whole lore of that in the world of security and authentication? I'm not thinking about those classic retinal scanners and, of course, we've now got them on our phones, with our thumb print scanners. Is there a whole list of stuff like that that always and you're like, "Oh would you stop with the retinal scan."
Rachel
No, I mean, I think, I had an example I've just forgotten, but so I think yeah, of course, I think as soon as you start thinking about security more in depth it becomes impossible to think about these futuristic solutions because there's always a flaw. You know, the solution of the solution, number 42 for security is, I don't think it exists. And I think the reason for that is that people are part of that system. I wanted to go back to that example you were talking about your sort of older relative and how she's been trained to give security indicators over the phone to her bank, for example. Unfortunately, because of human behavior, because people can't remember things or because of the complexity of these systems that we've imposed upon them, we can no longer expect them to behave in secure ways. So, when your bank calls your relative and says, "Hi, Mrs. So-and-so, "we'd like to have this security information from you." She might say, "Well, I don't have it with me right now. "Maybe you can ask me a different question." So there's, sort of, built-in forgiveness that we've created in these systems because it's necessary that also makes them vulnerable.
John
The challenge is we've the cat's kind of out of the bag, the genie's out of that bottle, right. We've trained a generation of people that the bank's gonna ring us and ask us to identify ourselves and we're gonna use these factors about ourselves to identify ourselves. My feeling is perhaps the best option is for banks to actually not ring anyone anymore. But the problem is that for probably another generation, even if banks blanket advertise the fact that they're never gonna ring you again, it will probably continue to work.
Rachel
Absolutely.
John
Because Nigerian scams seem to work. People get scammed more than once in Nigerian scams, right. Having lost all their money to a Nigerian prince, it happens again, right.
Rachel
There's actually a story about that in my talk.
John
Oh, okay.
Rachel
It's the story, oh no I've forgotten his name, that's so embarrassing, a friend of Guy's and he's an incredibly technically-savvy person and he, himself, was taken by a phishing scam, not a Nigerian email, one of these, sort of, Nigerian prince scams, but a really sophisticated phishing scam. Phishing scams are super interesting because I think one of the hardest, if not the hardest security, common security problem that I think to solve because it's getting so much easier and so much, so much easier for people running these scams to make them look realistic.
John
So these generally use email as their attack vectors?
Rachel
There's a variety of vectors I would say, and I should add the caveat that I'm by no means a security expert. But, what I think is interesting is that it can be anything when you picture one of these emails, it's one of these ridiculously worded with poor grammar, and poor English all of this kind of thing, and it's quite easy for most people to spot. But you also have to think about phishing scams which arrive via the browser. For example, and I think this is one of the, it's an interesting problem because, the only way really, in many cases, to tell this is a phishing scam is via the url.
John
Right, and browsers increasingly are hiding those urls from us.
Rachel
In a lot of places.
John
I'm not necessarily saying Chrome is but certainly other browsers.
Rachel
No, no, no it's something that, I think, many browsers are doing right now and it, not just browsers, but thinking about entry points to the browser, to the internet via mobile apps, for example.
John
Right, because a lot of which are essentially http applications, but we don't even know whether they're doing with a tail s or they're not doing with a tail s.
Rachel
It's not clear. It's not easy to for you to check.
John
Right.
Rachel
I think that this is one of the biggest problems that we're gonna have to face on mobile is, sort of, the increasing desire to make things feel seamless and the problem that people have difficulty understanding the url and how to work with, how to navigate via url and the browser.
John
So, Chrome itself, as other browsers do, potentially, is they bring out, draw our attention to whether something is of a tail s, by giving us, and, in fact, now we're getting to the point where there's a strong advocacy for the idea that maybe everything should be of a tail s? Which I have come round to actually, over the, partly because it's become so much easier to do.
Rachel
Controversial, yes.
John
But personally I resisted that for a long time. But now I kinda, particularly given some of the features we're now being able to play with in the browser as a developer, whether it's the service worker, maybe geolocation from the get-go, the things that expose a lot of potential, kind of, doubt, or about, what tactics is on our users.
Rachel
Very true.
John
You know, maybe we should never have let them be open slather in them anyway.
Rachel
That's why, I guess, moving to everything over to tail s is one potential approach to this. And it feels like that's probably where we're headed. (Mumbles) flagged the idea that they're gonna deprecate non-tail s traffic at some point. And it feels less controversial now than when they announced that, perhaps, 12 months ago. So, what are some of the other things you've found can kind of help whether it's about, is it about drawing the users attention to potential insecurities? Is it flagging communications that may seem spurious? What are the sorts of things that you've found are really important to potentially do and give you good return on that investment?
John
So, I think that, just to try to generalize it as well, I think that, I mean, the big part of it for me is trying to better understand people's behavior. I mean, why do they do these crazy things that they do? You know when you talk to developers,
Rachel
They write their password down or they stick it on a sticky note by their bank.
John
Why do they do that? So understanding the factors that affect the way that people behave so you can think about how these systems could be better designed as you approach them. So, I think one example is to think about focus. So, a great example of this is thinking about the moment when people, we need people's attention. Because right now a lot of security, or I'm thinking specifically maybe about the, I have picture in my head, the security indicator in the, the address bar in Chrome. I'm trying not to use jargon. The security indicator in Chrome.
Rachel
Hopefully our audience is reasonably sort of savvy.
John
Okay so it's not.
Rachel
Right.
John
Okay. This piece is interesting because it's shown consistently and it changes depending on the security of the page. And I think this is great. It's already starting to, kind of, call it out. Maybe something that might even improve situations like this where sometimes it's not secure and we need your attention, we'll be able to call out, call it out with motion. To show the user that something has changed. And even better to explain to the user what the implications are for them. Because in many cases, the security implications are not clear. So, we might be saying, "Red alert, this is not safe for you." But what we mean is, "Is this a banking page? "If this is the banking page, "probably you shouldn't type in your information." Or, "Is this a page where you have to put in your password? "Maybe don't put your password in here." I think being really specific and clear about what this means to the user, without using jargon, or without being too obtuse, I think, is really important. Some of the other things I think are really important in (mumbles) the passwords, for example, is to think about human memory. That it's a limited resource and that it's not as effective over time and with randomness. So, passwords, I think, one of the biggest flaws are, among many other things is that we ask people to remember passwords. In fact, we ask people to remember passwords, there's a great study, the Dashlane study, they had a product which scanned the inboxes of their clients and found out that on average people in the U.S. have about 130 accounts per email address. And so, if they were following security protocol to the letter, they would have different passwords for each of those accounts. And we expect them to use random passwords rather than meaningful ones. So, at every step of the way, we've violated the basic principles of how people's brains work, and maybe we shouldn't do that.
John
So I guess one of the approaches that people who, like myself who feel they're doing the right thing, there is to have passwords generated either by a browser which then looks after them, or by password manager, all locked up behind a single, or hopefully, very, very strong password that once someone breaks then they've got all our passwords to everything nicely assembled. Is the problem passwords? Is that whole approach simply, I guess the way, we don't necessarily try and endorse particular products and such, but Apple certainly have increasingly seem to be wanting to use biometric things like particularly fingerprints to be associated with your Apple Pay accounts. Are these inherently better solutions?
Rachel
It's such a complex question. So, I've talked about passwords, about biometric data before with some of the engineers looking for different solutions. I think I should state, probably, that fingerprints and other biometric stuff is not as, also not secure, that it can also be broken. That every existing security system can be broken which brings us to two-factor authentication, of course. And I think that that's sort of the expected standard that products should keep to.
John
So you think, pretty much, anybody who asks, if I created an account whether it's with my email provider, whether it's my bank, all the way through to Disqus, or somebody, anywhere I create, is there a barrier to entry, or pretty much, you create an account somewhere and it revolves tying, using a password together, it should be two-fa? Is that your feeling? Who gets away with not having to worry about this? Or do you think, really, you're building something like that and you're serious about it, you should be doing two-factor?
Rachel
I think it's a good question and I think that the answer isn't everyone has to have two-factor authentication. I think that more I'm, kind of, advocating good decision-making and, at the same time, I think that there is a new, interesting example that I called out in the talk. And I think it's Medium. They've done something very interesting where they've connected their, I think they're still doing this, they've connected the Medium account to your email account. So one way for you to sign in is to go to Medium, put in your email address and hit sign in. And then it sends you a link to your email address. And then you click on that and you're signed in.
John
I think Slack do something similar, don't they?
Rachel
Yeah, I think so. And so it's an interesting example because it basically says, "We think your that Gmail account or your email account," I think they only use Gmail, I'm not sure, maybe I'm wrong. But they think that your email account is secure.
John
Right and that sort of pushed the whole problem on your email provider, right?
Rachel
Exactly and in this case, if it is a Gmail account, then it's already enabled for two-factor authentication which is great. So, I guess it's a question of, gee I wish I had a good answer for this. It's a complex problem.
John
I mean is there an opportunity, we've seen (mumbles) in the business of, of providing authentication services, I mean, at the moment they seem to be centering on your social media, sign in with Twitter, sign in with Google, sign in with Gmail, so on and with Facebook these seem to be. I guess the challenge around the commercial provision of these services is, where's the money, where's the business model around it. But we certainly are seeing a number of those sorts of plays.
Rachel
Well the thing that I think is quite interesting is, or the thing that I know nothing about, but I'm completely intrigued by is that I believe the Estonian government also they have a lot of digital services that they've spun up.
John
They do, they kinda positioned themselves very much as the world's leading digital government.
Rachel
Exactly, and I think that that's interesting because what it led to in this case is that you have a government I.D. which is a digital identifier. And people have little card scanners and they scan a card to identify themselves in order to engage in sort of activities associated with their identity. And I think this is quite interesting because it, I mean, first, it points to a huge shift and it points to us, as designers and engineers kinda becoming these gatekeepers to these digital spaces. And that sort of shows the importance and the impact of this work, but at the same time I think it's also interesting because it means that everybody is gonna be online. And so the more people come online, the harder it is to say, "Oh well, humans are the weakest link," and the easier it becomes to say, the more it puts designers and engineers into a position of power to say, "Actually, humans aren't the weakest link." We need to have responsibility, take responsibility and do work to improve the human experience of security, otherwise, the risk is too great.
John
So, I think that the experience in the United Kingdom has gone down. It's almost the opposite of the Estonian. Instead of having a centralized, single government provision of identity, they've actually outsourced it.
Rachel
Oh, I didn't know that. That's interesting.
John
Multiple, multiple companies can provide identity services.
Rachel
Oh, very cool.
John
And I think, we had Tom Loosemore, who was kind of the deputy director of the GDS for quite some time in the U.K. come and speak at one of our conferences last year and talked a little about these. And, I think, part of the reasoning is, well, we don't have a single point of failure now.
Rachel
Which is very smart.
John
Like if we've got like 10, 15, 20 providers, one of them gets hacked, it's not like we lose all the national database of identity. We still lose a lot and I think that's maybe not a super strong argument for doing this because, the fact is, if you lose even a twentieth of the entire national identity database.
Rachel
It's a risk.
John
Yeah, seriously bad thing's gonna happen there. But it is interesting that that's the model they've taken there. Australia is actually probably three or four, five years behind GDS and Estonia in terms of their adoption. And it remains to be seen which of those two directions we take. Are we gonna have a centralized provider? Although we have had a rather poor experience with online government identity provision in Australia.
Rachel
Oh dear.
John
Both around security challenges, also around the whole thing just falling over and especially at peak times like taxation, main taxation filing times where a lot of angst and anger is generated. So, we've sort of had this our first go at it and seem to quite work. So it's kinda interesting to see what comes next. Let's perhaps finish up with some key takeaway. I mean, our audience is often people, whether decision-makers, they're engineers, they're designers, you know, in the world of the web and so on. And so many of them, whether they're in banks, or media, whatever they're doing, will have some idea of identifying and authenticating users. Rather than thinking about kind of the gold standard, up here, some future thing, which is still certainly emerging and hopefully we'll hear a bit more about from you at the conference. What are some of the really, really terrible things that people are still doing, like sending passwords in clear. What are people still doing that you think, like here are the two, three, one thing you could do right now, if you don't do anything else, just either don't do this if you're doing it, or do this, whether it's TLS, I mean, where are you around TLS? Do you think that's where people should really be heading? Would that bring a lot to the table? You still out on TLS, not quite sure?
Rachel
I'm just thinking about really what is it, the one, what is the one thing that we could do?
John
What are people doing that they shouldn't do? Don't send email, but people still send passwords in the clear, like major corporations still do that, right? So, don't do that people.
Rachel
There's too many things, there's too many things. You know, there's so many things that people do. I'm thinking more about what could designers, what could engineers do to improve the experience of their products with regards to security. To be honest, I think that the smallest change, and the most important change is about communication. It's about, if people have to create a password for your product, then are you communicating clearly what it needs to be? Very, very basic things. I think the more friction that exists around security experiences, I think the harder it is for people. I think all these problems are so complex that there isn't a single, simple solution. It's all about the details. It's a design problem and it's about creating an experience in which every step of the way people have a good understanding what they're supposed to do. But I'm thinking about a great example and I'm trying to remember whose web site it belongs to and I'm embarrassed that I cannot. I think it might be MailChimp, perhaps. They do a really great job about communicating the security of your password.
John
So, in terms of you putting in 1-1-0-0, for example, they tell you?
Rachel
Yeah, they show you with color. So is it red, or green, or yellow? And they explain to you in simple, human, understandable language like what can you do to change it to make it fit? And I think that that's fantastic.
John
I guess that doesn't solve the problem of how they're gonna remember that, right?
Rachel
Absolutely, the big part of the problem there is, there still is not a good solution for passwords. There's a fantastic XKCD comic where it says we've taught people to remember passwords that are hard for people to remember but easy for computers to break. I think that's very insightful. I'll stop just short of advising that everybody now changes their passwords to sentence long, you know, to mymonkeylikesbananas. But I think, what I love about that comic is that in a very, insightful way, looks at the problem and says, "Hey, here's what's wrong with this."
John
It literally changed all mine. I approach passwords completely different having read that comic.
Rachel
So, what I want people to do, I want designers and engineers to do, is to look at all of their systems with that eye. And say, "Is this really working for people?" And start proposing solutions and start not just addressing other designers but addressing each other, engineers and designers and then addressing product leads, addressing management with this matters. Here is how this can impact our organization, our country, negatively, and here's what we need to do to change it. Because I think it's gonna be a long fight to improve.
John
All right, thank you so much for that. I really look forward to what you've got to say tomorrow. Thanks for coming all this way and sharing some of your wisdom around making that experience of security--
Rachel
Thanks, thank you for having me.
John
You're most welcome. Thanks a lot.
Rachel
Cheers.
" ["post_title"]=> string(42) "Video: in conversation with Rachel Simpson" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(33) "video-conversation-rachel-simpson" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-21 15:23:53" ["post_modified_gmt"]=> string(19) "2016-07-21 05:23:53" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6430" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [4]=> object(WP_Post)#233 (25) { ["ID"]=> int(6429) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-20 13:09:08" ["post_date_gmt"]=> string(19) "2016-07-20 03:09:08" ["post_content"]=> string(2689) "Modals and pop-ups can be a really useful tool for displaying additional information or getting users to enter information in a way that doesn't clutter up your screen. However as yet (one coming soon) there is no official HTML element that lets us display modals in a consistent way. As a result screen readers, such as JAWS and NVDA, have a hard time reading them resulting in a lot of pop-ups not being accessible to people with disabilities. In this week's video ristretto, Rhiana Heath looks at how to make modals accessible for people who use screen readers. This uses a combination of ARIA attributes and hidden text to speak with the screen reader. As well as helping of JavaScript to help with some custom keyboard control. All while keeping a pleasing look and feel for all users using JavaScript and CSS.

Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our once-a-week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our brand new magazine, Scroll.
" ["post_title"]=> string(52) "Video Ristretto: Rhiana Heath–Pop-up Accessibility" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(15) "video-ristretto" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-20 13:09:08" ["post_modified_gmt"]=> string(19) "2016-07-20 03:09:08" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6429" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [5]=> object(WP_Post)#232 (25) { ["ID"]=> int(6420) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-19 09:45:56" ["post_date_gmt"]=> string(19) "2016-07-18 23:45:56" ["post_content"]=> string(5809) "Bruno ŠkvorcBruno Škvorc is a coder from Croatia, the editor of SitePoint’s PHP channel and a developer evangelist for Diffbot.com. He also has a keen interest in developers' health, including his own, and has set up an initiative for web professionals to pay a bit more attention to their physical well-being. The Walking Dev is the subject of Bruno's article in our upcoming Scroll: Code magazine and is our Idea of the Week.

The Walking Dev

As a developer, how much attention do you pay to your health? Do you spend your days fantasizing about taking up running "tomorrow"? I did. For the longest time. Until a few years back, I found myself looking like this. Bruno I was a senior developer working a sedentary job at a local company. Long hair, Black Label Society shirt, and 100kg - the cliché. This was almost immediately before I decided to quit and go freelancing full time. Concerned for my health, I set up a treadmill desk (just a plank over the handles, really), and started slow, gradually increasing the incline, speed, and distance. A few months later, the weight had melted away: Bruno Now? Well, it's been a while since that level of fitness. Due to a lot of moving (three cities in one year) and a lot of stress, I couldn't keep up my treadmill routine - I'm now somewhere in between these two stages again, and growing concerned. Here's a recent photo from OSCAL. Bruno You might be wondering why I don't just work standing up, or eat less - and those are valid and interesting discussions for another time (the answers, however, being "standing desks are far unhealthier for your back than sitting, and I'll be out with proof soon" and "it's not just about the calories", respectively). But at this point, I'm just focused on getting healthy again - and I'd like your help, while helping you do the same. To get there, I've launched "The Walking Dev". The Walking Dev The Walking Dev is an online hub of resources, articles and testimonials aimed at improving the health levels of developers' lifestyles. The name comes from my own approach of (originally) using nothing but walking to shed the excess weight, but it's by no means exclusive to treadmill desk enthusiasts. The site's forum is where all the discussion around fitness happens: meet your fellow devs, brag with before / after photos, ask for advice, find inspiration, compete with others in tracked miles or minutes of activity - anything goes, within reason. The most popular posts from the forum will appear in The Magazine area - alongside other more formal articles from influentials, in depth guides, studies, news, and more. Think of the magazine area as something like SitePoint.com, but on a much smaller scale - many categories of many posts, specifically written for the purpose of exclusively appearing on The Walking Dev. This area will also contain videos, screencasts, exercise guides, and more to help you get off that chair and into the squat rack or onto the treadmill. Furthermore, inspired by the versatile Hero Panel, every user will have their own personal profile area with progress reports - from habit forming charts to Typify-inspired widgets, all customizable and embeddable in other locations. The dashboard will also provide a subscription mechanism intended to notify you when you fall off the wagon, forget to track a habit, or anything else you'd like it to remind you of. On the principle that a little competition is a healthy thing, we’re building in leaderboards, similar to the monthly challenges that fitness tracking apps like Strava or Endomondo have. It's important to note that the emphasis here will be on friendly competition and sharing of experiences rather than "being the best" - so while there will be prizes, the competitions themselves won't be cut-throat. Embedding leaderboard status in forum signatures, tweeting it, embedding it on personal blogs, chart views, comparisons … the point is we build these fantastic apps that can help people get and stay healthy while we let ourselves get unhealthy. Let’s use our skills to help ourselves. Wherever you are, whatever your job title or description, come and join The Walking Dev. The Walking Dev @bitfalls" ["post_title"]=> string(31) "Idea of the Week: Bruno Škvorc" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(22) "idea-week-bruno-skvorc" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-19 11:17:25" ["post_modified_gmt"]=> string(19) "2016-07-19 01:17:25" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6420" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [6]=> object(WP_Post)#231 (25) { ["ID"]=> int(6419) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-18 12:19:57" ["post_date_gmt"]=> string(19) "2016-07-18 02:19:57" ["post_content"]=> string(9378) "Rachel AndrewMonday Profile today again shares an interview we conducted with a Code conference speaker. You'll find all these interviews (and a lot more!) in the second issue of our Scroll Magazine. This week, it's with Rachel Andrew, whose talk and workshop on CSS Grid Layouts should be a conference highlight.

Rachel Andrew: In Person

Q What made you decide you could do this for a living? A Despite being the daughter of a programmer, I had no intention of working with computers. I trained in dance and music theatre and I was convinced that my future lay in the theatre somewhere. Life had different ideas and I began building websites when pregnant with my daughter in late 1996. By the time she was three years old I was proficient enough to be offered a job in a dot com company. I’m curious about how things work and not afraid to play, experiment and get things wrong. That, coupled with an ability for unpicking complex problems, has made up for my lack of formal training in computer science - though I sometimes find myself searching for the definition of something that everyone else seems to know already! The web is a great place to work for the polymath. Most of us aren’t sitting in cubicles working on small parts of systems - we get to build large chunks, sometimes even entire experiences. I love that there is always something new to learn and it might be in a completely different area to the last thing I studied. Q Have you ever coded live on stage, or in front of an audience? How did it go? A I’m not a fan of live coding in presentations, unless the presenter is truly exceptional at it. There are a few people who really have this skill, however much live coding results in fumbling through examples - often with the audience yelling out corrections to the presenter’s typos! In presentations of an hour or less I prefer to have my code on slides, that I can then talk about. I often link to fully worked examples for the audience to take a look at later. This approach lets me craft a talk of the right length that hits the things I want to share with the audience. In my day-long workshops I do live code, however I begin with a set of starting point files on CodePen, and we work together to build out the examples. I try to keep the typing to the minimum required to show the techniques - partly to focus on what we are learning but partly for self-preservation. Three years ago I shattered my elbow and have about 30% use of my dominant hand. Typing all day is pretty difficult for me, so I try and keep the examples streamlined. Q How do you further develop and extend your skills? Books, courses? Noodling by yourself? A I attend a lot of conferences, I enjoy seeing talks that are on areas I don’t do so much myself. I’m a developer, so it is interesting to sit in on a design talk; I’m not someone who uses JavaScript frameworks such as React, so it is interesting to sit in on a React or Angular talk. I find different approaches make me think about the things I do in a different way. In terms of CSS, I mostly learn by reading the specifications and building examples. Even where no browser implementation exists, I’ll usually build examples just to clarify how it is supposed to work in my own mind. That is where a lot of my work on CSS Grid started - I was building examples of something that didn’t yet exist in any browser and then as implementations appeared I could see if what I thought was the case, actually worked! Q Is it better to learn HTML then CSS then JavaScript, or JavaScript then HTML then CSS, or all three at once, or something else? A HTML and CSS, then JavaScript. You need to understand the DOM and the presentation layer that is CSS before you start using JavaScript to manipulate it. In addition, there is so much now that is part of CSS that traditionally we would have had to use JavaScript for - it is worth making sure that you aren’t using JavaScript for something we have a perfectly useful CSS property for. Q What's the best way to get more women coding? A I’m not sure I have a good answer to that, however I mentioned that my father is a programmer. He was a programmer all through my childhood and worked at Newcastle University in the UK. We would sometimes go visit him at the computing lab, and there I took away the impression that programmers were mostly women. It was women I spoke to, sat amongst the giant whirring computers. It never occurred to me that this wasn’t a job for someone like me. I think having role models who represent the different reasons why people get into this field has to be a positive thing. Some people are genuinely interested in code, in and of itself. Others are perhaps more interested in running a business, creating products - and writing code is just the route to being able to do that. For young people to see that is I think important, and as important for young men as well as young women. Q Frameworks. What's your take? Are they good, bad or does it depend on how you use them? A It absolutely depends on how you use them, that is the same for any tool. I would encourage anyone who wants to work as a professional in this business to learn HTML and CSS, understand the basics of Accessibility, and also learn a solid amount of vanilla JavaScript. The reason being that these languages and principles are pretty timeless. They will outlast your understanding of the framework of the moment, and they will enable you to make good decisions about frameworks rather than being swayed by what everyone on Twitter is saying. From that point, you need to look at the business requirements for the thing you are building. How much time have you available? What are the upsides of using a framework, what are the downsides? Does one outweigh the other? You can usually fairly easily make those decisions, and then be in a good position to address any potential downsides with your choice. My real concern with frameworks is that a complete reliance on tools and frameworks is creating abstractions to the extent that people are unable to engage with the underlying languages. This means they struggle to debug issues, as they don’t understand how to create a reduced test case without the involvement of the tool. It also means that they don’t butt up against places where our core specifications are lacking. I’d love for more people to be looking at the CSS specs for example and asking “why can’t we do x?” If folk are always working with an abstraction they are less likely to do that, instead just working with what their favourite tool gives them. Q Tabs or spaces? A I really don’t care. Be consistent with the rest of your team. There are better things to worry about. Q What's on your horizon? A A lot of travel! I’m speaking at several conferences about Grid Layout and related CSS specifications. We’ve also got a bunch of exciting things planned for my CMS product Perch and Perch Runway. Lots to do - but I like it that way!
Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our Scroll magazine.
" ["post_title"]=> string(29) "Monday Profile: Rachel Andrew" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(28) "monday-profile-rachel-andrew" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-18 12:19:57" ["post_modified_gmt"]=> string(19) "2016-07-18 02:19:57" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6419" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [7]=> object(WP_Post)#230 (25) { ["ID"]=> int(6418) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-15 11:02:13" ["post_date_gmt"]=> string(19) "2016-07-15 01:02:13" ["post_content"]=> string(2856) "You’ve done what you need to do to create a functioning, responsive, good-looking site that works blazingly fast in your development environment. How sure are you, however, that it performs well for your users? Does it render quickly? Does it respond well to user input? Where are the bottlenecks of your site? More importantly, can you increase both the perceived and actual speed of your site? In this presentation from Web Directions 2015, Kitt Hodsden takes a deep dive into tools for checking site speed and improving site performance. She reviews the available tools for cross-platform, multi-device front-end performance testing, find bottlenecks, simulate our users’ experiences on our site, then automate those checks using Grunt and good old-fashioned shell scripting. In the end, you'll be able to see how our site changes have affected our site performance, and what steps we can take to increase perceived and actual site speed.

Get more like this delivered weekly

Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our brand new magazine, Scroll.
" ["post_title"]=> string(69) "Video of the Week: Kitt Hodsden–Automation for Developer Happiness" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(54) "video-week-kitt-hodsden-automation-developer-happiness" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-15 11:02:13" ["post_modified_gmt"]=> string(19) "2016-07-15 01:02:13" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6418" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [8]=> object(WP_Post)#229 (25) { ["ID"]=> int(6417) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-14 15:54:26" ["post_date_gmt"]=> string(19) "2016-07-14 05:54:26" ["post_content"]=> string(2842) "For some years now, mostly out of sight, a set of inter-related Web technologies have been brewing away. Technologies that address the sort of shortcomings the Web has been considered to have in comparison with native technologies–the ability to integrate more seamlessly with the user's device and operating system, the ability to work offline, and to hook into the device's native notifications system. And for years we've been covering these technologies at our events. We've showcased perhaps the most important of them, Service Worker a number of times (as we will be again this year at Code), and we'll also be focussing on Web Manifests. But another key feature of what's now become known as Progessive Web Apps is Web Notifications, which Wawrick Cox covered in detail in last year's final-ever Web Directions engineering track.

Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our once-a-week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our brand new magazine, Scroll.
" ["post_title"]=> string(48) "Video Ristretto: Warwick Cox–Web Notifications" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(45) "video-ristretto-warwick-cox-web-notifications" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-14 15:54:26" ["post_modified_gmt"]=> string(19) "2016-07-14 05:54:26" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6417" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [9]=> object(WP_Post)#228 (25) { ["ID"]=> int(6414) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-12 09:30:16" ["post_date_gmt"]=> string(19) "2016-07-11 23:30:16" ["post_content"]=> string(5387) "Ben BuchananOur Idea of the Week this week is another excerpt from Scroll: Code. Ben Buchanan, Interface Architect at ansarada, has been as ardent a supporter of Web Directions as they come, for as long as we've been around. He wrote this article for us, describing how his Code presentation came about, partly to encourage people to get up and present.

A Talk is Born

by Ben Buchanan When I was new to conferences, I thought the superstars must do something incredible to produce their mind-blowing speeches. Perhaps they meditated in a mountain retreat to prepare; pondered the deep secrets of the web and learned from the master's wisdom - "You must feel the web around you; here, between you, me, the server, the browser, everywhere, yes." Of course, these days I know speakers aren't Jedi, they're simply normal people who were game to step on stage. The big names seem practised and polished because they are - they'll give the same speech at several events and refine it every time. Most still get nervous before speaking. There are many reasons someone might do a conference presentation. One that seems common is they'd been holding forth on a topic at the pub when someone suggested they should do a talk about it. I've seen many people give great talks because they were passionate about the topic, but also supported by the people around them. Often, people just need a nudge. My talk at Code16 started as a running joke shared with friends at a meetup. Whenever version numbers or dependency management were mentioned, we'd grumble about bad versioning and I'd joke I should get up and rant about it some day. We'd debate the merits of SemVer and SlimVer, or laugh at the brilliance of Drone-Ver. Yes, there is version number humour ... Gil actually created a working implementation of Drone-Ver! I held back from actually doing a talk because I wasn't sure people really wanted to hear it. Even at a tech meetup, there are limits! Also, I thought it might be too simple - "if I know it, surely everyone else knows it already ... right?" At some point Gilmore Davidson and Jed Watson decided I should put my money where my mouth was. Cue Craig Sharkie calling for off-the-cuff Thunder Talks at a SydJS meetup: Sharkie: "Does anyone have a five-minute rant?" Jed and Gil, gesturing wildly behind me: "Ben does!" Me: "Uh oh." Luckily, there was another talk before mine. I spent that five minute hurriedly writing some notes on my phone. I grabbed Sharkie's laptop and threw a hasty "slide" into the first text editor I could find: Hastily scribbeled slide   I don't remember a heck of a lot about what I said, but it seemed to go over well and Jed's quotes on Twitter got a few likes. Nice tweet   It was fun, it was chaotic, it was cathartic. I'd wanted to get it off my chest for a long time! I didn't think much more about it until I attended a speaker training night at Web Directions HQ. To prepare for the workshop, we needed to prepare a short talk "on any topic". While most people did a teaser of a talk they were submitting for Web Directions, the idea I was pitching didn't compress very well. I decided to do a more polished version of the SemVer talk, as I already knew it could fit into five minutes. Doing the talk again let me think about the topic properly, in terms of structure and presentation. The training gave me some great feedback about how I presented it. The different audience made me think of some new perspectives on the topic.
  • Do I put in a bit about versioning PSD files?
  • How do people judge a mobile phone OS update - do they understand the numbers?
  • The "API contract", version zero, version one.
  • "Hauptversionsnummernerhöhungsangst" (Noun): Fear of increasing the major version number
I had to cut things back out to make sure it was still short enough. After the speaker training, John suggested a longer version of the SemVer talk would be good for Code. I still wanted to do the talk and had lots of ideas for expanding it, but it was still pretty scary to see my name announced in the lineup! The talk isn't finished yet (when Ben submitted this article, it was six weeks before the conference - editor’s note). I know I'll throw it all out and rewrite it at least once more before the day. I'll have moments where it seems like a disaster and I'll wonder what possessed me to sign up. I'll repeatedly tell my partner the presentation isn't working. Then somehow it will come together and I'll be ready to step on stage. It’s possible there are speakers out there who have a better system, but I have a sneaking suspicion this is more or less how everyone’s presentations are created.  " ["post_title"]=> string(30) "Idea of the Week: Ben Buchanan" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(22) "idea-week-ben-buchanan" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-11 22:59:38" ["post_modified_gmt"]=> string(19) "2016-07-11 12:59:38" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6414" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [10]=> object(WP_Post)#227 (25) { ["ID"]=> int(6412) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-11 11:51:33" ["post_date_gmt"]=> string(19) "2016-07-11 01:51:33" ["post_content"]=> string(7996) "Tim KadlecIt's only a few weeks until this year's Code conference, so Monday Profile is going to start sharing some of the interviews with our presenters you'll see in our Scroll: Code magazine. We're going to start with Tim Kadlec, web technology advocate at Akamai, and someone who knows more about the intersection of performance & responsive design than probably anyone around. Tim's Code session will focus on giving users the feeling that their web experiences are fast and friction-free. Let's find out a bit about him.

Tim Kadlec: In Person

Q What made you decide you could do this for a living? A In junior high, I saw a magazine at a local store that promised to teach you HTML for maybe $6, so I bought it and read it cover to cover. I honestly wasn't that interested in web development. I liked to write, particularly about the history of basketball at that time, and wanted to be able to publish articles online. So I used the information in that magazine to build a very basic site full of all sorts of obnoxious animated GIFs, where I could write articles about basketball. Occasionally, I helped someone in town put together something simple as well. In college, I found an ad for an agency that was looking for an entry level web developer. At that point, it had never occurred to me that I could do this as a full-time job, but I called up and scheduled an interview. I basically faked my way through the whole thing. When they offered me the job, I ran to the book store and bought a few books: Designing with Web Standards, Meyer on CSS, DOM Scripting and one or two more. That weekend, all I did was read and code. By the time Monday came around I was at least OK enough to do the work (luckily, the agency wasn't doing anything very advanced). Before long, I was hooked. Q Have you ever coded live on stage, or in front of an audience? How did it go? A No, never. I've seen a lot of people live code, but I can count on one hand the number of people I've seen do it well. I would definitely not be one of them. I'm guessing watching me make typo after typo for 45 minutes wouldn't be particularly interesting to folks. Q How do you further develop and extend your skills? Books, courses? Noodling by yourself? A Videos, blog posts and books are certainly a part of it. I stubbornly hold onto my RSS feed and download a ton of talks to my computer to watch whenever I have a spare moment.  The reading and video watching doesn't do much if you don't practise, so firing open a browser and seeing what you can build and what you can break is important. But if I had to say one thing more than any other that helps me, it's that I am constantly bothering people smarter than myself with questions. Anytime I have an idea to bounce off someone, or run into something that doesn't make sense, I fire off an email or send a message. We have a lot of smart people in our industry who are willing to share their knowledge — it'd be silly not to take advantage of it. Q Is it better to learn HTML then CSS then JavaScript, or JavaScript then HTML then CSS, or all three at once, or something else? A I learned it that way: HTML, CSS then JavaScript. That's how I teach it to others as well. Markup is your base and everything else is layered on top of that, so to me it makes sense to teach the base first. As long as you start with the vanilla versions of each though, I think you're probably OK. Jumping into a framework right away obscures a lot of core knowledge and at the end of the day it's the core knowledge that will help you best adapt to new technologies. Q What's the best way to get more women coding? A I'm not really qualified to provide the best advice here. If you really want to know how to make our industry a more welcome space for women, ask them. Listen to what they have to say and ask for clarification on things you don't understand. There's a lot we can do to make our community a friendly, safer space and I think it starts with being willing to listen. Q Frameworks. What's your take? Are they good, bad or does it depend on how you use them? A It all depends. That's the boring answer, but it's true. I think it's incredibly important to know the core language first—CSS before Sass, JavaScript before jQuery—but there's nothing inherently bad about frameworks themselves. Abstractions can be useful, if applied with care. The problem I see with them in our industry is the number of people who blindly reach for them, applying framework after framework without realizing what they're giving up in the process. You don't always need a framework, and if you understand the core, you'll be able to tell the difference between when you don't and when you do. Q Tabs or spaces? A Tabs, but not enough to have any sort of serious debate about them. More like the kind of debate you have with friends late one night when everyone involved has had a few drinks. Q What's on your horizon? A The sun. For the web, there's plenty of stuff that has me excited: service workers (which I still don't think we've even scratched the surface of) and the physical web stuff come to mind right away. I'm interested to see how we handle the challenges of truly going global as we adjust our sites and applications for different markets, as well as the challenge of reducing our impact on the CPU. Someone smarter than me pointed out that we're increasingly becoming CPU bound in terms of performance, not network bound. It's true, and it's not necessarily something that has been true for very long. It'll be interesting to see how we adjust for that new reality that we've created with loads of images and scripts.
Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our Scroll magazine.
" ["post_title"]=> string(26) "Monday Profile: Tim Kadlec" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(25) "monday-profile-tim-kadlec" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-11 11:53:20" ["post_modified_gmt"]=> string(19) "2016-07-11 01:53:20" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6412" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [11]=> object(WP_Post)#226 (25) { ["ID"]=> int(6410) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-08 10:20:52" ["post_date_gmt"]=> string(19) "2016-07-08 00:20:52" ["post_content"]=> string(2390) "As we get closer to Code, our Front End and JavaScript focussed conference, we're digging up some of the best presentations from past conferences focussing on these topics. At Web Directions 2015, Eric Elliott talked about what he calls "the two pillars of JavaScript": Prototypal Object Orientation and Functional programming. A fantastic overview of these two key aspects of JavaScript.

Get more like this delivered weekly

Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our brand new magazine, Scroll.
" ["post_title"]=> string(62) "Video of the Week: Eric Elliot–the two pillars of JavaScript" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(45) "video-week-eric-elliot-two-pillars-javascript" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-08 10:20:52" ["post_modified_gmt"]=> string(19) "2016-07-08 00:20:52" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6410" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [12]=> object(WP_Post)#225 (25) { ["ID"]=> int(6408) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-07 15:03:06" ["post_date_gmt"]=> string(19) "2016-07-07 05:03:06" ["post_content"]=> string(78715) "Jen Simmons Jen Simmons hosts the very popular The Web Ahead podcast, is on the W3C CSS Working Group, works as a design advocate at Mozilla, and has 20 years working on sites for the likes of CERN, the W3C and Google. Her current focus is layout for the Web, in particular new layout capabilities in CSS, like Flexbox and Grid, about which she speaks and writes extensively, and about which she spoke at our recent Respond conference. While Jen was in Sydney we sat down and spoke about these new layout capabilities of the Web, how being always connected changes the way our social networks have changed, and much more. It was a long, but very enjoyable chat, and I hope you enjoy it. As always, the transcript is below, and you can find more video conversations in this recent series, including with Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our brand new magazine, Scroll.

Full Transcript

Jen
This is the first time I've been to Australia.
John
Oh that's right, your first time you've been to the hemisphere.
Jen
Yeah.
John
See, Americans have a real thing about hemispheres. They invented a whole hemisphere called The Western Hemisphere. Like, it's a big deal in America to have this Western Hemisphere, right? Whereas, it strikes me, there are two in the world. There's the one on the top and there's the one on the bottom.
Jen
Yeah, well that's what I mean. I left the Western Hemisphere, I've been to the Eastern Hemisphere, but I've never left--
John
What are these things? Who ever talks on the Eastern Hemisphere?
Jen
Well, my grandfather had a big like a very fancy certificate on the wall that he had gotten the day that he had crossed the equator for the first time.
John
Was he in the Merchant Navy or something?
Jen
He was in, yeah, he was in the US Navy.
John
If he is still with us you can ask him, but he's not still with us, there used to be terrible hazing rituals in the British Navy when people crossed, even Charles Darwin, I don't know if he diarized it in the diaries of Journey of the Beagle, but there are these, I think there were particular offerings made to some punitive god of the, you know, anyway.
Jen
I have no idea, I just know that that certificate was a point of real pride.
John
Right.
Jen
And it struck me as a little kid like, "Crossing the equator is such a big deal." So I just crossed the equator for the first time. Last night.
John
That's the first time you crossed the equator?
Jen
Yeah.
John
Many years ago I lived in the UK and I had this friend who was much older I'd met there, you know, much older, he was probably my age now but this was a long time ago, and we talked about how if you thought back to the time of Chaucer, or the periods even before the train, you know 140, 150 years before that, you know I had this thought of people leaving home walking up, we were staying in this little village doing something I can't remember quite what, and walking up the hill and looking back, perhaps for the last time in years, on their hometown as they went off to Rome for a pilgrimage or, or maybe they're walking tradesmen who, you know, when was the next time? So even when I traveled then, this is in 1990 when I first sort of traveled for some years, people didn't use the Web, it didn't exist, and people barely used the internet, we called it "internet" by the way, we didn't have the, "the" came later. But you left and you were sort of removed from your past life. You were gone. And I guess like your grandfather going in the Navy and he might have got a letter from his parents and sent a letter once every few months. Whereas now we're always connected. And you know, you got off your plane awaiting, you know, emails and Twitter feeds and whatever.
Jen
Yeah, I'm texting with my neighbor to see how my dog is.
John
And now on the plane, you probably had wifi, and you weren't even connnected, you weren't even disconnected while you're on the plane now.
Jen
Yeah, I didn't turn it on.
John
We're connected everywhere.
Jen
Yeah.
John
In a very short period of time we've gone from this idea that, for almost all of human history we would be disconnected from our networks for long periods of time. And we would therefore forge new ones. And now we're never disconnected. I wonder what the long-term implications of that might be?
Jen
I dunno, it's a radical change in the way that what it means to be a human being, and what it means to have relationships with other people. I don't think we've really let that sink in. I think it's changed very drastically in the last, even in the last 10 years. The difference between having Twitter and not having Twitter. Using RSS or going to peoples' blogs manually verus just opening up Twitter every morning or every afternoon.
John
It's almost like a push medium now.
Jen
Just this constant stream, constant stream, of just thousands of pieces of information. I don't think we've caught up to that at all, I think it's impacted our lives in very drastic ways and we don't know what that is yet.
John
Yeah. I mean, we often worry about or are concerned with implications for business models and you know, traditional media that has been pivotal to our lives from 150 years, kinda doesn't even know how to make money anymore in the life for this, but you know, in the context of having this sorta always-on always-connected world. But I think you're right in observing that it actually changes about being human, which is far more important than business models and media companies, right?
Jen
Yeah, yeah.
John
You know the whole Dunbar number, if we really only really have the capacity as a human to really remember 250 or so strong connections with people. In the past, those connections would come and go over a lifetime. You would go to college, and you would then go to another place to work, and some of those things would fall away. Whereas now we sorta take all of them with us. We take all of our relationships with us where ever we go. Because they're mostly not physical relationships, the connections aren't, you don't need to be in the same room or the same city as someone anymore to keep up that very strong connection. I think there are a lot of positive things about that, but I do wonder what else it means.
Jen
Yeah, and there's people who've written a lot about his extensively, or studied it, but I feel like those of us who make websites and teach each other, and have strong ideas about how to make websites, we're not talking about these things very much at all. And even trying to have a conversation right now about it, I feel like well, everything I might have to say about that is so infant, it's so unpolished.
John
Speculative really.
Jen
It's just so, kinda amateurish, when there are psychologists and sociologists who've studied this more extensively. Like, Sherry Turkle has some great work out, like I keep wanting to have more time in my life to slow down and to read a lot of those books, and to just--
John
But then there's another Twitter feed to read.
Jen
Be more deliberate in my own choices about not necessarily opening up Twitter at the very beginning of the day. Waiting until lunch or something, or you know, being more deliberate about what I wanna focus on and spending time on that, and less consuming information, just pouring information in 'til I get completely overwhelmed and just get up the next day and pour more information in (laughs), and get overwhelmed and pour more information in. I mean in some ways it's been really helpful to do that. I've been able to do a lot of the work that I do by doing that. But then on the hand, there's a weird way in which I think it's, I think we're full. I think a lot of us are really full now, and we are ready for something else, and living our lives in a different way.
John
So we had the slow food sort of idea in particularly the 90s, and some other sort of slow approaches. I'm probably alluding to other people's ideas here, like slow conversations, or slow reading, almost deliberative approaches to slowing down, as you say.
Jen
It's hard because I wanna know what my friends are up to. And Twitter or other things like it give me a way to quickly keep touch with, keep track of, keep in touch with dozens of people on several different continents very very quickly. And those are real connections. But mixed in with that is also a lot of noise, and it's that noise that can kinda get, and I don't have time to separate all of that out.
John
It's almost like you need the noise to get the signal.
Jen
Yeah.
John
And the signal is important but we actually we lose a lot by having to wade through all that noise.
Jen
I do see people doing things though, like opening a bunch of private Slack channels and just being in little conversations with a dozen people, five people, two dozen people, and having a lot more signal in those spaces and then spending less and less time in the spaces that are more noise and more public. Which is bad in a way, because it feels like that was one of the great things about the web, is this kind of open conversation that anybody could get involved with, and yet a lot of it's now being private, you have to be invited to the little group, you have to know somebody, you have to be friends with them already to kinda get in the door.
John
Yeah, and then one of the great problems of the web is you open yourself up to ideas that, you know, you're not simply in an echo chamber, however, as we've seen particularly with, particularly with a lot of women, in recent years, well, going back a long way, but certainly gaining more understanding of just how prevalent this is, you know, being exposed to horrendous attacks and vitriol. So you know, the response being, you know, we need to create walls around ourselves. But the unfortunate thing is that they will also limit positive as well as negative kind of random connections and so on. It's almost like we flipflop between the desire for openness and then we realize the negative of that and we kind of withdraw back within our castles and then kind of sneak out again. It's probably something we've seen oscillate for the last 20 years online. Interestingly enough it leads me to, I didn't realize until very recently, you're in Missoula now, so how long have you been there?
Jen
I started in August last year.
John
Okay, so you were there for about six months before I realized that, so (laughs).
Jen
Yeah.
John
I don't know whether I wasn't paying enough attention, or--
Jen
Or I didn't promote it well enough (laughs).
John
Right.
Jen
Probably both.
John
And so your job though, in your job description, you say you're a design advocate.
Jen
Designer.
John
So we see this term of a developer advocate used quite a bit, I think Google uses that term to some extent, and probably others as well. So you're a design advocate. And you spend your time researching the coming revolution in graphic design, sounds like a pretty awesome job. But I wanted to start by asking well what is the coming revolution in graphic design on the web?
Jen
So the way I see it these days most websites are designed with a lot of variation and a lot of attention and effort put into typography, and maybe a little bit of color palette, there seems to be a lot of the style right now, the trend right now, is to not have a lot of other things going on as far as drop shadows or backgrounds, this whole flat design movement. Which may or may not stick around. But then there's almost no attention and no conversation about page layout. It feels like everyone takes that very carefully crafted typography, that incredibly simple modern idea of visual design, and they pour it into layouts that we've been using for 10 or 15 years. You've got a header across the top of the page, you got a sidebar, you got a footer, and you got a main content column. Or maybe you've got like, a big chirographic or a carousel, and then you've got like a paragraph that's centered, and then you have three paragraphs next to each other with icons, and then (laughs).
John
So basically the Bootstrap--
Jen
Yeah!
John
Style of--
Jen
Basically it's like the four layouts that Bootstrap comes with. You know, a handful. There's many a half a dozen of different layouts that we see over, and over, and over again. And recently there's been a couple tweets actually, that have gone around. Jokes where people have said, you know, kinda made reference to how bored we are, made reference to how everybody's doing the same thing. And those tweets, those blog posts, just blow up. Which tells me that a lot of people feel this pain right now. A lot of people are just completely bored. Part of the reason that we have those layouts is because we were doing everything with floats, CSS floats. And floats have a lotta, you know, float were never designed, that part of CSS was never designed to really do a layout.
John
It was discovered that could be used in that way, but it certainly wasn't just--
Jen
That's not what it was for.
John
What it was actually designed for was sort of cutout effects and--
Jen
Yeah, like having a photo and then getting text to wrap around the photo.
John
Which no one seems to do!
Jen
Right, because we're putting everything in the column and the photo's just all the way across.
John
Right.
Jen
But there's some certain things about floats that have limited us. Like, for example, you can't have a bunch of photos of different sizes and shapes all laid out on the page. You end up with all these empty blocks and empty spaces that look broken, because of the float drop problem, where floats, you get four across and the next one doesn't go here, it goes like--
John
Below the line.
Jen
Gets caught on whichever one is the tallest one. So what did we do to solve that problem? We just made every photo a square, or we make every photo the exact same aspect ratio. Maybe it's a rectangle, but they're all the same height as each other, they're all the same width as each other. Everything's always like--
John
The grids a very, very simplistic grid.
Jen
Oh my god.
John
I guess that these are responses to the constraint of the technology.
Jen
Yes!
John
All design is within--
Jen
Part of it's trends. And part of it's, you know, we don't have enough time to invent everything from scratch every time. We learn from each other, we get inspired from each other. So some of that's normal. But a lot of it is the limitations of the CSS that we've had. It's the limitations of the technology itself. And those limitations are changing right now.
John
So, we've certainly had experiments with shapes and regions. Is that something that you've got in mind?
Jen
Well yeah, I mean we have flexbox which is--
John
But even stepping back before we get to those very complex kinda layout systems, this print design of being able to flow text around arbitrary shapes.
Jen
Right. Instead of around a rectangle, you can float around a circle or a polygon.
John
I mean, is that the sort of thing you have in mind?
Jen
Yeah. I mean, there's a lot of different pieces. Some of them are big pieces like flexbox regions and the alignment specification. Some of them are small pieces like shapes, which lets you flow text around a shape that's not a square, you can flow it around a circle. Clip-path, which lets you cut something into something that's not a rectangle. 'Cause by default, every time you put anything on a page, it's a rectangle.
John
Right. Well that's the box model right there.
Jen
It's the box model! Everything's a rectangle. But before we used floats, before we used CSS, when we were using table-based layouts, we were using tables for layouts and everything was HTML, we did all kinds of stuff with circles. Remember all the circles? There were circles everywhere. And then we went to CSS--
John
Well also we tend to--
Jen
There were like, no more circles.
John
You know, I remember one circle was all we did, which was, you know, with the image map around, you know, it was all rendered out of terribly inaccessible--
Jen
Terrible JavaScript, terrible J--
John
Looked kinda nice, right?
Jen
Yeah, didn't work in both Internet Explorer and Netscape.
John
When I think about the number of people whose lives were made hell 'cause they couldn't read it, 'cause they've got a screen reader.
Jen
Yeah yeah yeah. So there were all kinds of problems with that, and (laughing) CSS is definitely better. But CSS, because it's been limited to these boxes, so, clip-path is another one where you can have an object, maybe's a photo, maybe it's a pull quote, maybe it's a box of color, and you can cut it into a trapezoid or into some kind of polygon, or into some sort of non-rectangular shape, so you can cut something into a non-rectangular shape, you can flow things around it in a non-rectangular shape. There's a specification called initial-letter, which is gonna finally let us do--
John
So how's that different from first-letter?
Jen
Drop caps. So first-letter the pseudo element lets you isolate the first letter without having to wrap it in a span, which is great. But once you've isolated that first letter, what are you gonna do with it? So, you say--
John
I guess the drop cap is the idea of what we've traditionally done with the first letter of a paragraph.
Jen
Right, if you wanna do a drop cap how are you, what technology are you gonna use? So then you have to apply a different size font, and maybe a different color, and maybe you make it bold, but in one browser it's lined up perfectly, you want it to be the height of three lines of text, three paragraphs lines, so you make it all perfect in, I dunno, the browser of your choice, and then you open it in another browser and it doesn't line up properly because the browsers don't--
John
The font's different.
Jen
The fonts are different. Or if the font doesn't load or the user changes their font size or, it's very very fragile.
John
That is a problem we had with absolute positioning way back in the day, and it didn't end up being the solution we dreamt it would be because it looked perfect for the Mac, but you know, at 72 dpi, but then you go over here and the first time you ever open it, 'cause you know, owning a Mac and not a Windows machine was, was really expensive back then. I mean, the first time with this beautiful layout with absolute positioning on my Mac, and I opened it in the college Windows and was like, "Oh man."
Jen
And it was all broken.
John
My life ended right there.
Jen
No, we need things that are robust and will work across a whole bunch of different places, under conditions that we can't control and we half the time don't even know about. So first-letter isolates that first letter but we still don't have the technology that you need to make it big, and make it big in a robust way that's gonna work all the time. And that's what initial-letter does. You're still gonna use first-letter and then you're gonna use initial-letter. So you'll say, "Oh, first-letter, change the font, "make it," no not make it big, "Change the font, change the color, "maybe add a little margin to it." But then initial-letter is a command to say "Make that letter be the height "of four lines of text, six lines of text, "two lines of text." Or, and make it, by default it will just line up the top of the paragraph that it's part of, but you can make it a raised letter, you can actually say, "Oh I want it to be higher." So, "I want it to be the height of six lines, "but I want it to be only overlapping two lines, "and stick up three lines, or four lines." It's simple technology, but it's gonna let us finally do drop caps and actually have it work.
John
Drop caps and initial-letter is I guess focusing on a very specific part of the page, but a lot of layout is really about the kind of things that we don't see in necessarily in our phones and our smaller devices that make a lot of sense in a big device. You know, on phones we tend to have a very simple linearized kinda layout, because elements get very small very quickly.
Jen
Yes. Although, there still might be something that you wanna go ahead and do some layout with, something small, a diagram or some data, or you know, maybe you won't do something fancy with a bunch of text or a bunch of photos, but maybe there's something small that you wanna actually do some real layout with. And I also feel like maybe there are things that we would do on a very narrow screen that we haven't been able to, so we haven't thought of them yet. But maybe once we're able to we'll realize "Ah, actually there's all these amazing ways." Maybe we wanna use sideways scrolling, we've never used it before because it's been a totally horrible experience, but maybe there's a new way to manipulate a page and to use a page where sideways scrolling might matter. Like, I don't know. I feel things are changing so radically we should be willing to ask ourselves those questions. Especially if you, you know, when you're on a deadline for a specific project with a specific client, you really, you can't go nuts. Maybe you add one little interesting new thing, or two little interesting new things, which can have a profound effect. Some of the most profound things I've seen or done myself have actually been technologically not that hard at all. Little tiny change. But I do think we need to make space in our lives or careers, it's something that I'm definitely doing, to do bigger experiments and to try out some crazy stuff and see what happens. More like what we were doing before CSS came along or when CSS first came along, you know, the first decade of the web we were experimenting and trying all kinds of crazy new cool things.
John
The very famous Creating Killer Web Sites.
Jen
Yeah.
John
Do you remember that?
Jen
Yeah, I have it on my shelf.
John
There are definitely people watching right now who weren't born when that book came out. I think 1996 it was the number one bestseller on Amazon, of any book, not on web design, any book. So they sold a lot of books. But if you actually go back to it and look at it, they were full of these horrendous, not all of the techniques were horrendous. You know, to get leading between lines before we had line-height, it would literally break lines into individual table rows and then add the spacing in that way.
Jen
Yeah.
John
But beyond that, you actually look at these killer designs that we just all went ape over, they're all fluffin' horrible (laughs). They're really not particularly attractive designs, I guess it showed how, what came before, how impoverished from a design perspective web design was before we started working out--
Jen
Well you have to remember too though, that computer screen at that time were very low-fi. Like, they didn't have nearly as many colors as we do now. Just a handful of colors.
John
640 by 480 was a pretty common frame.
Jen
Yeah, and the pixels were giant! So you're looking at this screen of giant pixels with you know, a very limited color palette, and that's what we were used to.
John
We had the web safe color palette.
Jen
Right, the 216 colors. And graphic design, we didn't even call it graphic design for a while, we called it desktop publishing. And desktop publishing, the fonts that we had were like chunky and all bitmapped.
John
However, when it all got printed out--
Jen
No, it came out like that.
John
It looked beautiful right?
Jen
I mean, you know laser printed. Sometimes people were doing work that was beautiful, but there was also a lot of work that wasn't beautiful on the print side.
John
Yes, I think we forget that.
Jen
In the 90s.
John
I think we look at some of the supposedly revolutionary print design of the late 80s and early 90s. It struck me as more "Oh, because we can do it, "we will do it."
Jen
Yeah.
John
But again, that's often experimentation as well. Like I mean, Neville Brody and the work in things like The Face magazine, it spawned you know, a million emulators. We look at it today, incredibly busy, there'd be multiple, multiple typefaces let alone weights on a single page, partly because we could for the first time.
Jen
Right.
John
It was physically possible to do that,
Jen
It was amazing.
John
And economically possible to do that.
Jen
Yeah, you didn't have to buy the actual letters.
John
Right. Yeah, the letter set. And a lot of it was letter setted as well, and then suddenly we could do it on the Mac. I mean, this is one of these things that I know you share my great passion for, the kinda history of the web and the prehistory of the web, But I look back to this period of the late 80s and this explosion of desktop publishing creating, suddenly instead of there being a handful of magazines that were incredibly expensive to produce, there were dozens and dozens that were fragmented around popular culture, and specific sub-- Not just talking about zines, which were, again, another level of kind of popularity, but actually things that end up in news agents. There was an explosion of them, because economically it became possible, and that was all driven, to be quite honest, with Mac. The Mac can illustrate well--
Jen
PostScript.
John
PageMaker and PostScript. But I think back to this cohort of kind of digital creators, were the first digital creators, writers, and editors, and illustrators, and page layers, page layout experts, who, when the web came along were ready to fill it with stuff.
Jen
Yeah, and those are the people who were on the web for a long time.
John
Because they were the people who were already using the digital tools to create. So instead of it being directed onto paper, it was directed onto the screen. And so I think there's a reason why print has very much dominated our way of thinking about web design.
Jen
I'm hoping that we can get that spirit of experimentation back on the web, and try out some new things with the new layout technology. I hope that we don't just say, "Well let's do Bootstrap using "CSS Grid Layout Module," (laughs).
John
Maybe we could go the Talmud, right which is, you know the Talmud? I'm probably mispronouncing it.
Jen
No I know what you mean, what's your?
John
Well if you look at the page layout of a page in the Talmud, it's incredibly complex, and a lot of people refer to it as the very earliest hypertext, because you're embedding exegesis about a passage into another passage. Certainly by modern contemporary standards you wouldn't necessarily call that beautiful design, but it's very complex and rich information architecture I guess.
Jen
Well and there definitely was a spirit, even before the web, of you know, hypermedia, hypertext.
John
Oh absolutely, it's where I came from.
Jen
"This is new, what is this, we could do anything, "what is this medium, let's invent." And a lotta academics, a lotta artists, "Let's invent something new." Or yeah, even a laser printer and PageMaker and a Mac, and you could make a magazine. And there was this spirit of do-it-yourself and anybody can now have a voice, and "Let's invent something outta nothing."
John
And yet now we look to--
Jen
Now it's like "Oh I gotta business. "I gotta business, I need to grow "the way our VC funders want us to, "we're gonna use Bootstrap, "we gotta test this stuff, we gotta--" Like, it's just so, it feels like everything culturally has become so narrow and so specific. But I hope we can recapture some of that--
John
But maybe there are other places like 3D printing and other fields--
Jen
VR right now is the place where everybody's going a little nuts and trying to, like, "What's virtual reality? "What are we gonna do?"
John
So I look back to the early days of the web and I was sort of fortunate enough to have seen probably three such revolutions in my relatively long life now. In the kinda mid-to-late 70s I was quite young, but early teenage years, the rise of the pre-PC, with the first personal computers, they were expensive, the people I knew who had them tended to be doctors and lawyers and accountants who had money, but they were passionate about them. And they didn't care that this was the future in terms of making a heap of money, They were genuine enthusiasts, and they would get together and compare their specs and so on. What drove their interest was certainly not a commercial one. We've talked a little bit about desktop publishing, I think it was a genuine revolution that we've sort of overlooked to some extent. And as I said, it was an absolutely vital precursor to the web. Because if we hadn't had that, I don't think we woulda had those skills and that knowledge base, and those people who could then see the web for what it was and jump into and start using it as a distribution network and a medium in of its own. And I guess, you know, those three together are revolutions that came relatively close together, 15 year period. And you know, 20 years later, as you say, we've had some periods of experimentation with the web but increasingly, as you say, it tends to be, you know it's a commercial medium now. And we're not seeing it necessarily used in that experimental way. But as I said, maybe there are other fields now like 3D printing, and you mentioned VR, where-- But even then now there's a feel with this idea well VR, with Oculus and Facebook buying it for billions, and you know, Sony, the commercial impetus certainly seems to be there.
Jen
It seems a bit like "VR might be the next iPhone, "we better get involved."
John
"We better throw money at it," right.
Jen
Yeah, "We better get there, 'cause last time "we didn't get into mobile early enough. "We didn't make the kind of money we could have made. "This time, if this is the new mobile, "then let's get there sooner."
John
And probably 3D printing to an extent as well. We're seeing a lot of sorts of, I mean there's obviously lots of money flowing in--
Jen
I feel like it's already, it's a bit, yeah. I do think though, that layout is, we have a chance with this new CSS to do amazing things with the layout. And I do think there are commercial advantages to doing that. I do think that you could have a much better design, a much fresher, get your audience to show up and go "Wait, wow, where am I? "I clicked a random link and now I wanna, "I'm interested to look more, "I'm gonna read this first article "but I'm actually gonna stick around "and look around the website more."
John
We're seeing a little bit, I mean even Bloomberg and some other major publications have certainly tried to experiment more with like kind of novel visual design.
Jen
New York Times has done a tremendous amount of work, and so has The Atlantic. There are a handful of publications I feel like I look at their work and I just see a healthy group of people who've been allowed, encouraged, and supported to experiment with their medium and figure out "How are we gonna do "news for real in the 21st Century? "What does it mean to have the ability "to embed data and live graphics "and video with gorgeous photos, "more gorgeous than any photos "we've ever had before, "and text with professional reporters, "professional writers, professional essayists, "and deliver that to an audience? "Let's not just take the newspaper articles "and stick 'em on the internet, "let's redefine what a newspaper is "based on what a computer can do." The New York Times has been doing amazing work with that. And layout is a big part of it.
John
Yes.
Jen
A big part of what they've been doing.
John
So let's talk a little about those technologies. Particularly I guess think about flexbox and grid layout. Now my concern with flexbox, 'cause it's something I've been experimenting with in its 87 different iterations since it started, is I always have a concern about certain technologies that don't get adopted simply because the learning curve is so significant. And my response to flexbox time and again is wow, if I'm really struggling with this, as someone who knows CSS pretty well and all these technologies pretty well, I'm not saying I'm a rocket scientist, but, you know, if I go away for three weeks and come back I find I'm starting all over again from scratch. And I know it's probably the solution to some of the interesting things I'm trying to do. What can we do around this? Is, ultimately, flexbox like assembly? It's a language underneath and we will use tooling on top of that?
Jen
No.
John
Or do you think it will work straight in flexbox?
Jen
I think that flexbox is a bit, right, so you alluded to flexbox... So here's the thing. Some of the CSS properties are fairly simple, like initial-letter, it's one line of code, shapes of one line of code. Lot of thinking went into that specification, lot of thinking went into what that would be. But when it actually went into a browser and then when it actually goes into a front-end developer's brain, it's not that complicated. There wasn't a lot of discussion, there wasn't a lot of debate. Flexbox needed some time for the CSS Working Group and for people who know what this medium is, the people who are inventing this medium, to try out a bunch of ideas and then change their minds and try out different idea and change their minds and try out different ideas (laughs). And when they did that with flexbox we were using prefixes. So all of that code went into browsers prefixed--
John
In the knowledge that it would be broken.
Jen
And we started using it. Like, authors, those of us who make websites started using it. It was like "This is awesome! "I'm gonna start using it right now." I mean, that's how I, I advocated for years, you should use prefixes. And things like using a prefix on border-radius was no big deal because border-radius didn't change, because border-radius is just syntax for making a rounded corner, not that complicated. But with flexbox, the people who invent what the web's going to be needed a chance to have running code in a browser, build some websites with it, and then change their minds about how that specification should work, change their minds about what that syntax should be. And that was incredibly messy, because like you said, we had to keep relearning it. If you made a website six years ago, or maybe I should say four years ago, then the code changed and you had to redo your website. Total mess. In some ways in response to that mess, they're not inventing grid using prefixes. Grid is getting invented using flags. So, basically it's, grid is even way more complicated than flexbox. Grid is gonna make flexbox look like a piece of cake to learn (laughs). But it's happening all behind flags--
John
We're not trying to scare anyone out there (laughs).
Jen
It's just the reality! There is a certain level of messiness that came with flexbox, and learning flexbox, and feeling like "Oh I started using flexbox "too early and then I got burned." That, I don't think anybody should worry about anymore.
John
That's more alluding to--
Jen
I know, I wanna get to your question, too. But I just wanna say that as a preface, 'cause I feel like I've seen, out there, a lot of people be like "Wow, flexbox was too hard! "And then it changed. "And now is it still changing? "I don't know!" And then grid, "I don't wanna get "burned like that with grid."
John
Sounds a bit like me!
Jen
"I don't wanna bother to learn it "until it's already finished." And it's not gonna get rolled out in the same way. Grid has gone through a bunch of iterations, people have been building websites in grid behind flags. Which flag basically means is, with the prefix, if I wanted to make a website using this experimental technology, all I had to do--
John
You as an author are allowed to say "I want the browser to use this."
Jen
Me as an author, I could say "I need this prefix," and then every single person who ever went to the website would get that prefix experience.
John
Provided their browser supported that prefix.
Jen
With the flags, it's on the user. So I could write the grid code, but you have to flip a button in your browser. And so I can't then expect that every single one of my users is gonna flip a flag in a browser.
John
So it's quite clearly experimental. And the reason why it's supported is for us to learn it.
Jen To learn it. And one of the disadvantages is that not enough people are messing around with it. The people who are inventing grid need more folks like you and I to try it out and to give them feedback, and to make experiments and say, "Yeah this isn't quite done yet. "How about if we do this, how about if we do that?" Because we need more people actually trying it out to have input. But once it's ready, once it's done, once it comes out from behind the flag, it's not gonna change anymore. And people can start learning it, they don't need to wait, they're not gonna get burned like with flexbox. So that said, it is hard to learn how to use flexbox. It is hard, it's gonna be even harder to learn how to use grid. I think that we, lots of times, especially those of us who write this code for a living, as a front-end developer for a living, we're used to getting a project, getting tickets, getting marching orders and saying "Okay, you've got two weeks, "you gotta build this, this part of the website "is your responsibility, it needs to get done "before the end of the next sprint." And there's not enough time in that cycle to learn something completely new. We have to set aside some time to learn these things. We have to take time to actually go off, maybe if they won't let you do it at work then you gotta do it on the weekend on your own. But maybe everybody at work is gonna decide "You know what, we're gonna take this project, "we coulda done it in two weeks using old technology, "but we need to learn the new technology "so we're gonna do it with new technology "and we're gonna give it a month, "because we're gonna be slow "because it's gonna be the first time we're using it." It's not gonna be slow because it's always slow, it's just gonna be slow because it's new. Learning responsive web design was that kind of an investment. Learning how to use CSS in the first place was that kind of investment.
John
I feel like certainly what you're talking about as a model of practice, is certainly not alien to anyone who's been doing this for a long time.
Jen
Yeah.
John
Because we've been through these periods of significant change in the core technologies. Whereas I think there's, you know, despite having the rise of React and other front-end frameworks--
Jen
Right! (laughs)
John
That people learn, you know, we haven't necessarily seen this massive upheaval like we might have done.
Jen
Well that's the thing, people are putting a tremendous amount of effort into learning React or learning Angular, or changing from one to the other, or setting up Grunt, or setting up--
John
Or going from version one to version two.
Jen
Yeah! And it's interesting that I do see a bit of resistance to learning CSS when I don't see that kind of resistance to learning third-party tools. It like, "The third-party tools are cool! "And they're gonna make us more efficient! "But learning CSS? "Ugh, why would you ever wanna "invest in that time?" It's like, because CSS is gonna be around for the rest of your career! If you learn flexbox, you will use it for the rest of your career. If you learn learn React, eh, you'll use it until the next thing comes along.
John
Until the next thing comes along, right. So let's step back a bit. Because we're talking about a whole bunch of technologies, and I think there might be, to some extent, amongst quite a lot of people, a little bit of uncertainty about what these technologies are. So I guess at heart there are two core layout technologies that are coming down the turnpike. We've got flexbox, and we've got grid.
Jen
Yes.
John
And these, naively, appear to be two technologies that more or less do the same thing, they're both very complex, you know, compared to "Well I already know how to float this left "and float this right," and obviously I appreciate that I might get a bit more than that, but how do these fit together? Are they designed for different things?
Jen
Yes.
John
Are they designed to work together? Is one gonna obsolete the other? What's going on?
Jen
Right. I think that there's... It's easy to maybe thing that flexbox and grid were made by two different groups of people.
John
Right.
Jen
The way that React and Angular are.
John
Right.
Jen
You either use React or you use Angular, you don't use both. But that's not the case. Flexbox and grid were made by, both, very small groups of people that are either identical or overlapping. You know, it's the same group of people who made them both.
John
So why have they made two things? What are each of them for?
Jen
And they didn't just make two. There's actually, I don't know how many specs there are. I feel like every time I turn around, there's another one that I didn't, like I, "Oh gosh, I need to go learn." 'Cause there's flexbox and grid--
John
And you were in the Working Group right?
Jen
I just joined the Working Group, (laughing) but I don't need-- Right, so there's flexbox and grid and then there's alignment, which I can explain in a minute, and then, what was it yesterday I learned? This morning! I got off the plane and I was reading my email and I'm like "Sizing, intrinsic and extrinsic "sizing specification." Like, what is that?
John
Yeah, that's been prefixed in browsers a while, I use that a bit. I like that.
Jen
There's just, there's a lot of, I think there's a lotta pieces to this puzzle. The flexbox piece and the grid piece are giant pieces.
John
Right, they're the biggest pieces.
Jen
And a lot of the others are sort of helper pieces and side pieces.
John
Look at the round stuff as well.
Jen
Round I find very exciting. Viewport, you know, I find very exciting. But in general, flexbox came first. I think its use cases are simpler. I think it is a very powerful tool, it's more powerful than using floats and less hackey.
John
But is it largely with the sort of problems we have been solving, obviously a super set of that, but the kind of page level layout? Where does it sit in terms of the problem it's trying to solve?
Jen
What we've been doing is using floats, or especially we've been using 12 column, where all the columns are the same width as each other, float-based, usually Sass-based, layout frameworks. Like 960 grid, and all the responsive versions of that, and Bootstrap, and all the, right. So there are all these different, I mean, every time I turn around there's another flexbox grid framework, which is basically trying to take flexbox and make it do what 960 grid used to do, although in a responsive way. I think it's a terrible idea. I think it's a absolutely ridiculous idea. Because flexbox does something that's incredibly different than 960.gs. And grid is gonna do something incredibly different than flexbox, and incredibly different than 960.gs. And I think if you really, really want to have a 12 column, float, like the kind of layout that you'd get from floats, which is like, everything on the page kinda sticks to the top and then, like changing the icons on your iOS device. You can't put icons at the top and icons at the bottom and nothing in the middle. All the icons are always, like all your elements in your page are always up against the top of the page. It's another thing that, that's what you get out of something like 960.gs. You've no control over rows, where with grid you do. So I think there's a mistake and one of the things we have to do, one of the things that's hard, is we have to really change our mental models. So flexbox is good at taking something in one dimension, taking content in one dimension, and laying it out. If you had an infinitely wide browser you have a row of content that was just all in one row, your browser of course is not infinitely wide, so it's however wide it is, and the content wraps. So you have a row and then it wraps, and you have another row and it wraps, and you have another row. But the way the browser's thinking about it is as if it's one long piece and it does all these calculations, flexbox is really good at like, figuring out how big things should be and what to do with the extra space. If you wanna distribute extra space in a way that's simple, you wanna write simple code, flexbox is your tool. But when you have multiple rows, each row gets calculated completely independently of the other rows. So let's say you're making a word processor and you've got a whole bunch of buttons in a toolbar, that's perfect for flexbox. Maybe on a big screen they're all in one row, but on a smaller screen they start to wrap and you got three rows or something. But those buttons are all gonna fill up the space that's available based on the rules that you give it without really knowing anything about the other rows. What we've been trying to do a lot, what I have used flexbox for many times, is like a bunch of photos or a bunch of, you know, you end up with like a card that's like a photo with a headline and a teaser paragraph, and the height--
John
Which we normally would make identically high because--
Jen
Exactly.
John
When we flow them. But of course, as soon as you get a bit of overflow of, maybe the name of a speaker, if we look at one of our designs recently (laughs).
Jen
Yup.
John
Yeah, they have one of these double-barrel names and it's too long and it wraps to the next line and it pushes the whole box too big and the whole line just drops out--
Jen
So that's a perfect example of the limitation of the float-based systems, is that all that content, each one of those cards or whatever they are, each one of those units of stuff has to be exactly the same height. So then you end up doing dumb things like truncating your text so that every teaser paragraph is always 42 characters, because if it's 44 characters, it's gonna break the entire page layout.
John
Yes, alright. So this is exactly what flexbox is best or good for.
Jen
Flexbox is much better than floats because flexbox lets you, so you have a row of items. Let's say you've got three of them and one of them is short, 'cause the text is short, and one of them is long, because the text is long, the one that's the longest of the row will determine the height of the row and everything else in the row will become that height.
John
Ah, right right.
Jen
Which is awesome. But the next row gets calculated all on its own. So the next row becomes the height of the tallest thing. But what if you wanted to find the tallest one on the whole page and make them all be the same height? No, flexbox is not gonna let you do that. And the other thing about flexbox, is let's say you have, it's two across sometimes and when the screen's wider it's three across, and when the screen's wider it's four across. Let's say it's three across but you've got 13 objects not 12. So you've got three, three, three--
John
You are describing exactly how I layout all of the speakers for our conferences. And we want different sizes for various reasons.
Jen
And that bottom row, because it's, if you have 12 then your bottom row is even.
John
It's like, what do we do? We leave someone out? Do we make someone more important? Do we, what do we do here?
Jen
Right, because flexbox will take that bottom row and it will calculate it so that that last one, if it's by itself, will take up the whole space. So you have three, three, three, and one. Or three, three, three, and two. And it will take that one or two and it will make it the full width.
John
Right, which you can't do, for example, with an nth child selector, because may or may not want to apply that rule, depending on how much space is left.
Jen
If you start putting widths on everything you can control the widths. But then you have to write all these media queries to change the widths at all these different breakpoints. And the whole idea with flexbox is that you shouldn't have to do all that work, it should just calculate it for you. So the thing that everybody's wanted that I walked around asking all these questions trying to find the answer to, is how do you get flexbox to just know the width of the things above and just do the same thing? And the answer is you will never do that. Flexbox will never do that. What you want in that situation is grid. Because flexbox is only thinking about one dimension, and it's only calculating each row. Or you can go the other direction, you could do columns. But then it's only going to calculate each column with no information about the other columns.
John
Whereas grid, by its nature--
Jen
Is two-dimensional.
John
Right.
Jen
Grid, you can easily say, "Hey I got all this dynamic stuff, "I want you to automatically calculate "all these things for me. "I need you to calculate them based on "the other items that are on the page. "in both dimensions."
John
Now a lot its origins is with the way Windows 8 introduced tiling, so there's a kind of a background there. I think a lot of people involved with the tiling layout of Windows 8 home screen, they're involved with the development of grid as well.
Jen
Yeah.
John
Isn't that right?
Jen
Yeah, Microsoft came up with grid and it's in IE and Edge actually right now, behind a prefix. I mean, I was telling you before there was no prefixes for grid and there was no early implementation that's changed? Well okay, except for the fact (laughing)--
John
Except for grid (laughs).
Jen
Except for the very first implementation. The very first implementation is live.
John
It's behind flags now.
Jen
It's not behind flags. But it is behind prefixes. And if you just don't write those prefixes then you can ignore it. And maybe at some point we'll start using that, we'll write something and it will... some sort of tool like an auto prefixer tool will spit out the new syntax and translate that new syntax into the old syntax. But I don't know. I also think there's a good chance we might just ignore the old implementation and just pretend like it's not there. And just look for the new implementation.
John
Well now I guess with IE moving in that evergreen direction as well, we know that, you know, and even with Safari, the WebKit preview version's gonna be updated every two weeks. It feels like we're finally reaching the promise that browsers are gonna ever auto-update. And for the most part, we'll be able to stop worrying about legacy.
Jen
I think the bugger's gonna be IE11. If people have to support IE11 long into the future, nothing new, the way that I understand it, not officially but just in talking to people from Microsoft, it sounds like nothing new will ever go into IE11.
John
Did 11 ever get, did it even have this old version of grid in it or not?
Jen
It does have the old version of grid in it. Because it was like in 8 or 9 or something, it's been around for a while.
John
So where are we at? Just before we wrap up, there are a lot of exciting features, where are we at in terms of the reality using it? Okay, we can play with it and that's really important. But people gotta put food on the table as well.
Jen
People should use flexbox now.
John
Alright, so we can use it.
Jen
It's better supported than border-radius.
John
Better supported than border-radius. So what are the big gotchas in terms of flexbox?
Jen
I mean, I think it doesn't work in Opera Mini, which is a browser that people do not test it in and they should, people are obsessed about IE6 or IE8, or IE7--
John
But Opera Mini has many more users than those.
Jen
Opera Mini has way more users than IE8 ever will have.
John
And they're live and everything, those users (laughs).
Jen
Yes, they're using their phones right now.
John
As we speak, millions!
Jen
And then you know, a lotta CSS doesn't work in Opera Mini. So it's a whole other thing, people, if they don't understand how that browser works, they should go learn about that browser and they should install it on their phone.
John
They should just turn off CSS every now and then and realize that that's a lotta the world actually would prefer to see your webpage.
Jen
Yeah. But otherwise, I feel like flexbox, you know, if you understand how to write CSS in a progressively enhanced way so that when it doesn't work in browsers it's fine, because it works and doesn't work at the same time. And you can just write it so that it's gonna work out. Maybe you have a float-based fallback, or maybe you just have a narrower, you know, we just started doing that with media queries where we'd sorta have a simplified layout and then layer in media query-based responsive design.
John
What about using, say, supports? Or are we not quite there?
Jen
@supports is a great way to do it. So feature queries, the problem with using feature queries with flexbox is that there are browsers that support flexbox that do not support feature queries. Like Safari 8. So there's a way in which, if you write flexbox code and then you wrap everything into a feature query there are browsers out there that should get the flexbox code that won't, because they see the feature query, the conditional, that says "Hey," you know, "Does this work? "Do you understand flexbox or not?" And if it says "No I don't understand," it won't say "I don't understand flexbox," it'll say "I don't understand the question," and then it will skip all that code. So I don't know that I would use feature queries with flexbox. I mean, I started using flexbox in production on major, major, major websites, like four years ago.
John
Right. So like SVG, which is still, you know, it's been well supported for a long period of time, but still have this sense it's experimental.
Jen
Yeah, it's not. Flexbox is ready to go. If you understand--
John
You heard that first, people. Go out there, use flexbox now.
Jen
Yes, yes yes yes. Grid, however, is in 0% of browsers. If you consider the Microsoft--
John
So you could use it in progressively enhanced way (laughs).
Jen
(laughing) Yeah!
John
Fallback to not grid.
Jen
If we say that that prefix old original draft in Edge in IE doesn't exist, like if you don't consider that part of the new implementation then it's in 0% of browsers. So yeah, we're not using it right now.
John
Except it's behind flags in--
Jen
It's behind flags in Chrome, including the current version of Chrome and Chrome Canary as well, so that's a great place to go test it out if you want. Rachel Andrew, who's been writing a tremendous amount about grid and teaching about it now for a couple years--
John
She's gonna come do a workshop for us in July, so if you're in Australia, she'll be coming out here to do that in a couple of months.
Jen
She is a good person, if people wanna learn more, if they actually wanna learn the technology, find a video of her talking, go see her talk. She's got a video series coming out that teaches you, not just grid and flexbox, but also all the old stuff, display:table, and floats, and--
John
I was always a bit surprised at the table-based displayed in--
Jen
Inline-block.
John
Kind of like, that solved a lot of our problems for us.
Jen
Inline-block too. We sorta skipped over inline-block.
John
I love inline-block.
Jen
We just got so fixated on like--
John
On floating everything, right?
Jen
Putting into the hands of a third party. So grid is almost, it's also in Safari, I mean in Firefox, it's in Firefox in the current version, in the developer's edition behind a flag, it's in Firefox Nightly without the flag. The easiest way to play around with grid, the easiest way to see examples in grid running, is just download Firefox Nightly and look at everything in Firefox Nightly. Then you don't even have to go figure out where the flag is. And it's in Safari Technical Preview?
John
Yup.
Jen
Behind prefixes.
John
Just launched last week I think, right?
Jen
Yeah.
John
So they have it prefixed rather than flags?
Jen
It's prefixed. Safari still doesn't have a flag. Maybe they will have flags eventually but so far--
John
I'll hassle my good friends at Safari.
Jen
Everything's still WebKit. Just, everybody out there, don't only write WebKit prefixes.
John
Yeah.
Jen
If you ever write a WebKit prefix, also write the unprefixed--
John
Follow it up by the real one, right?
Jen
The real one, the un-prefixed one. Grid feels like it's almost done.
John
So you sort of think like, it'd be almost like an overnight sensation?
Jen
Yes.
John
Because of the way it's being worked on.
Jen
Yes.
John
It hasn't sort of had these long, it started almost like, came full of stature when it started, because it'd already kinda worked in--
Jen
It needs like two years of baking, but we're at like, one year and 10 months. It's already mostly baked.
John
It's like an elephant, the gestational period is quite long--
Jen
Nobody knew that it was baking. And because it's in Edge already really all they need to do is update their implementation. A lot of the heavy lifting around the browser calculating how to do layout is already all there, they just need to revise it based on the new--
John
Syntax.
Jen
The new syntax. So all the browser makers are either working on it currently or they're, or other folks are working on it for those browser makers.
John
It's one of those technologies that actually has complete buy-in from all the major engines. For new--
Jen
Everybody's super excited about it.
John
For significant new features in CSS, there's usually one holdout. I'm not naming any names. Apple (laughs). But in this one we're seeing buy-in right across.
Jen
Usually you'll see one or two browsers really want it and put it in, and the other browsers are like "Welllll, we don't, we don't, "priorities, engineering, resource constraints."
John
Wheras this one's really got buy-in.
Jen
This is like everybody wants it right now.
John
That tends to be a good indication of what will really happen. I think if you get buy-in right across the engines you're pretty safe in knowing that that thing is gonna happen.
Jen
The thing is though, that there's this thing called subgrid.
John
Yes. Which isn't gonna happen, I believe.
Jen
No, I think it is gonna happen.
John
Oh it is?
Jen
And I think it's gonna delay grid.
John
Because it adds a lotta complexity from an implementation--
Jen
It might add a lotta complexity.
John
Right, okay (laughs).
Jen
Some implementers believe--
John
Certain people are saying to me that--
Jen
Yes, certain people believe it's so complicated that it's impossible and we shouldn't even bother. But, uh.
John
Hey, computers can beat humans at Go now, we can do anything right?
Jen
Well, so here's the deal. This is true with flexbox as well. Flexbox and grid both work, unlike the third-party frameworks, a third-party framework, you define a grid, basically any object, any part of the DOM any div, any paragraph, any aside, anything that you've got in the DOM you can apply a class to, or use some Sass to target, and you can lay it out on the page. With grid and flexbox, there's this limitation that people are gonna really hate, which is you can only apply that technology to the direct children of the flex container or the grid container. So say you have an article and you said "Okay, this article is gonna be a flex container, "or this article is gonna be a grid container," then each of the main items underneath like, the direct children of that article you can totally lay out on a grid. But none of the grandchildren can be laid out on the grid.
John
Right, and so subgrid would allow, would be for descended elements to be laid out on the same grid.
Jen
Because without subgrid, what we have to do is define a second grid, a third grid, a fourth grid. And a lot of people, especially people who are coming from the editorial design background from real graphic design, are gonna wanna not technologically implement a grid, but they're gonna wanna design a grid. Like "Ohhh, let's use a golden ratio for this one, "and we'll arrange our columns in this order, "and here's my grid for my page, "here's my drawing, my sketch that I did, "here's all the math. "Now we need to implement it in code." Well you're gonna define it multiple times, you have like a wrapper div and you define it there, and then in the article you have to redefine it, but that's actually a percent of the outside. Like, the math is gonna get insane very quickly.
John
If you're a CSS developer.
Jen
Yeah. It's just gonna get messy.
John
So we wanna shift all that responsibility onto the browser people, it looks like?
Jen
We want the browser to do that work, we don't want the humans to have to do that work. And I feel like, and a lot of people, Eric Meyer and Rachel Andrew as well, feel like a lot of really bad hacks will start to creep up. People will start stripping markout out, because they'll say "Oh, it only works on the direct children? "And this should be a grandchild "or this should be a great grandchild--"
John
"But we'll just make it a child."
Jen
Yeah. "Forget it."
John
Or bring it up a level.
Jen
"We'll just remove all of the ARIA roles, "we'll just remove all of the accessibility markup, "we'll just remove all of the..." That's terrible.
John
So if there's one thing that will hold up adoption or widespread roll-out in browsers...
Jen
Yes.
John
Will be this issue of subgrids.
Jen
And you know, there's a bunch of us who've had a debate, there are some people who think that subgrid, 'cause as subgrid has been discussed so far, it's incredibly complicated, so "It's getting super complicated mathematically, "maybe it's impossible." There are other people who think "We don't need subgrid to be able to do "every single solitary use case, "edge case, possibility ever. "Let's limit what's possible with subgrid. "Let's just think of the main use cases, "the main reason we need subgrid, "and let's just implement a tool "that just does that and doesn't do everything crazy ever. "Just does the two things or the three things "that we need, really really really badly." Well, that spec hasn't been written yet. So several people who are writing the spec have clear ideas about what they think it should be, but that's what we need to have happen next. Those people need to actually write it down on paper, and the group needs to discuss whether or not its possible. And my hope is that a lot of the implementers who are skeptical that it's possible or fear that it's gonna be too hard, will look at the new ideas that haven't been written down yet and go "Oh yeah, you know, maybe you're right, "that wouldn't be so hard, that we could do." I don't know, I don't understand exactly how a browser implements, I don't know how to write a browser or build a browser, (laughing) I know how to build a website. So we'll see, we don't know what happens, but I hope we can come up with a simplified version of subgrid that's not so hard to implement. And I am one of the people who believes that you know, maybe we could get grid shipped this fall, but grid with a simplified subgrid, we're gonna have to wait until next spring and we'll have to wait until next summer, sometime in 2017. I think we should wait. I think we should wait, even though I want grid yesterday, I think we should wait six months more to get grid with subgrid from day one.
John
Alright. So just to wrap all this up...
Jen
Yes.
John
What we learnt is just go and use flexbox today.
Jen
Yes.
John
It's usable, it's shipping, it's working, everyone's bought into it. It brings us stuff that, especially if you're doing lots of page layouts with floats, you can do much better, much cleaner layouts.
Jen
And maybe you won't do your whole page with flexbox. Maybe you'll use flexbox in certain pieces, and maybe you'll still use your bigger, Bootstrap or whatever, for your main page layout.
John
For grid, it's coming, there's a lot of buy-in, there just seem to be some final implementation details that might be holding it up for some months.
Jen
But people could start learning it now.
John
Right.
Jen
I mean, I do think it's gonna take time to learn, as I've started learning it and I still don't understand a lot of it, as I've started learning it, it kind've blows my mind. And I'm enjoying learning it over several months, not trying to learn it all at once. So I think people should start trying to learn grid now. Because the main parts of grid are not gonna change. We know what it is, people can make stuff with it now.
John
Alright.
Jen
The other tip that I have for people is, because I think a lot of professional front-end developers these days don't actually know how to do a layout with floats.
John
What are they doing!?
Jen
They're using third-party tools. They're using Bootstrap. And so I feel like that's the other piece of homework, is go learn floats, go learn display:table--
John
Go look at the one true layout.
Jen
Go learn inline-block.
John
Inline-block, yeah!
Jen
Because those are gonna still be in our toolkit. We're still gonna use floats, we're gonna use floats with flexbox, with inline-block, with display:table, with grid--
John
I actually mostly don't use float anymore, 'cause I find inline-block solves that problem a lot of the time.
Jen
I don't think we'll float a whole object, but we're gonna wanna float a image and wrap text around it.
John
Actually use it for what it's designed for.
Jen
Use it for what it's supposed to be used for. So I don't mean learn how to do a whole crazy thing with floats, I just mean learn what a float is. Because I think especially once we wanna use grid, we're gonna need a fallback layout. You don't wanna use Bootstrap for your fallback layout, you're not gonna use grid and Bootstrap together. You're gonna use grid and then you're gonna write vanilla CSS for other parts of your layout, and you're gonna need those skills.
John
Alright, well thank you so much Jen. There's a bit of theme that's come through a lot of these conversations with lots of different people over the last couple of days, the core, the basics, the foundations, they're not going away. You know, don't ignore those newer technologies, don't ignore those enabling technologies that sit on top, but certainly don't ignore the fundamental foundational technologies. As you say, they'll be here long after we're gone, for better or worse, but's the reality. So it's interesting that... (sighs) Sorry. So a message that's come through from what you've said, even though we're talking about a very new emerging technologies, it's also come through with my conversation with Sara Soueidan and Russ Weakley and others over the last couple of days is that, you know, all these new emerging technologies are very exciting, all these layers of technology we're working with, these third-party tools referred to are fantastic, but don't forget the foundational elements. Everything is built on those. And it will always serve you well to know those technologies. And then built on top of them, you'll be building a much more stable site, application, whatever your work.
Jen
Yeah, yeah.
John
Thank you so much for that.
Jen
Sure, thanks for having me.
John
You're most welcome, and we look forward to seeing all these things in our browsers very soon.
" ["post_title"]=> string(39) "Video: in conversation with Jen Simmons" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(30) "video-conversation-jen-simmons" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-07 15:03:06" ["post_modified_gmt"]=> string(19) "2016-07-07 05:03:06" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6408" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [13]=> object(WP_Post)#224 (25) { ["ID"]=> int(6406) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-06 13:45:46" ["post_date_gmt"]=> string(19) "2016-07-06 03:45:46" ["post_content"]=> string(3788) "tl;dr; today we launched "The Wrap", an in-depth, session by session wrap-up of our Respond conference, the next best thing to being there. Get your (free) copy now.

The details

I hope that long time attendees and others following along here at Web Directions have noticed quite a few changes here lately (don't worry, a long overdue aesthetic one is in the pipeline too). We've not made a song and dance about our 10th anniversary, rather we've knuckled down and made significant efforts to reinvigorate our events, and much more, to commemorate a pretty significant milestone. Over the last few months we've
  • * expanded Respond from a single day conference in Sydney to a pair of 2 day conferences in Sydney and Melbourne.
  • * held a brand new, successful Government focused conference, Transform
  • * expanded Code, our Front End conference to include Sydney as well as Melbourne
  • * rebooted our long standing Web Directions conference as Direction (more about this in the coming week, as we launch the lineup for 2016)
And that's just the start. We also And today we're launching something I've wanted to do for a long long time, Wrap.

Introducing "Wrap"

Conferences like ours hope to both inspire, and to introduce ideas, technologies and practices that improve the work you do and the decisions you make. One of our goals when we put together a conference program is to provide immediate, actionable value to those who attend–one of my favourite comments I hear from attendees is “I can’t wait to put this into action on Monday morning”. But I also find that as the “high” of attending an event fades, so too can many of the ideas associated with it. This is something we’ve long looked to address, beginning with post-conference podcasts of each conference session (from as far back as 2005, in fact) and post-conference videos in more recent years. Wrap is something new again. With it we’re looking to distil and make available the wisdom and knowledge of each conference, making the experience of attending even more valuable and providing a reference point for when you can’t quite remember what that speaker said. And for those who couldn't attend, it's still an invaluable resource, summarising the key points, ideas and takeaways from every session, and capturing some of the flavour of the event. Ricky Onsman, who has attended more of our events than anyone else, even travelling all the way to Canada for one of our events there, has for some months been working with us as editor of Scroll, and also takes the helm of Wrap. " ["post_title"]=> string(22) "Introducing "The Wrap"" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(20) "introducing-the-wrap" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-06 23:57:46" ["post_modified_gmt"]=> string(19) "2016-07-06 13:57:46" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6406" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [14]=> object(WP_Post)#143 (25) { ["ID"]=> int(6404) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-06 10:28:57" ["post_date_gmt"]=> string(19) "2016-07-06 00:28:57" ["post_content"]=> string(2792) "Atul Gawande is an American surgeon, a writer for the esteemed New Yorker magazine, and author of "The Checklist Manifesto". The book has started something of a revolution in medicine, by introducing an idea pioneered by pilots, the use of checklists to prepare for operations and other medical procedures. It's an idea that has broad applicability (the book looks at various fields of endeavour and their use of checklists) and at Web Directions 2015 in our engineering track, Jeremy Nagel talked about how he has applied these ideas to development. One of my favourite sessions in a long while, well worth 20 minutes of your time. If this is of interest, make sure you check out our Code front end engineering and JavaScript development conference Sydney and Melbourne for much more like this.

Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our once-a-week mailing list where we round up the week's best reading and watching on all things Web. And you'll get a complimentary digital copy of our brand new magazine, Scroll.
" ["post_title"]=> string(59) "Video Ristretto: Checklist Driven Development, Jeremy Nagel" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(57) "video-ristretto-checklist-driven-development-jeremy-nagel" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-06 10:40:41" ["post_modified_gmt"]=> string(19) "2016-07-06 00:40:41" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6404" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } } ["post_count"]=> int(15) ["current_post"]=> int(-1) ["in_the_loop"]=> bool(false) ["post"]=> object(WP_Post)#237 (25) { ["ID"]=> int(6441) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2016-07-26 10:30:53" ["post_date_gmt"]=> string(19) "2016-07-26 00:30:53" ["post_content"]=> string(5035) "Code conferenceWith our Code conference starting in Sydney in just a few days and in Melbourne next week, our Idea of the Week this week comes from the conference's Scroll magazine and its editor, Ricky Onsman. As he explains, you should definitely see what your Sydney and Melbourne code-focused meetups are up to this week and next.

Meetups at Conference Time

by Ricky Onsman Web Directions has long been a sponsor of meetups that have a focus on web technologies. Often, these meetups in different cities around Australia provide an opportunity for conference speakers to test material in front of a willing and supportive audience, in the process helping to promote the conference and also attracting more people to the meetup. For that reason, meetups that happen around the time of a conference event are often exciting affairs, with more people than usual and an international flavour. The SydCSS meetup held the night before our Respond conference in Sydney in April was just such an event. One hundred and thirty of us turned up to the rather cool rooftop bar of the Pyrmont Bridge Hotel on a balmy Sydney early autumn evening, where we found a generous bar tab and regular rounds of tasty snacks circulating through the room. Classy, or what? There was a real air of excitement as the usual buzz of friends and colleagues seeing each other was heightened (literally!) by the spectacular semi-outdoor setting, as well as the awareness that tonight would be graced by two major speakers from Respond. Rachel Ilan Simpson is an American UX Designer based in Munich who works on the Chrome team for Google. Her Respond presentation was to be a version of a talk she’d originally created and presented with Guy Podjarnik, and this meetup would give her the chance to test some of the material solo with a live Australian audience. The topic Rachel addressed was one with which developers and designers alike often struggle: finding the balance between website Usability and Security. Users want sites that can guarantee the security and safety of any information they provide, but they don’t want things to get in their way, like passwords. Rachel took us through several aspects of the situation, looked at some of the core issues, made us cringe at some of the statistics and wince at some of the examples, and offered some ways all of this might be addressed. It was an excellent preview of her longer presentation at Respond itself. The other main speaker was Russ Weakley, an Australian designer, front end developer and trainer based in Sydney who has built an international reputation not only as a CSS expert, but as someone who can make the often arcane world of stylesheets comprehensible even to beginners, while inspiring veterans to look at new ways of using CSS. On this occasion, Russ took us into the world of CSS Property Values and the syntax required to use them properly. That might sound dry – but have you ever seen a Russ Weakley talk? Dry, it was not. He’s a very funny speaker who nonetheless has an excellent grasp of his subject, and that special knack of clarifying things that often look dauntingly complicated. He even came up with a code puzzle for us to solve, with the winners taking home copies of the excellent Offscreen magazine. Both speakers received a very warm reception from a knowledgeable crowd. The post-talk questions and answers were informed and technical, which helped to give the whole evening a comfortably techy feel. As with most meetups, there were short announcements of local projects, opportunities, events and jobs, then a lot of chat until the food and drinks ran out. A top night out. In Melbourne, a similar event took place the day after the conference, in the form of a mega meetup between the MelbCSS, MelbJS and BeResponsive groups. That time, Jen Simmons and Ryan Seddon spoke to another packed audience. Wherever you are, whatever your specialties, it’s definitely worth searching out meetups in your area that focus on your interests - especially when they’re sponsored by Web Directions, and even more especially when it’s conference time.  " ["post_title"]=> string(30) "Idea of the Week: Ricky Onsman" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(22) "idea-week-ricky-onsman" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2016-07-24 22:45:05" ["post_modified_gmt"]=> string(19) "2016-07-24 12:45:05" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=6441" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } ["comment_count"]=> int(0) ["current_comment"]=> int(-1) ["found_posts"]=> string(3) "712" ["max_num_pages"]=> float(48) ["max_num_comment_pages"]=> int(0) ["is_single"]=> bool(false) ["is_preview"]=> bool(false) ["is_page"]=> bool(false) ["is_archive"]=> bool(true) ["is_date"]=> bool(false) ["is_year"]=> bool(false) ["is_month"]=> bool(false) ["is_day"]=> bool(false) ["is_time"]=> bool(false) ["is_author"]=> bool(false) ["is_category"]=> bool(true) ["is_tag"]=> bool(false) ["is_tax"]=> bool(false) ["is_search"]=> bool(false) ["is_feed"]=> bool(false) ["is_comment_feed"]=> bool(false) ["is_trackback"]=> bool(false) ["is_home"]=> bool(false) ["is_404"]=> bool(false) ["is_embed"]=> bool(false) ["is_paged"]=> bool(false) ["is_admin"]=> bool(false) ["is_attachment"]=> bool(false) ["is_singular"]=> bool(false) ["is_robots"]=> bool(false) ["is_posts_page"]=> bool(false) ["is_post_type_archive"]=> bool(false) ["query_vars_hash":"WP_Query":private]=> string(32) "cd15f7c06249973e2ffe0fd408452899" ["query_vars_changed":"WP_Query":private]=> bool(false) ["thumbnails_cached"]=> bool(false) ["stopwords":"WP_Query":private]=> NULL ["compat_fields":"WP_Query":private]=> array(2) { [0]=> string(15) "query_vars_hash" [1]=> string(18) "query_vars_changed" } ["compat_methods":"WP_Query":private]=> array(2) { [0]=> string(16) "init_query_flags" [1]=> string(15) "parse_tax_query" } }

Blog

Morning coffee for web workers News Feed Podcast

Idea of the Week: Ricky Onsman

Code conferenceWith our Code conference starting in Sydney in just a few days and in Melbourne next week, our Idea of the Week this week comes from the conference’s Scroll magazine and its editor, Ricky Onsman.

As he … Read more »

Monday Profile: Yoav Weiss

Yoav WeissThe Code conference is upon us this week! Monday Profile is again with one of our international speakers, Yoav Weiss.

Yoav is a Web performance and browser internals specialist, whose talk at Code focuses on third party content … Read more »

Video of the Week–Jen Simmons: Real Art Direction on the Web

At Respond this year, Jen Simmons gave a very well received session on the current state of CSS layout. A great deal is now possible that never has been before with flexbox, and even more is in the pipeline with Grid layouts.

We finally have the tools necessary to … Read more »

Video: in conversation with Rachel Simpson

With this conversation with Rachel Simpson we reach the end of the first round of conversations we recorded around our Respond Conference.

If you’ve missed my other conversations to date, why not take a bit of time to listen to conversations with

  • Ethan Marcotte
  • Karen McGrane
  • Sara Soueidan
  • Read more »

Video Ristretto: Rhiana Heath–Pop-up Accessibility

Modals and pop-ups can be a really useful tool for displaying additional information or getting users to enter information in a way that doesn’t clutter up your screen. However as yet (one coming soon) there is no official HTML element that lets us display modals in a consistent way. As … Read more »

Idea of the Week: Bruno Škvorc

Bruno ŠkvorcBruno Škvorc is a coder from Croatia, the editor of SitePoint’s PHP channel and a developer evangelist for Diffbot.com.

He also has a keen interest in developers’ health, including his own, and has set up an initiative … Read more »

Monday Profile: Rachel Andrew

Rachel AndrewMonday Profile today again shares an interview we conducted with a Code conference speaker.

You’ll find all these interviews (and a lot more!) in the second issue of our Scroll Magazine.

This week, it’s with Rachel Andrew, whose … Read more »

Video of the Week: Kitt Hodsden–Automation for Developer Happiness

You’ve done what you need to do to create a functioning, responsive, good-looking site that works blazingly fast in your development environment. How sure are you, however, that it performs well for your users? Does it render quickly? Does it respond well to user input? Where are the bottlenecks of … Read more »

Video Ristretto: Warwick Cox–Web Notifications

For some years now, mostly out of sight, a set of inter-related Web technologies have been brewing away. Technologies that address the sort of shortcomings the Web has been considered to have in comparison with native technologies–the ability to integrate more seamlessly with the user’s device and operating system, the … Read more »

Idea of the Week: Ben Buchanan

Ben BuchananOur Idea of the Week this week is another excerpt from Scroll: Code.

Ben Buchanan, Interface Architect at ansarada, has been as ardent a supporter of Web Directions as they come, for as long as we’ve been around. He wrote this … Read more »

Monday Profile: Tim Kadlec

Tim KadlecIt’s only a few weeks until this year’s Code conference, so Monday Profile is going to start sharing some of the interviews with our presenters you’ll see in our Scroll: Code magazine.

We’re going to start with Tim Kadlec, web … Read more »

Video of the Week: Eric Elliot–the two pillars of JavaScript

As we get closer to Code, our Front End and JavaScript focussed conference, we’re digging up some of the best presentations from past conferences focussing on these topics.

At Web Directions 2015, Eric Elliott talked about what he calls “the two pillars of JavaScript”: Prototypal Object Orientation and Functional … Read more »

Video: in conversation with Jen Simmons

Jen Simmons
Jen Simmons hosts the very popular The Web Ahead podcast, is on the W3C CSS Working Group, works as a design advocate at Mozilla, and has 20 years working on sites for the likes of CERN, the W3C and Google.

Her current focus … Read more »

Introducing “The Wrap”

tl;dr; today we launched “The Wrap”, an in-depth, session by session wrap-up of our Respond conference, the next best thing to being there. Get your (free) copy now.

The details

I hope that long time attendees and others following along here at Web Directions have noticed quite … Read more »

Video Ristretto: Checklist Driven Development, Jeremy Nagel

Atul Gawande is an American surgeon, a writer for the esteemed New Yorker magazine, and author of “The Checklist Manifesto”. The book has started something of a revolution in medicine, by introducing an idea pioneered by pilots, the use of checklists to prepare for operations and other medical procedures. … Read more »