The future of style

The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS) [not development with Cascading Style Sheets]. While it is hosted by the W3C CSS Working Group, the content of the individual entries represent only the opinion of their respective authors and does not reflect the position of the CSS Working Group or the W3C.

Latest articles

Video: In Conversation with Russ Weakley

Source: Web Directions Blog John • 30 June 2016 01:41 AM

Russ Weakley: Dao of the Web Episode 4

I really enjoyed these conversations we did with speakers at Respond a few weeks back, and I’m equally enjoying returning to them, editing them a little, and listening to what these wise, intelligent and generous contributors to our field have to say.

If you’ve missed them to date, take a bit of time to listen to conversations with

But this week we have the very first one I recorded, which I feel is entirely fitting. It’s with Russ Weakley, a huge contributor to the Web design profession not just here in Australia, but globally. It’s particularly fitting since Russ, Maxine Sherrin, Peter Firminger and I together started an event called Web Essentials back in 2004, that became Web Directions.

We talked about accessibility, about how the role of what we now call front end developers (or do we?) has changed in the time, and what the future holds for us as Web professionals. There’s the obligatory discussion about voice interfaces, jetpacks and the future of interaction, and much more. I hope you enjoy this really great conversation with Russ Weakley.

If you’d like to know more about Russ, we featured him in our Monday Profile this week, or why not grab a copy of the digital edition of Scroll Magazine, where the profile also appears?

And lastly, if reading’s more your thing, there’s a full transcript below.

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 I’m here with Russ Weakley in the very, very first- possibly last (laughs) – conversation over coffee or other beverage as it happens to be with folks who I find interesting in making great contributions and in many cases, have made great contributions over a long period of time to the web. So, Russ … Russ and I go way back and there’d be long stories around that that we can probably have over a glass of wine or a whisky.
Russ
1952, I think it was.
John
1952, that’s right. (laughing) See, young people probably think we’re not joking at that point. One of the things I’ve admired about Russ over that period of time is his focus on accessibility as a core part of the web. That’s something that since I very first met you in the early 2000s has been an important focus for you. Did something lead you to accessibility or how did that come about?
Russ
Yeah. Failure, dismal failure. So I think we also jumped on the web standards bandwagon in 2002, somewhere around that, and you sort of you were doing it right. When I remember going seeing my first blind user and watching them pull apart my website and the code and tell me how appalling it was and humility made me realize how badly it was written, so I suddenly decided that I had to learn it better and hooked up with people like Roger Hudson, who’s one of Sydney’s sort of penultimate accessibility gurus, but here it was just basically through realizing I knew nothing about it, and watching real users using codes. Things like that really helped.
John
Through the empathy for your user, and suddenly realizing I’m…
Russ
Well, I don’t think originally it was empathy, it was humiliation, eventually it became empathy. (laughing)
John
You just had to get out of the humiliation part.
Russ
But yeah, just watching simple things like, in those days we were obsessed with lists and realizing that this blind user was just saying, “Why are there so many lists on the page?” You know it’s simple things that you realize when you’re watching a real user that you, you know, you really need to change the way you work.
John
So, I guess when you or I were doing a lot of web work in the early part of the 2000’s, it was very much a point of focus, I think, we took pride in testing against the very standards for accessibility. People shared ideas about how to improve the quality of that. I generally don’t feel that that’s something that’s so important anymore to people, but what’s your thoughts about that?
Russ
I think it depends on who you speak to and the teams you’re in. So I think, we’re probably going to do this a lot, but it’s concept of a stack overflow developer. Do you know where you’ve heard that term, a stack overflow developer?
John
Absolutely, yeah I think there’s a whole book on it.
Russ
Oh, is there? So that there’s… Where I worked at the bank recently, there was a lot of young developers coming in, and they were handpicked to be craftsmen in the latest trends, so highly proficient in react, and could always, sort of, very modern job of script frameworks, and because these young guys, young people, just constantly on the move with these these young frameworks that are constantly changing, I think they’ve lost, there’s a big gap in basic knowledge. And it’s not just accessibility, it’s fundamental HTML, fundamental CSS practices. I would sit beside a young developer, by young, I mean, new in the field rather than ageist order, but just watching them literally have no idea about how to do basic mach up. So, their world was copying, pasting from stack overflow and constantly, agiley moving through code, but really not understanding that you couldn’t put an h1 round or div or, you know basic, things like that. So yeah, there’s somewhere along the way, just with the rapid progress of the way, we’ve lost, a lot of people just don’t understand, and also don’t appreciate, basic things like understanding what HTML is. Would you agree with that?
John
Look, I do, I do have a lot of empathy. I mean, when people like us started you could become a, well, you could be a world expert in CSS in about three weeks, because it was only about four weeks old. (laughing) There was a period when I probably knew more about CSS than almost anyone in the world because I had about a weeks head start. So, whereas of course, now, as you say, there’s a considerable need to learn an enormous body of knowledge, particularly around specific frameworks. And that’s partly, I guess, because people are, you know, (mumbles) is asking for expertise in specific frameworks and technologies.
Russ
Full stack, everything’s full stack.
John
Full stack, of course. But, of course, that doesn’t include, as you say, the core foundational technologies, so.
Russ
So the bottom of the stack is missing, that’s the problem.
John
Right.
Russ
Which is basically, HTML, no one cares about that so, the bottom of the stack I should say, you should actually also understand how a div works, unfortunately that’s not put in there.
John
And I guess on one level, people produce potentially fragile and not particularly stable code, and that’s bad enough, but on another level, we’re producing things that are inaccessible. And it seems to me, you know, once upon a time what we asked the web to do was pretty straight forward, right. It was to convey some basic information, it was very informational, it was marketing, communications teams with the old web, as to the extent we interacted at all was maybe to fill in a form and send it off. You know I remember, you’ll remember very well, the Sydney Olympics, when the tickets were available online, and that was a pretty complex, sort of web, what we now call application, and of course, it was inaccessible and it led to.
Russ
Well that was actually just tables but yeah, I know what you mean, it’s fundamentally, that one failed, but yeah, that was way before the days of rich web application.
John
But, whereas now, we’re asking the web to do so much more. we’re asking it to provide so much more interaction, and yet, we seem to be less and less concerned, in some ways, that it’s fundamentally accessible.
Russ
Inaccessible, yeah.
John
Yeah well, less concerned that it is (talking over each other) that it is inaccessible or that it be accessible. What are we going to do about it? What do you think, what are your thoughts about that?
Russ
That’s a hard one, I think, yeah you’ve got to look, I suppose, at the industry and I think there’s problems in around the way we define roles, and there’s problems in the way we understand the roles, and also just this feed, I just think that, I mean, you said off the cuff before this idea that we’ll always be in a job because there is that gap. You know, worked in banks to help people in that area because they didn’t have the skills, so on one side, you can say that it’s good that gap there, but i don’t know how to figure that, because the speed is ever going to increase. Like three weeks from now, there will be a totally new Java Script framework, and, you know the gap will get wider they’ll have to panic quicker, and they’re being asked to produce more quickly. I don’t know where we stop and try and fix the problem.
John
I guess one of the hopes I had is as we standardized on particular frameworks or a small number of frameworks get applied to solve specific problems, why aren’t we baking better accessibility into those. Lots of people are using Bootstrap, lots of people are using React, why is it? The more we bake accessibility into those frameworks and those libraries, surely the easier it makes accessibility, and it doesn’t seem to be what is happening.
Russ
Yeah, it’s a very good point, and, again, it depends on who you speak to. There are people who work with the accessibility Bootstrap would argue that Bootstrap is fundamentally accessible. Now on some level they’re right, but when you look at the way it’s applied, I mean the quickest example would be that you can apply a button class to a link or button, so that means that you could use either, so people will just slap one down and not really care, but fundamentally there’s a huge difference between a button element and a link element, they have a different purpose. The biggest one though is there’s a drop down menu and it’s a button with a drop down attached to it, and that is fundamentally inaccessible in terms of the way it’s being used. So, select menus are really hard to style so people put this button element there that looks like a really sexy, easy to style select menu, but now you’ve lost all of the accessibility, the default accessibility attached to a select menu. A lot of it comes down to the way they’re being used, rather than the core things being accessible.
John
However that is a core.
Russ
Yes, it’s a core problem still.
John
It’s a core piece of interaction. So, it’s something people use over and over again. So, anyway, this, I guess is our call out to people building those frameworks and libraries to really think, as much as possible, around accessibility.
Russ
I guess it depends where it stops though too because another example I’ve seen a lot is you make a, Bootstrap has a model, where you pop open a model, rightly or wrongly, people using models, and there is, as you said, baked in accessibility there. But people copy and paste that code, and so, for example, there’s like an array label, which is saying, this is attached to this, but if you just copy that and paste it, and don’t quite get it right, which I’ve seen people do all over the place.
John
You’re attaching something else. (talking over each other)
Russ
Which doesn’t exist, so it’s looking for a description for the model which doesn’t exist. So the people are trying, I think, to put it together, but there’s still a basic lack of understanding about simple array and what that label is doing and why it’s important. So I don’t know where it sits with the, if it’s purely with the framework developers, or education around them, or just people should know more about array, if you’re doing rich app sequence.
John
It does surprise me that ARIA, which I’ve been a strong advocate for, for a long time, is not as well understood, nor is widely understood, given it’s not particularly complicated, it’s technically not a complicated idea. You essentially label things with the role that they play.
Russ
Theoretically, yeah, but is fraught with all the perils of, you know, anything that’s began, it was introduced after WCAG 2, it wasn’t originating WCAG 2, it was introduced later so sufficiency techniques are sort of gradually coming in, which weren’t up there originally, so people that began with WCAG 2 are sort of having to relearn. And it wasn’t supported early, and it’s also got bugs. Like at the bank I sat day in day out using different screen readers in different browsers and watching all the different flaws of a simple array label, how well it was adapting. So, theoretically yes, it’s basic, but lacking. I think it’s like the early days of CSS, remember when we’d build something and you’d have to build it six ways for six browsers, (talking over each other) I think that array is still, there are parts of it that are very rock solid, but there are still parts of it that are a bit hairy around the edges, so yeah.
John
So it’s not magic. It’s not going to solve away our problems.
Russ
No, I mean there are things that are beautiful and do solve things really well, but there are things that are a little less beautiful and magical.
John
So I’m going to jump to something completely different. I’ve got a real thing, you know me, I have lots of things, so one of my things is voice interfaces, and if you go back to movies of the past about the future, often the way we interact with computers is using voice. Bill Gates has been obsessed with it for years. It is the future of how we’re going to interact with things, and indeed, only recently, the CEO of Microsoft talked again about the future is voice. Now obviously, on one level, you’ve worked with a lot of people and seen a lot of voice interfaces, screen readers reading to users, but not necessarily people speaking to computers. I’m just wondering, you know, what are your thoughts around voice? Is it a technology, do you think we’ll eventually replace tap and touch and typing and mousing or do you think, is it about specialized uses or is it just one of those technologies, what I call jet pack futurism, which is a vision of the future we always have, but never seems to arrive and we then sit back and think, well why don’t we have jet packs? What are your thoughts about voice?
Russ
Probably a lot of different things actually, I think that for some audiences it would be better. People with all the different motor skill issues, you know, they can’t move their hands or that sort of thing. Voice activation is already in place for a lot of them, but very crude.
John
And do you find, for example, Siri and Cortana and those other sort of technologies, are people with those sorts of disabilities, are they using those technologies. Are we seeing that happen? Is it being valuable for them?
Russ
Very interesting question. I’ve watched a lot of people, the the blind community, which you know, being a bit extreme here, very sort of anti Apple when it first came out, but as soon as voice over came in the uptake of IOS devices just blossomed. So, the voice over itself, got really good support, but as to theory, I haven’t actually tested that at all so I’m not sure how well supported that is.
John
I read recently, something a while ago i bet, again, only because it conformed to my preordained expectations and beliefs, after several years of Siri, only 15% of Apple, you know of IOS users, had even used it, let alone used it routinely. It seems to be one of those things that people don’t quite, and I’m wondering whether, is it, do people feel a bit weird talking to at inanimate object, except when watching sport, obviously, when we shout at it.
Russ
(laughing) Yeah, we shout at a screen.
John
You know I always had that vision of rooms full of like, the open plan office with all these people just talking at screens, like this babble coming out of it, (taking over each other)
Russ
There’s other problems as well like it’ll benefit some users, but will be problematic for others, like people who can’t talk, obviously, people who have speech impediments. You know there’s going to be all sorts of interesting… You know once you make something accessible to one group it’s going to negatively affect another group, so there will be all those, sort of, issues to run back as well.
John
I wonder with it too we will optimize voice recognition for certain languages because like wise,
Russ
American.
John
Yeah that’s right, we’ll be all speaking American. Every time I go to America and order a coffee, they think my name is Shawn, because John and Shawn, and so I just, if I want, to the extent that I care, if I want them to actually write my name down correctly on the Starbucks coffee,
Russ
You say Ja-hn.
John
Is I say Ja-hn, of course, so I do wonder whether we will all end up speaking with accents that will reflect the fact of what Siri or Cortana or other technologies will actually recognize.
Russ
I think your point about the jet pack, I just see us all sitting there going, “Open, open, open!” (laughing)
John
Well there’s a scene in Bladerunner, I think this is a great example.
Russ
Was it involving ants?
John
(laughing) I don’t think it’s that one. There’s a scene where he’s zooming in on a photo on a television screen, and if you watch the process, people should go and watch this, this is really, this is one of my arguments against, certainly ubiquitous use of a technology that like pinch zoom would be loop, He literally takes about a minute, because there’s no zoom, back, nope, like he’s just, He’s not even getting it wrong, it’s just the zoom in cut, and then he says crop and cut and then he prints it out.
Russ
I remember that scene where I found interesting is, this magical, extra pixels appeared each line after.
John
That’s right, like what are they using to code this thing? But it does strike me as a great example of that, sort of technology, that sort of, it demos well, it sounds really sexy but once you start actually seeing it in practice. Anyway, so I thought I’d, I’m going to ask this question of multiple people, maybe it’ll become my little stock, standard question to ask.
Russ
Be interesting to hear the comments.
John
Yeah, see what the even thoughts around it. But yeah, I have been saying for several years, I’m not convinced that we will see wide spread adoption of voice technologies. (talking over each other)
Russ
Are you talking in two years, five years or?
John
Right, right, well it’s a bit like artificial intelligence, so it’s about five years off. I certainly see in the car, for example, or even perfect example, obviously very dangerous to use, devices when looking at them and even touching them when, in theory, it’s less dangerous to talk to those devices and yet, we haven’t really seen wide spread adoption. I think there’s more investment in cars that drive themselves than controls we can just activate with our voice.
Russ
That makes more sense, it’s skipping the middle man, the middle man is that we are idiots as drivers.
John
Turn left, turn right, no, stop!
Russ
Fundamentally as humans we are bad drivers so, what good was that,
John
Oh I couldn’t agree more. but it strikes me as that is managing a more difficult problem than simply saying, “Can you turn the sound up please.”
Russ
But you see their logic’s like, basically, humans are wrong. Let’s go to the problem which is let’s drive the car for them.
John
And then we can just use our hands while we’re not watching the road.
Russ
See then you don’t have a problem anymore.
John
That’s right.
Russ
We can tweet while the car drives.
John
Yes, then we’ll all get motion sickness, and who knows, so. So you talked about that question of like, time out in the future. I always like to, sort of sometimes stop, and so, you know you and I first started talking about these things kind of over ten years ago. Does the world, or the web, feel an awful lot different to you from that time? If you were to go back to yourself back in 2002, rather than inside invest heavily in certain shares like Google, what were the things that you would alert yourself to, in terms of how the world was going to change?
Russ
I don’t know, its too hard a question to answer. I think fundamentally it’s so different, it’s impossible to. (background talking)
John
The job we did, they’re fundamentally different now, right?
Russ
I did a talk awhile ago and it showed this simple little diagram of what I used to do and then what it became, what it became, and that idea was that when I started there was a webmaster. I worked with a few of them, and they’re all bastards, they were horrendous human beings.
John
Well they identified as masters, you start there and (talking over each other)
Russ
They were these horrendous human beings.
John
Well you had to do everything, like you had to know how to do the web server.
Russ
Everything.
John
You had to know how to optimize GIFs.
Russ
And because they knew everything, they were arrogant.
John
The book was only about 150 pages. That was it, you could be the webmaster.
Russ
And know everything about the web. Everything about the web.
John
Literally from end to end.
Russ
So I came along in the very early days when there was no web designers and I was attached to these webmasters, who hated me, because I made their web pretty. You see what I’m saying, there were like two or three roles, and in CSS, I mean you were in it earlier than I was but it sort of gradually, bubbled up around 2000, 2001, and that became sort of like a different industry again, but then it sat for a long while, 2007 to 2008, was a long period of quiet.
John
So what changed that? Do you think the IPhone, IPad?
Russ
No, I reckon it was the abstraction of CSS, when we started to go to things you’d hate, like blueprint. You know we’d started to use frameworks that suddenly changed everything about what we did.
John
So how did that change? Did it make us more productive, in a sense, could we go do more and more quickly.
Russ
Yeah, that simple idea that instead of, literally every time you’d start a job, you’d build from the ground up. You could take this package, rightly or wrongly, unsematical, whatever, and just quickly build anything from simple websites to massively rich applications. All the interfaces were tested for you so, you know you didn’t need to browser test to the same degree.
John
And I guess browsers go sufficiently better that we’d never. We did spend a lot of our energy trying to make different things work across different browsers.
Russ
Oh yeah, actually, that’s a very good point, it was a number of factors, it’s never one thing. but I think abstraction of CSS, the frameworks, and also the sudden blossoming, everyone let go of Internet Explorer, those are the things all combined.
John
That sense that every website had to look the same in every browser. The reason why I brought up, particularly the iPhone, and then the iPad as well, is if you look at when responsive web design really, well got a title and took off, 2010. What’s interesting, in the previous three to four years, you had the iPhone and then the iPad. Remember the olden days, all the boss wants to talk like this and that’s (mumbles) You were always trying to install the browser you wanted the boss to use so that they didn’t look at it in the browser you didn’t want him to look at. It was always, “Oh, the boss wants “it to look the same in this.” so suddenly you put all of this effort into that because we had this idea that web has to look the same on every browser. Suddenly, I think the boss has the iPhone, that whole idea fell away, almost overnight to an extent, because it didn’t even make sense. I mean, it made sense sort of, that every browser and every, you know, roughly speaking there was 800 x 600, but the differences between, we always talked about the differences between mobile web and so on, but when it really arrived in 2007, 2008, 2009 as people started adopting smart phones. I think it went from being this abstract idea that the web could be anywhere, all these different devices and all. The stuff we talked about, even in the 90’s, actually became real, so.
Russ
Yeah, I suppose all this played a big part in it. It’s weird though because I still, when I was at the bank a year and a half ago, they were still trying to do pixel perfect things across browsers.
John
Really, and then what would happen? Was there a person who’s job it was, it’s like that pixels out of?
Russ
No, it was even better than that, they had written a script, this is just a staggering, there’s a script written with a bit of testing software, which is gone from my old brain, which would literally measure text screen shots against all these different browsers, and measure pixel accuracy and then could flag that this one was 15 pixels, this element was 15 pixels off.
John
I mean there’s value in regression testing. (talking over each other) (laughing)
Russ
But that was insanity.
John
So that, yes, so that has finally died
Russ
Not necessarily.
John
Well, yes, well hopefully.
Russ
That was only two years ago, that’s still there. But, yeah, I agree, fundamentally there’s been a let go, but there’s still pockets of people that are still desperately trying to hang on to the old.
John
You know, the one thing that is common in all of this, everything we’ve talked about, is still this piece of technology called the browser. Somehow this thing is still there. Are we always going to have browsers or is that thing?
Russ
My god, that’s (mumbles). I can’t answer that, you’d probably, you have more
John
I have thoughts about it.
Russ
Well what are your thoughts?
John
Well, I sort of think we’ll fall away. I mean, it comes down to this interesting phenomenon that we’ve also in the last, four or five years in particular, seen the rise of apps and particularly, I mean when I say apps I mean Facebook. (laughing) No really, I mean they do, and then what we’ve seen is, people kept saying these statistics are out, mobile used it. 85% of all mobile users are using apps, right? Well, if you really look at it, probably about 78% are using Facebook, but are very high percentage of that Facebook use, certainly many tens of percentages, I think, maybe as close to 30%, 40%, is actually the embedded web browser in Facebook. So people are looking at web content, into web content, but it’s in Facebook.
Russ
So what your essentially saying, you’re saying the browser will be there but be less obvious?
John
Well I think two things potentially, I have this feeling that, we’re seeing this fragmentation of platforms, like hardware and software platforms. So once upon a time there were Mac and Windows, well there’s really Windows and Mac right? Now we’ve got desktop and laptop and tablet, and within them you’ve go fragmentation. But then suddenly we’ve got wearable devices and suddenly we’ve got embedded devices in our home.
Russ
You forgot the fridge.
John
And we’ve got fridges. You’ve got all these things that, maybe they should or maybe they shouldn’t, that increasingly are internet enabled. Some of these don’t have, I mean, the classic internet fridge has got a screen and it’s a silly idea, but it’s not a silly idea to have an internet enabled fridge that might be testing air quality and temperature and reporting back to base. In the industrial world that’s been happening for 25 years right? So it seems to me, there’s two possibilities around these, and one is that we see this hyper fragmentation and if you want to deliver applications into that fragmented landscape, you just write the same application or variances of it all these different times and all these different languages. I think at some point that just breaks down. I think we’ve even seen that with wireless and android. My feeling is the web will be this layer that sits on top of that fragmentation.
Russ
Yeah, and in their delivery mechanism.
John
Yeah, and not just simply as the internet has become, people forget that there were lots of proprietary as well as well as open networks, and the internet basically became a network of networks, that sort of, almost layered over.
Russ
In fact, it was the information super highway.
John
Oh, indeed (laughing) the information super highway, which we’re still waiting for, I think. So my feeling, to answer the question that I asked you, when you kindly asked me that, I feel the browser, to some extent will fall away. the technologies of HTML, CSS, JavaScript, (mumbles) that stack of technologies will be embedded in lots of places. And maybe there are places that won’t have screens but they will still use those technologies. I mean, we’re seeing devices that basically use JavaScript in hardware as the programming.
Russ
I see where you’re going. You’re saying that we’ll all be in Minority Report and we’ll be throwing, with gloves, we’ll be throwing them up on.
John
Well that’s all a question of user experiences that I don’t necessarily, I think Minority Report is another great example of jet pack futurism. (laughing) But I am interested in what technologies, and I have been an advocate for many years that people should just learn JavaScript, because it is this enabling technology.
Russ
We lean up to a side note to that, one thing that I found fascinating is how that impacts people. Like I was doing testing with a guy on a big drug company site after the Facebook really has taken off, and this idea of navigation, you know like in the old days, top navigation was very common, and we tested a range of people and we found that none of them were using the top nav, and there was this weird thing, that when we asked them what it was, they had no idea. Then it hit us, their web is Facebook. There’s no concept of home, like it was this one page sort of thing with the interacting.
John
How old do these people tend to be?
Russ
These were elderly people, these were people who were testing theory and standards.
John
Right, were they potential people who came relatively late to the web, and they came in through (talking over each other)
Russ
Not sure about how far to unpack this, you can test, it was really just that, we noticed that for the first time in years, I did a lot of testing, the first time in years, this idea of a top nav had suddenly become a foreign concept, that they were much more interested in the home button and what would happen on the page, as if the page was more interactive. It was really a fascinating thing that something that was so commonly understood has possibly fallen away.
John
Well, because I guess it harks back to the menu bar that’s always been at the top of Windows or at the top of the screen in the Mac, whereas a mobile device, see, maybe that reflects the mobile device and the great debate about the Hamburger medium, which we won’t have today.
Russ
(laughing) Yes, thank God.
John
Which is just sort of, essentially a drawer to stuff all the features we otherwise wouldn’t. So are we moving towards a simpler model I guess, to an extent, potentially of interaction.
Russ
Of interaction, no, no. You were saying that everything’s breaking down, everything becomes harder.
John
To every bit becomes harder.
Russ
Yeah, and I think your point is really valid, I think there’s a period where we naively thought responsive web design, I think it’s a great thing, but it sort of began a slightly flawed mentality that one thing can do everything. And then we started to realize from a UX perspective that was incredibly flawed. If you’re on an iPhone, you need to operade in the most native way you can, regardless of how it’s built just from a UX perspective, you want it to be iPhone-esque if your on, you know like…
John
Yes, to reflect the platform that it is on.
Russ
Yeah, so that idea of one build goes everywhere just will fail more and more as we go into this world that you’re talking about.
John
So do you think, I mean, we’ve definitely been seeing a movement away from m-dot, style sites, towards a responsive.
Russ
You’d have to explain to your audience what that means.
John
Well I’m hoping our audience, maybe they’ll all know, like if you’re viewing this in 2075 in the far distant future.
Russ
I reckon there’d be a lot of people who wouldn’t know what you mean by MDOT is.
John
Is that because people aren’t doing that, or?
Russ
No, it’s gone, it’s dead.
John
Oh no, there’s still, a lot of sites still do it. (talking over each other) But have I made a mistake? All right, so MDOT being, of course the idea, that you sense on the service side what sort of device is come to ask for resources and you serve up completely different resources and therefore different experiences on different devices.
Russ
Having said that, I love, and I can’t pronounce his name, Luke Lebowski? Help me out here.
John
Wroblewski.
Russ
Thank you, I remember years ago big on responsive, and then he talked about RESS, and that changed my world, responsive and server side, because then you get the best of both worlds.
John
There’s really two different challenges here, there’s experience challenge, the right experience, and then there’s the engineering challenge of delivering the resources, and so, I sometimes think we sort of bundle them all together rather than unpacking those.
Russ
Which is why I think RESS is the ultimate solution, fundamentally it’s a responsive website at its core but you can use server side sniffing to say, “Actually, I’m going to leave a list, “I’m not going to throw all that JavaScript there.” (audio cuts off)
John
So Russ, you’ve been doing this a while, I’ve been doing this a while, you’ve alluded to a lot of people who’ve been in this industry a lot less time then us, and often, know a lot more, certainly in various areas, can we keep going, have we still got something to offer? Should we maybe retire, if we could afford to? What’s your feeling about, oh you know, does this really excite you, do you find you’re interested in different aspect? Where’s the next few years going to take you?
Russ
Yeah, well I think it’s a question, that it hits people that have been in the web for longer, more than you agree, because they’re coming out to already fitting descriptions that the web uses now, so I know I’m not a front end developer. I don’t know full stack, front to back so I can’t call myself a front end developer. I do a lot of UX and accessibility and I do parts of front end, but I can’t label myself exactly in those terms.
John
So, you struggle to fit into these holes in the industry.
Russ
I work in places where I fit, but just in pure industry standard, I don’t fit into label, and I speak to a lot of people who have grown up in our era, you know, a lot of people used to come to (mumbles) because at some point I went in a panic and thought what the hell is the future, and I rang around a whole bunch of different people, and from that same year have all found similar problems, that they, you know, they’re very confident in their skills but they’re not sure exactly where they’re fit in to these newer models. Also, to some degree, it’s like panic of at the speed it’s going will I be relevant? I haven’t had to worry as much about it because I can always switch, I do a lot of UX and private accessibility, so it’s weird that even though front end, that was my biggest passion, (mumbles) CSS,
John
You taught a great many people to do it well.
Russ
And I consider myself a front end developer, even though it staggers me how little people know about HTML and CSS, learning is now something else. It’s almost like need this other mini description, separate to what they now (mumbles) It’s a fascinating time, the world’s changed, there are times when, you know I worry about it, but generally there’s always work out there. I think I’ve been one of those who don’t quite fit into the exact roles of how all jobs are defined.
John
But the interesting thing is I think those who came into the web at the time we did, probably did for that very reason. We were odd creatures who sort of followed an interest when there weren’t really job descriptions and you sort of had to be master of all trades or jack of all trades at least.
Russ
Later, I think, you know things settled down into industries, and even that’s changing all the time. I think front end to me, is the biggest change, it’s shifted radically from where it was. UX hasn’t, you know it’s become more fun and more professional it really hasn’t fundamentally changed, but front end, in particular, and I don’t know, back end may have as well, but front end to me has radically shifted in it’s description and it’s goal.
John
Well here is to you fitting in for the next ten years. (laughing) I share your pain, yeah, you’ll be here for the next ten, (background talking) no, not five minutes, that you Russ for kicking off this series, which I hope will run for the next ten years but probably won’t.
Russ
And thanks for the flat Diet Coke. (laughing)
John
You are most welcome. All right, we’ll see what…

The post Video: In Conversation with Russ Weakley appeared first on Web Directions.

Minutes Telecon 2016-06-29

Source: CSS WG Blog Dael Jackson • 30 June 2016 12:22 AM

Full Minutes

Minutes San Francisco F2F 2016-05-11 Part II: Scroll Snapping, Color, Grid, Flexbox, Inline

Source: CSS WG Blog Dael Jackson • 29 June 2016 12:05 AM

Scroll Snapping

Archival Copy of the Change Proposal being discussed available here

Full Minutes || Spec Referenced

CSS Color

Full Minutes || Spec Referenced

Grid

Full Minutes || Spec Referenced

Flexbox

Full Minutes || Spec Referenced

Inline

Full Minutes || Spec Referenced

Minutes San Francisco F2F 2016-05-11 Part I: Step Sizing, CSSOM View, CSS Text 3 & 4, Logical properties and margins in vertical text

Source: CSS WG Blog Dael Jackson • 29 June 2016 12:03 AM

Step Sizing

Unicode Converter v8

Source: ishida blog » cssr12a • 28 June 2016 04:50 PM

Picture of the page in action.
>> Use the converter

An updated version of the Unicode Character Converter app is now available. This app allows you to convert characters between various different formats and notations.

Significant changes include the following:

Many thanks to the people who wrote in with suggestions.

Idea of the Week: Jessica Edwards

Source: Web Directions BlogJohn • 27 June 2016 11:45 PM

Jessica EdwardsJessica delivered a very well-received presentation at Respond 16 on advanced CSS image techniques, rather precociously titled “Farewell, Photoshop”. A section of this talk focused on using Blend Modes in CSS, and Jess wrote us an article on that for Scroll Magazine.

Since CSS blend modes were also mentioned in a couple of other presenters’ talks, we figured it was worth giving the topic a bit of extra love by making it our Idea of the Week.

You can also read Jessica’s article in the first edition of our rebooted Scroll Magazine.

Blend Modes in CSS

What is blending?

Generally, when two or more pixels overlap, our screen just shows us the pixel that’s on top. If our topmost pixel has a luminosity value of 1 (white), and a pixel below it has a luminosity of 0 (black), we generally only care about the information we can get from the topmost pixel.

Rather than let perfectly good pixels go to waste, we can opt to blend our topmost pixel with those below it. The information from the black pixel suddenly becomes useful. If you want the darkest pixel to show, you can compare the pixel’s luminosity values and return the lowest value.

Alternatively, you could multiply these values together, and get an entirely different pixel. Scale this to dozens, hundreds, or thousands of pixels, and the result is an entirely different image!

blend-mode

Rather than getting our hands dirty and performing these calculations ourselves, CSS has been kind enough to give us 16 keywords, each representing a ‹blend-mode›. Each ‹blend-mode› is defined in the W3C Compositing and Blending Specification, but if you’ve ever used Adobe Photoshop, they will be very familiar.

While each blend mode carries out unique operations, they can be broadly categorised by their resulting effect:

Normal Group

Darken Group

Lighten Group

Contrast Group

Inversion Group

Component Group

Each blend mode works in the same way as Photoshop, too. This isn’t an accident: Adobe played a very active role in shaping the Compositing and Blending Specification, and subsequently bringing blend modes to the web. Remember to thank Adobe when you cancel your Adobe Creative Cloud subscription!

background-blend-mode

The background-blend-mode property can be used on all HTML elements. This property allows us to blend the layers of an element’s background. To get started, you will need an element with at least one ‹image› provided via the background or background-image properties. With just one background-image, you will only notice an effect if you have provided a ‹color› to the background-color property (because otherwise it has nothing to blend with).

background: url(‘image.jpg’), 
            orange;
background-blend-mode: exclusion;

Exclusion

Rather than blend with a block of color, we can blend images as well, by specifying multiple images in our background.

background: url(‘top-image.jpg’),
            url(‘bottom-image.jpg');
background-blend-mode: lighten;

Lighten

Just like you can provide a series of comma separated ‹image› values to background-image,you can specify different ‹blend-mode› values to background-blend-mode. This applies lighten to the first image, and darken to the second image. Whilst we have three layers, the bottom most layer does not have anything to blend with, so there is no need to provide a third ‹blend-mode›.

background: url(‘top-image.jpg’),
            url(‘bottom-image.jpg’),
            orange;
background-blend-mode: lighten, darken;

Colour

mix-blend-mode

You can use this property on any element, which means they can be used with SVG elements in addition to HTML elements. Whilst background-blend-mode restricts blending to within the element, mix-blend-mode blends different elements together.

img {
    mix-blend-mode: multiply;
}

Multiply

What can you achieve with blend modes?

Replicating Prototype Functionality

Perhaps the most obvious use case for blending is directly replicating a prototype given to you that uses blends. If you or a team member are comfortable with Photoshop, there is a large chance you will come across a prototype with blending between layers. Every 9/10 prototypes I come across are Photoshop files- people will use If you export an asset with a blend mode, it will not look the same in the browser.

If the visual result is not drastically different, you can tell yourself on that no-one will notice – but sooner or later, you won’t be so lucky. I had a fairly good run, up until a certain airline logo.

In the provided prototype, the logo casts a shadow behind it. Once exported, the result is considerably different:

Logos

Previously, if you had come across this issue, you had a few options:

1. You, or whoever built the prototype, can go back and change the original design. Compromising on a design (especially when you don’t have to!) is frustrating in and of itself;slowing down the build time and waiting on a resolution is more so. In this situation, the prototype was provided by another company entirely.

2. Rather than compromising the initial design, you can export both the initial asset, as well as any affected layers. The design remains intact, but potentially at the expense of the end user:more layers = larger size, more colours = higher file size. Using images of entire scenes also means that even trivial changes such as layout require a trip to an image-editing program.

But, now we have blend modes! If your prototype uses one of 16 blend modes, you’re in luck- you don’t have to make this choice anymore. We can simply export our asset and apply the appropriate ‹blend-mode›, rather than interrupt the development process.

Better Backgrounds

When I first started working in front-end development, backgrounds were a major pain point for me.A background takes up a huge part of your page, and whilst those beautiful, high resolution backgrounds with ~343898 colours can help set the tone of the page, I would just see hundreds of kilobytes.

You could lower the file size by repeating the background image, but getting one to tile perfectly can be difficult to achieve. If the user instantly recognises a poorly executed pattern, their focus has been taken away from your content. It felt like a lose-lose situation.

Nowadays, I’m much more excited by backgrounds! A very popular technique for textured backgrounds is through overlaying noise. Tiled noise by itself can be boring and as mentioned,when it is obviously repeated, it can be distracting. If we blend a small, tiled data-uri with a gradient, even when our image repeats, no tile is identical. We can have a rich, interesting, background, with even making a network request!

Texture

What problems will you encounter?

Stacking Context

When working with mix-blend-mode, the effects you will obtain depend on the order of the elements on your page. The order of elements, at least to me, is not always intuitive. There are a number of properties that can affect the order of your elements, some more obvious than others: mix-blend-mode, position, transform, opacity, -webkit-overflow-scrolling, will-change

When dealing with your own code, you can learn and make adjustments to the order to best suit your needs. But maybe you’re using the Latest and Greatest Framework TM, which has its own ideas about what order your elements should be? Or thinks that a z-index of 10,000 is appropriate? It may come down to choosing between the library or using mix-blend-mode, unfortunately.

Furthermore, you may run into issues if you don’t have complete control over the environment your code will run in. I work in mobile web advertising, and I very rarely know where my work will be displayed, let alone have the ability to test it. Subsequently, for many of my projects it has been better to err on the side of safety, where I prefer to use background-blend-mode as its results are predictable.

Browser Support

background-blend-mode and mix-blend-mode is supported by all major browsers, with the exception of Internet Explorer and Edge (with both properties under consideration for development in Edge). With OSX Safari and iOS Safari, the Component group blends (i.e. hue, saturation, color, and luminosity) are not yet supported. This is useful to know in advance, lest you toggle blend mode values whilst squinting and telling yourself that you totally see a subtle difference – no, no you can’t. These ones are unfortunately super fun, but so are the rest! In the meantime, you’ll get a lot of mileage out of darken, lighten, screen and multiply.

The post Idea of the Week: Jessica Edwards appeared first on Web Directions.

CSS Dev Conf is a conference about CSS in San Antonio TX (US…

Source: W3C's Cascading Style Sheets home page27 June 2016 05:30 PM

17 Oct 2016 CSS Dev Conf is a conference about CSS in San Antonio TX (USA), on 17–19 October. A feature of this conference is that part of the conference program is determined by vote.

Monday Profile: Russ Weakley

Source: Web Directions BlogJohn • 27 June 2016 12:23 AM

russ weakleyThis week’s Monday profile is Russ Weakley: front end developer, web designer and trainer, with particular expertise in CSS, UX and accessibility.

Russ spoke at our Respond Front End Design conference, and this profile first appeared in Scroll magazine.

You can follow Russ on Twitter, and find him at http://maxdesign.com.au/.

Q Describe your family.

A I live with my long term partner, our two children and two dogs. Both my partner and I were born and raised in Sydney.

Our oldest son is obsessed with video games of all varieties, to the point where we have to set time limits. He is also a passionate musician – playing the trombone. Our younger son is interested in a range of activities including competition swimming and dance.

Q What book has changed your life in some way?

A At different times of my life, different books have inspired me, or caused me to change how I thought about a specific topic. When I was around 20 years old a book called Zen in the Martial Arts by Joe Hyams was a big influence. As a print designer, many typography books helped me change the way I saw type in design. I cannot remember a lot of the earlier books, but one that comes to mind is The Elements of Typographic Style by Robert Bringhurst.

When I moved into web design, a lot of books were influential but one stood out as it approached HTML and CSS in a very different way: Pro CSS and HTML Design Patterns by Michael Bowers. These days, I often get more inspiration from other media rather than books. I listen to a lot of podcasts and I watch a fair amount of YouTube movies on all sorts of topics from comedy to secularism and rationalism.

Q What formal qualifications do you have How did you end up doing web work?

A When I left school, I decided that I wanted to go to Art college as I was very interested in drawing and cartooning. Sadly, I did very little painting at the Art School so they decided to fob me off to a new “Design School” which was just about to start at the College. It was there that I learned about design. I learned from a grumpy typographer who constantly berated us about kerning and letter spacing. I still have nightmares about incorrectly spaced letters to this day.

As part of the program, students had to do work experience. I refused to find my own, so the College found me a place with the Australian Museum design team. I worked there for two weeks and thought “Well, luckily I’ll never have to come back here”. Soon afterwards, I was employed by the Museum and worked there for 29 years.

Q Describe what you do. What’s your job? Is presenting at web conferences part of that job?

A My work falls into four different areas:

1. I am a UX/UI professional. I work mainly on web applications – sketching, wireframing, prototyping, user testing etc.

2. I am a front end developer – specialising in HTML/CSS/SCSS pattern libraries.

3. I also work in Accessibility – often working with other developers to advise them on how to make applications more accessible.

4. I do a fair amount of on-site training – where I work with team members to build up their skills in aspects of HTML, CSS, SCSS, Responsive Web Design and Accessibility.

Q Do you give much thought to the title you apply to yourself? Does it matter?

A It’s very hard to work out a title across these four disciplines. The closest I have seen is “UI Developer” – which theoretically covers aspects of UX/UI, design and front end. The problem is that individual teams use different titles, and they use them in different ways. There is no canonical reference point for titles.

Q Describe the first time you gave a presentation on a web topic.

A I began presenting around 2003. I think my first presentation was to a Web Standards Group meeting in Sydney on some aspect of CSS. I felt very little nerves as I had presented a lot before becoming a web designer/developer. I really enjoyed the idea that I could help people understand an topic.

Q In The Graduate, Mr McGuire has just one word to say to aimless college graduate Benjamin Braddock: “Plastics”. What one word would you give to today’s prospective web professional?

A Basics.

I see many front end developers who have fast-tracked their knowledge. They can use Bootstrap and multiple different JavaScript frameworks but many lack even basic knowledge of HTML and CSS – or concepts like Progressive Enhancement.

BONUS!

When Russ first responded to our interview questions, he couldn’t resist having a bit of fun with the questions. Here are his original answers to the first three questions.

Q Describe your family.

A My family comes from a long line of criminals – thieves, robbers, pickpockets and the like. My father and mother actually met in jail – staring at each other across the exercise yard. They had three boys, all by accident. Our young lives were spent in and out of juvenile detention centres. It is amazing that any of us have managed to stay out of prison.

I now have two boys of my own … well, I part-own them along with my partner. And the bank. I try to bring them up in the same way that I was brought up. Needless to say, they could shoot before they could walk and perform card tricks by the time they could speak. We have high hopes for their future.

Q What book has changed your life in some way?

A Probably the most important book I ever read was Put ‘Em Down, Take ‘Em Out! Knife Fighting Techniques from Folsom Prison“. It taught me many of the lessons that I still use in business meetings to this day.

Q What formal qualifications do you have How did you end up doing web work?

A Unlike my brothers, I pretty much failed high school. As we surveyed the wreckage that was my HSC score, it became apparent that there was very little I could do except go to art school. It was either that or Humanities.


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.


The post Monday Profile: Russ Weakley appeared first on Web Directions.

RealObjects released PDFreactor version 8.1, an XML-to-PDF f…

Source: W3C's Cascading Style Sheets home page27 June 2016 12:00 AM

27 Jun 2016 RealObjects released PDFreactor version 8.1, an XML-to-PDF formatter that runs either as a Web service or as a command line tool. It has support for, among other things, CSS Transforms, CSS Regions, Web Fonts, and running elements. Other features include support for HTML5 (including the <canvas> element), MathML, SVG, XSLT, JavaScript, and accessible PDF. This version adds PDF/UA, PDF/X-4p, embedded XMP and support for node.js. (Java. Free personal version)

Minutes San Francisco F2F 2016-05-10 Part II: Page Media Query, Generated Content Spec, Report on vertical writing award website, Testing

Source: CSS WG Blog Dael Jackson • 25 June 2016 03:15 PM

Page Media Query

Full Minutes || Specs Referenced: CSS Page, Media Queries

Generated Content Spec

Full Minutes || Spec Referenced

Report on vertical writing award website

Full Minutes

Testing

Full Minutes

Sizing

Full Minutes || Specs Referenced: Sizing Level 3, Grid

Minutes San Francisco F2F 2016-05-10 Part I: Scheduling, Round Display, CSS tables status update, CSS UI 4

Source: CSS WG Blog Dael Jackson • 25 June 2016 03:13 PM

Scheduling

Full Minutes

Round Display

Full Minutes || Specs referenced: Round Display Motion Path

CSS tables status update

Full Minutes

CSS 4 UI

Full Minutes || Spec Referenced

Minutes San Francisco F2F 2016-05-09 Part II: Media Queries, Sizing, Flexbox, Containment, Content, Testing

Source: CSS WG Blog Dael Jackson • 25 June 2016 02:30 PM

Media Queries

Full Minutes || Spec Referenced

Sizing

Full Minutes || Spec Referenced

Flexbox

Full Minutes || Spec Referenced

Containment

Full Minutes || Spec Referenced

Content

Full Minutes || Spec Referenced

Testing

Full Minutes

CSS Generated Content Initial Rewrite

Source: CSS WG Blog fantasai • 24 June 2016 03:08 PM

The CSS Working Group has published a Working Draft CSS Generated and Replaced Content Level 3. This module specifies the generated content features (content property and related functionality) in CSS.

This is the first draft of a complete rewrite of this module, and is very rough. Large chunks (i.e. most) of the 2003 draft have been deleted, and major new functionality over CSS2.1 consists mainly of imports from the GCPM module. New features include:

plus a handy new syntax for alternate text: content: url(sparkle.png) / "New!";

We expect future work on this module to be pinning down the actual syntax and behavior of all the exciting new features imported from GCPM. For those who want to toy with implementations, most CSS->PDF renderers already support a significant subset. Significant changes since 2003 are listed in the Changes section.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-content]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

CSS Scroll Snap Module Level 1 Merges Change Proposal

Source: CSS WG Blog fantasai • 24 June 2016 01:59 AM

The CSS Working Group has published an updated Working Draft of CSS Scroll Snap Module Level 1. This module contains features to control panning and scrolling behavior with “snap positions”, to which the UA is biased to land after a scroll operation.

This publication represents the completed merge of Tab and Fantasai’s Change Proposal that incorporates www-style feedback into Microsoft’s CSS Snap Points Module proposal championed by Matt Rakow. At this point all three editors will be working together to resolve the remaining open issues and address any further feedback on the module.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-scroll-snap]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Minutes Telecon 2016-06-22

Source: CSS WG Blog Dael Jackson • 23 June 2016 12:40 AM

Full Minutes

Video: In Conversation with Sara Soueidan

Source: Web Directions Blog John • 23 June 2016 12:35 AM

As with Karen McGrane, Ethan Marcotte, and a number of other speakers at our recent Respond Conference whom we’ll feature in coming weeks, I had the privilege of sitting down and chatting with Sara Soueidan while she was here. We talked about how she became a speaker (great advice for anyone looking to start sharing their experience and expertise on stage), SVG (of course), and much more.

We also recently published our interview with Sara, which first appeared in our Scroll Magazine, if you’d like to know more about her.

And if reading’s more your thing, there’s a full transcript below.

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.


Further reading and ideas

Transcript

John

So, Rachel Andrew, who writes a column in A List Apart recently, talked about the challenge of, basically, free. And how a lot of the time, people who have a profile in our industry, and often people who don’t, are kinda asked and even expected to do lots of things for free. Speaking at conferences, sharing their thoughts online. I think that it also connects with the open-source ethos and philosophy where a lot of people are devoting an enormous amount of time and rarely being particularly well recompensed. But, by the same token, I think it’s something very special and important about our industry is that we’ve collectively developed our expertise and our skills and shared that. Most people, I know, including myself, have learned a great deal from other experts who have learned something and shared it. So what are your thoughts around that dilemma? You know there are obviously benefits of giving your time, raising your profile with the opportunity, then, to perhaps publish a book or gain a client.

Sara

Exactly.

John

What are your feelings around that whole issue?

Sara

I don’t have anything particularly against it, if you get to do it on your own account. For example, if I have some time and I feel like writing, I write. If, like, you know, recently I read this article by Daniel Mall, where he talks about the difference between being busy and between setting priorities. So, instead of saying, “Okay, I’m too busy to do this,” you shift your mindset and you think, “This is not a priority.” So, when you don’t have a lot of work to do, which is what I used to be like the first year when I started out. I spent a lot of my time learning and I loved writing and I loved teaching so I spent a big part of my time writing as well. So, whenever I learned something, I shared it, I wrote an article. People liked the way I write my stuff and sort of related with it, so I kept doing it for awhile. And there’s this beautiful sense of satisfaction when someone comes, for example, sends you a Tweet or email and says, “Thank you, your article gave me this ah-ha moment and I finally understood the concept that I couldn’t understand before.” This is very satisfactory and sometimes this is enough for me to do what I do. But, in the last, like, few months actually, it only started maybe in September last year, I started setting priorities like Daniel said and ever since then, I’ve been writing less. I’ve also been speaking for free less. I used to speak, I spent my entire first year, probably, speaking for free. But then, I also used to make the mistake of making a new talk for every single conference.

John

Yes, that’s a good habit to break.

Sara

Yeah, I definitely broke that. So, there are definitely disadvantages to that. But if you have the time, and it helps you build your profile, it helps you get connected to people, then definitely I don’t have anything against that. But, people on the other side, people who are receiving your stuff, they shouldn’t set expectations that you might not be able to meet. Like, I see a lot of, for example, I’m one of the people, I’m pretty sure there’s gonna be some criticisms to me saying that, I don’t wear open-source as a badge. Like, hey I’m a proud open-sourcer. I do have some things on GitHub. My activity is, I’m not really that active on GitHub, but I’ve seen a lot of people who are and who get a lot of nasty comments from people who are like, “You have to fix this.” I used to get those via email. Before I started writing tutorials on how to or how to explain things, I used to write tutorials on how to create certain demos and then after a few months when browser support changed and some demos broke, I used to get a lot of emails from people asking me to fix it for them. And some developers even used to send me emails asking me to fix their projects for them and without even offering anything. I was like, okay, there’s a limit to the amount of things, or the kinds of things that you can do for free. And people just need to understand that. Behind the web, there are people, and people tend to forget that there are people on the other side of the screen.

John

It’s really interesting, so I started on the web, actually pre-web days even, and one of our primary mechanisms of connecting with people were news groups. That’s how I met, for example, Eric Meyer many, many years ago. And what was really, what was always very interesting to observe in news groups is that people would behave towards someone, and if people aren’t familiar with news groups, I guess the closest analog these days is Slack, a bit like Twitter, in a sense as well. But typically, the difference between a news group is that they were relatively small communities on the whole. There also anybody could largely join in. And what you would find is that people just weren’t capable of imagining they were in a room having a conversation with someone and, therefore, they would, I remember one person when I made a suggestion on something he says, “Literally made me sick.” Like your suggestion, I was like yeah, seriously? You know, if you’re in my house and we’re having a beer or a cup of tea or whatever, would you say that?

Sara

You wouldn’t say that.

John

And I think that’s a really good analogy that we’ve sort of somewhat lost. It’s almost like we have to keep learning over and over again the same analogies. I guess my feeling, to some extent, around the whole free thing is, you have, sort of, two consumers or, you’ve obviously got the producer of the presentation, the writing, often the software, the code. You have the audience who will use it as part of their project or learn something from it and grow from it. But then you have either the people who employ those people or you have the companies who gain tremendous advantage from that code base or they may be publishers, they might be a conference company. And I think the balance is tricky. And I think it, probably, I mean one of things, one of our guiding principles with when we ask people to speak, that we want people to leave better for it and often financially is a part of that, right And I do, somewhat, sometimes feel that, particularly amongst those commercial entities that are benefiting really significantly from that work, there is this kind of expectation that, well, it’s all open-source or it’s all free and it’s all part of the giving community and what have you. I think that’s probably, we’re gonna burn out, I think, a lot of people this way. And I really, if I had a call to any activity around this, would be, to the people who really have the resources, to contribute those resources back to ensuring that this is, what I use the term, sustainable. I don’t think right now sometimes that it’s a sustainable ecosystem because we really do, really take for granted a lot of the excess, you know, surplus intellectual property people put into it.

Sara

I’ve only recently setting limitations and saying no more to conference invitations because, like half or more than half of the invitations that I got for this year, I got more than 30 invitations.

John

Right, wow.

Sara

And I said no to most of them because, it’s not mainly because of the money, but it was a big part of it. Like a lot of conferences would ask me to travel for, there was this conference that asked me to travel all the way to San Francisco, to the other side of the world. They would only pay for two nights to stay there. That’s not enough to even get over my jet lag.

John

Right, yeah.

Sara

And to give a 15-minute keynote for free.

John

Yeah, and I’m not gonna necessarily ask who the names are but I’ve found that actually some well-established, successful, large companies have that expectation.

Sara

Exactly.

John

And, you know, to me, I think that’s unsustainable, really.

John

Not these people.

John

There are people who definitely wanna do the right thing. And it makes it very hard to, essentially, in one sense, compete when other people aren’t necessarily wearing the costs that you are and going to the efforts that you are. Anyway, as I said, I don’t wanna make it about us, thanks for those sorts and I guess the broader point is, and I think as an industry, we really do have to value probably more, the contributions that a relatively small number of people are making. Often, not necessarily the most well-known. I think, in open-source, the very high-profile founders of a project will get recognition, rightly so, and maybe well employed or maybe start a company around what they’re doing. But there are plenty of other people who will make contributions that don’t necessarily do nearly as well out of that, right?

Sara

Don’t get recognition.

John

And I’m not sheeting that responsibility home to the people who started that project, by any means. But I think definitely, if your company does well out of other people’s work, you should be compensating them for that is my broad philosophy in life.

Sara

Definitely.

John

Anyway. So, you’re, I guess, most well-known, in many respects, for scalable vector graphics for SVG. So, how did you come to have a particular passion for, interest in, expertise around SVG?

Sara

It’s actually weird because I spent an entire year focusing on CSS only and nobody even sometimes remembers that. Even though I–

John

I guess there were lots of people who did that. You know, that was a field that was pretty saturated even ten years ago in a way.

Sara

I got into SVG–

John

Lea Verou pretty much cornered that market I think.

Sara

The way I got into SVG was totally unplanned. I gave my first talk a couple of years ago at CSSconf in Miami, so, I was supposed to give a talk about textured text and certain effects and I lost my inspiration for the talk a few weeks before the talk and so I wanted something new. I always like to challenge myself and I always like to put myself under pressure before I give a talk, otherwise, I’m not gonna come up with something creative. So, I had been reading about SVG for a couple of months before that here and there. There were only like a few articles, including one from Chris Coyier. So, everyone’s talking about this new image format and I don’t really

John

When you say new, were you talking about 12 years ago?

Sara

Yeah, yeah (laughs)

John

When did you, when was it you, what year are we talking about here?

Sara

That was two years ago.

John

All right.

Sara

Yeah.

John

It’s very interesting to me that SVG has been supported since IE9 I think.

Sara

Yeah.

John

So kinda many years before. We’ll get on to, perhaps, why it’s taken so long. But anyway, this reasonably, moderately new technology in 2014

Sara

So, the new technology called SVG, I didn’t know anything about it. I don’t like not knowing anything about something.

John

So, you’d heard of it, it was like (mumbles)

Sara

Yeah, just articles here and there.

John

Right, right.

Sara

It has something to do with resolution independence and responsive design is really the big thing today so, I was like, okay. I started reading an article, reading a little more about it and then, this is how it starts with me all the time. Like, I start reading about something, I start taking notes for myself, and then these notes pile up, and then they turn into an article. But with that instance, they turned into a talk. So, I talked to Nicole Sullivan at that time and I said that I’m not really feeling inspired by the textured text talk and I’m thinking about changing it to styling and animating SVGs with CSS. And I didn’t even know that was going to be popular. Like, it was just a new topic, and I didn’t see a lot of people talk about it, so I thought I’d do it. I did and the feedback was amazing. Right now when I think about the slides I feel incredibly proud about them, because there weren’t really that amount of information about SVG gathered in one place like that. Okay, so because of the excitement that I got, and Kristina Schneider, she asked me to give the same talk at CSSconf EU and I wanted it to be updated for that conference, so I started digging more. And that’s when, whenever, if I don’t understand something from the inside out, I can’t really work with it. So I started looking into the viewbox attribute and that was like a black box. It didn’t get, it started changing the values and the image changed in ways that I didn’t even anticipate or expect. I had no idea how it worked and that drove me crazy. So, I spent two weeks, researching, reading. I didn’t find any good articles to make me understand it well.

John

So you had to go back to the spec.

Sara

The spec had, like, nothing about the viewbox. So, the only way I knew that I could understand it is to visualize it and that’s exactly what I did. I started, I created an instructive demo. I then, after awhile, I refined it and made it public, but at first I started with, for me. So, I started changing the values of the viewbox and seeing how it changed until one day it clicked and I was able to make the comparison between how the viewbox works, the positioning and the scaling, in how the positioning and scaling of background images works in CSS. They are very similar in that aspect. And that’s when I got the ah-ha moment and ever since then, I always say the same thing, if you understand the viewbox, your SVG codes are taken to a totally new level. And I started falling in love with it, especially the viewbox. Everyone knows how much I love the viewbox. A lot, like in every, I would have mentioned it tomorrow, but there’s nothing really to talk, it’s not really related to the content of my talk tomorrow. Yeah, so I got hooked and I started learning more. And the idea of having an image and being able to control the content of that image. When I used to be a kid, I used to draw a lot. And I used to draw cartoons a lot. And I used to dream about traveling to Japan some day, maybe, and working as an anime, you know, animator, basically. So, you have these images and you get to animate them. And, I didn’t get to do that, so I found SVG where I have an image, and I literally get to animate it using code and that was enough to get me hooked. The more I learned about it, the more I loved it. And I’m still learning. There’s so much more that I’m lagging behind.

John

So, I think there’s two things I wanna say about that. The first thing is, if you’re interested in becoming a presenter and doing presentations at conferences, I think that path is a really good example of how to do it. We ask lots of people to speak. We’re constantly looking for new speakers. We do speaker workshops and really, one of our missions is to help people become speakers. And time and again people will say, “I don’t know if I’ve got something to say. “I’m not sure what I’ve got to say is really interesting.” But I think a lot of people also think, “Oh, I have to be the world expert in something “in order to come to speak about it.”

Sara

No.

John

The fact of the matter is, there are so many undiscovered aspects, even in something like SVG which has been incredibly widely supported since IE9. IE9 was the last holdout. That’s 2009, I think, that we’ve had and I’ve been promoting SVG since long before that and continuing to bang my head against the table as to why people are not adopting, but I guess the point is, here’s a technology that’s been around a long time, incredibly powerful, incredibly exciting and capable, and yet, you’ve found aspects of it that will be valuable to people. No one else could teach you that. You had to work that and then you shared that with other people. I think that’s a really great example of the sort of thing people who are interested in presenting should look at but not think of themselves as having spent 10 years becoming a master.

Sara

They don’t have to know everything.

John

You can learn by teaching it to people.

Sara

By teaching it. Exactly, like when you’re learning, you start getting these moments and you start seeing things from a very different perspective that even experts don’t see them that way. So, you’re able to simplify things because the way you would get them is by simplifying them and, for example, if I or if some experts. I had this teacher back in college. He was a genius. He was incredibly smart. He got the highest not grades, average in college. Yeah, he was incredibly smart but he was the worst teacher. He was the worst at explaining things. So, what I’m trying to say is you don’t have to be really, really an expert in something and know it inside out to talk about it. When I started with SVG, like I said, I learned it two weeks before my talk. And the amount of information that I gave during the talk was all I knew about SVG back then. So, definitely don’t wait to become an expert. And I don’t really think the word expert, people sometimes call me an SVG expert and I’m like, no, I’m not an expert. It’s very hard to define yourself or to define other people as an expert so, if you’re gonna wait for yourself to become one, especially if you have the impostor syndrome, you’re never gonna speak. Because you’re never gonna think of yourself as an expert.

John

Yeah, absolutely. I studied mathematics and I found that I had dozens of professors over a three-year period and I’m terribly sorry to say that one of them was a good teacher. The rest were, literally, terrible teachers. Because they knew how to do mathematics and so they usually stand there and do it on the blackboard and walk away.

Sara

Exactly.

John

Whereas I’ve always, I probably had a similar journey compared with you nearly 20 years ago with CSS, where I had that ah-ha moment and I thought this is brilliant technology. It was only a matter of months old. And when you were telling the story, I felt like, that’s so similar in many respects to the story I had. Although I didn’t necessarily, there weren’t conferences back then. So the way people communicated were very much, there weren’t even blogs back then. You would write articles and you’d post them, often in news groups like that’s what you did. But, it was the fact that I was struggling myself with an idea and had to find a way of understanding and coming at it as you’ve done with the viewbox. So, I guess why I’ve labored on this a little bit is to try and really get people interested in speaking. So, as you say, don’t wait. Don’t think you have to be an expert. In fact, your journey of, not necessarily your personal journey, but your journey of learning about the technology or the practice is actually probably similar to what other people are kinda wanna go through. And so telling that will be very valuable to them.

Sara

Yes, especially like, I also, there’s another thing that I had, one of the speakers, SmashingConf a couple of weeks ago, he was talking about a topic he wanted to talk about and then he said that someone else was talking about the same topic. So, that made him not talk about it anymore. And I was like, why? Don’t, a lot of, a lot of people on Twitter say I wanted to write this article about that something but then I realized there are a million articles about that so I decided not to do it. That’s so wrong. Everyone has their different aspect, different perspective, I mean, and the way you explain things, as they say, it’s all about style. So, everyone has their own style. And some people can relate to that person’s style and other people will be able to relate to yours not that person’s. So, definitely don’t let that stand in the way.

John

And in three months I will have inevitably forgotten that article (laughs)

Sara

Exactly.

John

We have a very short memory on the web a lot of the time. So, shifting things a little bit. I guess at the moment what we’re seeing is an increasing complexity of what we do on the front end. We were using pre-processors, we’re using lots of libraries and frameworks and they’re doing more and more of the heavy lifting. Are you a person who tends to go toward those layers of abstraction, or you tend to stay with the core foundational technologies?

Sara

I stay with the core. I’ve always liked staying with the core. Even in college, we had this assembly course, assembly language and then we had the C and C++ courses. Assembly is like the lower level and C is not. I was super comfortable dealing with assembly and really not comfortable with C and I’m still like that with CSS Javascript. I don’t know Angular. I don’t know React. I know Javascript. I know CSS. I only use a pre-processor. I used Less for a while. It didn’t really feel like it was for me. So, I tried Sass. It was simpler, sort of. I do use it these days, but I only use it for variables and nesting which hopefully will come to CSS some day.

John

Variables is they’ve landed a WebKit now. So, WebKit had an implementation at Con a decade ago of variables.

Sara

So, the only reason I use Sass is for variables and nesting.

John

I suspect that’s probably 99% of the use cases with them.

Sara

Yeah.

John

And I tend to like to keep my workflow as simple as possible, and probably pay a bit more of a high cost at the other side. Like I do miss, the variables and nesting are probably the two things that I would hanker after. But still not enough to actually go and actually use a pre-processor.

Sara

No, I do think they are worth it because they’re time savers and especially when it comes to organizing things. I do like to use them. But frameworks, I’ve never used Bootstrap. I’ve never used, I don’t even know a lot of CSS frameworks actually.

John

Well, there tend to be less emphasis on them now than there was certainly, I think, three, two, three, four years ago. I think, now why it is because everyone just uses Bootstrap, I don’t know. Or maybe they’ve, sort of, come and they’ve somewhat gone again. Because we were talking a little bit before we were on camera around whether or not in the Arabic world is web design very similar or different? So, I made the observation that, in my experience, certainly some years ago Japanese web design was quite different from what you might call western web design. Amongst my Japanese friends, we’d just discuss why that be different. But you sort of suggested the Arabic way of designing isn’t really too distinct.

Sara

It’s not really that different, no. And I still get a lot of requests from people, Arabic and non-Arabic, who ask me to build a web site, and one of their requirements is always use Bootstrap. And that’s actually one of the reasons I don’t do it. I don’t wanna be forced to use a framework. I prefer to write my CSS from scratch, from knowing exactly what everything is for, paying attention to progressive enhancement accessibility and all of that stuff without having to worry about being restricted by what Bootstrap has to offer. If you want me to build a web site, I’ll build it the way you want it, but I can do it from scratch. I don’t wanna be restricted by some CSS framework. CSS is simple enough to be written from scratch. Plus there’s a lot of accessibility problems with frameworks and spending time fixing those frameworks is a lot more than doing things from scratch.

John

Well, I was having a similar conversation with Russ Weekly yesterday. And Russ I’ve known for many years and has been a passionate advocate for accessibility in all that time. And we talked about how it’s kind of ironic, now that we have in the front end things like React, and somebody said Angular, Bootstrap, we’re actually getting worse accessibility rather than better, in some respects. Even though, in a sense, if these tools implemented accessibility well, then it’d almost completely come for free. There wouldn’t be, and yet people seem to find ways of using these technologies in ways that are less accessible, not more. And it’s almost like we don’t care about accessibility as much as we might have ten years ago.

Sara

Yeah, I hear this. I do hear this from certain developers.

John

I think old people. Because our eyes are getting worse, right (laughs).

Sara

Well, so are mine.

John

That’s what happens, I used to joke and now it’s not a joke anymore that, if you’re lucky you will become disabled, because you will get older and you will become less mobile and you will be, and when you’re, I probably first said that when I was 29 and now I’m 49 and I think it’s hard to, it’s harder to empathize broadly when you’re young and able-bodied and fit, and your eyes work well. I think it can be a bit more challenging. We can understand theoretically the challenges of accessibility, but I think we need to be, empathy can often come with personal experience or maybe going in, as Russ talked about yesterday, going and watching people use your web site and being humiliated by how you’ve made someone’s life more difficult than it should have been.

Sara

Yes, you know, I think it gets dangerous when certain developers, which happened yesterday, one of them said, “I don’t care about that one person out of 1300.” And that’s when I personally, where I personally draw the line. I mean, why wouldn’t you care? Maybe you’re that person. Maybe you’re the one having that problem. So, how would you feel if someone treated you the same way?

Sara

Yeah, I certainly think we all lose sight of the fact that the w-w bit of world wide web is worldwide and Tim Berners-Lee, so I sort of have this idea that Tim Berners-Lee gave the world an enormous gift. And it came with, and we’ve got this enormous privilege of being involved with it and helping make it happen and it’s rewarded us individually as professionals, enormously.

Sara

True.

John

And the kind of reciprocal responsibility is that always should, we should listen to and try to embody it’s values. And there are a set of values that Tim Berners-Lee has expressly enunciated about the web. And they are about inclusiveness and the very name, worldwide, access regardless of disability, to information. I think those are really important things. So, my blood does, literally, boil, well it doesn’t literally, figuratively boils (laughs) when I hear things like that. Because we’ve been hearing that for 20 years. And it’s a shame, here we go, we have to start all over again. And where do I, how do I, what? You know, maybe we just have to do that. It’s part of our responsibility is to educate newer generations.

Sara

Exactly, we need more speakers speaking about accessibility at conferences, because I don’t see those a lot.

John

It went away, right? It used to be a big thing and it’s gone away. We’ve got a bit of it coming up in this conference and the one we’ve got later in the year. But, one of the reasons why we didn’t really have as much in our conferences for a long time, we’re sort of like, that’s all done, people have got it now. People get it. It’s a set of practices. And to me, the challenge is less the practices, that’s part, it’s actually the belief that it is fundamentally important.

Sara

Sure.

John

I feel it’s no different to when we started our first conference in 2004. We’ve almost gotta go back and start again. But, maybe that’s just, as I said, the price, that we pay for for our place in the industry. I’ll finish by looking to the future. So, how long would you consider yourself as being professionally doing web things? How long?

Sara

Two years.

John

Two years? Only two years?

Sara

Maybe three, two and a half, or something.

John

Okay, so, and you’ve been using the web, so when was the first time the web became really a significant part of your day-to-day life?

Sara

Three years ago.

John

Really, so before that you really weren’t much of a web user or?

Sara

I’m not that into tech.

John

All right.

Sara

Yeah, so it’s kinda ironic how I ended up as a geek.

John

Yeah?

Sara

Yes, so but I like it. I love it, actually.

John

You say that, this is the woman who said, “Yeah, I prefer assembly over C.” That is a pretty geeky thing to say. I think the geek kind of genes were deeply in you there. I don’t think it happened, the web just came along and found you. But you were ready for it.

Sara

Absolutely. The first time I ever touched HTML was in eighth grade and it felt like a natural language. My teacher started talking, putting the P paragraph tags and as soon as I saw them, I was like, wow, I can use these few lines and I have a web page in front of me. So, I did that and I ended up making the best project in school and I did a couple of side projects at home. I got a book from college, from a friend of mine was in college, that was all about HTML and I started reading and reading and reading, and I made, you know the holy grail layout? You have main, sidebar, and header?

John

I think I have a whole chapter in one of my books on it.

Sara

I did that using iframes and I felt so proud.

John

With iframe?

Sara

Yes.

John

Right, okay.

Sara

Yeah, so I fell in love but then the next year, we didn’t take a computer course, so for like four, five years after that I didn’t touch any HTML. I didn’t do anything. And then in college, I didn’t have a lot of options to choose from because we weren’t the richest people in Lebanon, so, there were only a few colleges that I could go to. And so only a few options for majors. Computer science was the least bad, like, I didn’t like the others, so it was like, okay. I’ll just take computer science. I almost switched majors to architecture, to physics, halfway through but then things happened that led me to this path and I’m more than thankful to be here.

John

All right, so looking forward then those two to three years, so that’s like looking forward the same period of time as looking back, what do you see yourself doing? What do you imagine?

Sara

What I see myself doing? I don’t know.

John

Will it still be SVG a big part of that? Or other aspects of web interesting you right now?

Sara

I’m already shifting away from SVG a little bit. I was talking to a friend of mine awhile back and I was talking about, I used to focus a lot on SVG itself in the last couple of years, and now I’m just focusing at SVG as being part of the bigger tool set, as how it can be used alongside other tools to help us solve bigger design problems and development problems. I’m very much, very much excited about progressive web apps. It’s fantastic. I can’t wait to see it, with the manifest, with HTML5 manifest, the service workers, and just the ability to have that an icon on your home screen that opens the web site that looks exactly like an application that works off-line. That’s incredibly exciting. So, I’m excited about that. I see myself working on side projects more, less speaking. I was actually supposed to not speak a lot this year. I ended up with more than ten speaking engagements. So, maybe next year, I’ll speak less. I wanna focus more on client projects. They are my priority now. That’s why I’ve been writing less recently because I’m setting priorities. I can write if I want, but I don’t wanna sacrifice time from my personal life or from other activities. I’ve given those a priority and writing slightly less. So, I will be writing not as frequently, but I like to focus on new topics. I need to find something to inspire me and progressive web apps is probably gonna be part of that.

John

Excellent, all right. Well thank you very much for coming all this way.

Sara

Thank you for having me.

The post Video: In Conversation with Sara Soueidan appeared first on Web Directions.

The CSS WG updated the Working Drafts of CSS Box Alignment M…

Source: W3C's Cascading Style Sheets home page23 June 2016 12:00 AM

23 Jun 2016 The CSS WG updated the Working Drafts of CSS Box Alignment Module Level 3 and CSS Scroll Snap Module Level 1

UniView 9.0.0 available

Source: ishida blog » cssr12a • 21 June 2016 07:39 PM

Picture of the page in action.
>> Use UniView

UniView now supports Unicode version 9, which is being released today, including all changes made during the beta period. (As before, images are not available for the Tangut additions, but the character information is available.)

This version of UniView also introduces a new filter feature. Below each block or range of characters is a set of links that allows you to quickly highlight characters with the property letter, mark, number, punctuation, or symbol. For more fine-grained property distinctions, see the Filter panel.

In addition, for some blocks there are other links available that reflect tags assigned to characters. This tagging is far from exhaustive! For instance, clicking on sanskrit will not show all characters used in Sanskrit.

The tags are just intended to be an aid to help you find certain characters quickly by exposing words that appear in the character descriptions or block subsection titles. For example, if you want to find the Bengali currency symbol while viewing the Bengali block, click on currency and all other characters but those related to currency will be dimmed.

(Since the highlight function is used for this, don’t forget that, if you happen to highlight a useful subset of characters and want to work with just those, you can use the Make list from highlights command, or click on the upwards pointing arrow icon below the text area to move those characters into the text area.)

Idea of the Week – Craig Sharkie

Source: Web Directions BlogJohn • 20 June 2016 11:58 PM

Craig SharkieCraig Sharkie’s presentation at our Respond conference was on how viewport units can make web typography responsive. And a great talk it was.

But when we asked him to write an article for our new Scroll magazine, Sharkie went off at a bit of a tangent. He refers in the talk to “contextomy”, the word for taking something out of context, changing its meaning.

His article explores that further, digging into how changes in context can affect search results and ultimately what we think of as knowledge and truth. We’ve made that our Idea of the Week.

You can also read this article in the first edition of our rebooted Scroll Magazine.

Searching for Truth

by Craig Sharkie

You can google it. You can bing it. You can even let me google that for you. Google themselves would prefer that you didn’t google it. And Yahoo would love anyone to have yahooed it.

“It”, of course, is using a search engine, and we’ve all done it. In all likelihood, everyone you know has done it, although you probably see a handful of people each week that haven’t, and wouldn’t.

Figures show that 86.9% of Australians are computer literate, which is well above the global computer literacy rate of 39.0%, and safely under the Australian literacy rate of 96%. I know all those figures because I googled them. And Google happily gave me 2,870,000 results, in a breathtaking 0.51 seconds.

And we don’t question that. Although perhaps you’re starting to, now. We’re comfortable receiving our search results in batches of 10, and if we make it 10 pages deep in a search, there’s something awry.

When Jerry Yang and David Filo launched Yahoo last century, it was a search directory and not a search engine. That just meant that human beings made recommendations about what would be the best results for your search, and not a Web bot with a flashy algorithm.

And somewhere along the line we traded human input for a spider’s index.

If you’re familiar with the genre you’re searching, and can recognise key personalities in your results, you actually start to apply some directory filtering back over the bot’s results.

Interested in Web Development? If you see Mozilla Developer Network or the W3C in your results you’ll be confident you’re heading in the right direction.

Interested in Semantic Web Development and you’ll likely skip past W3Schools, but you’ll often take a look at Stack Overflow, just to be sure. Names like Paul Irish, Chris Coyier, Remy Sharp, Eric Meyer, and Peter-Paul Koch will make you more comfortable again. Although for two of those, CSS-Tricks and Quirksmode might be more familiar.

Search for “search?q=most+popular+search” and you’ll get 415,000,000 results in a quarter of a second, and there’s frankly no way for you to comprehend that much data in that small an amount of time. We’ve long ago traded quantity and speed for quality and fidelity. Voracity for veracity.

And if you take brands out of the mix – think Kardashians, Kanye, Kleenex, or My Kitchen Rules – and pornography from the mix – think … well you know what to think – the most searched for term in 2015 was “weather”.

45.5 million people per month searched for weather, and the smart money says folks wanted to know the forecast, and not the science behind the weather.

In our hunger for information we often overlook quality. We opt for common usage, over uncommon precision. And we’re happy to do it for searches as we’ve become used to doing it for so many other parts of our shared experience. We have precedent for it and we’re familiar with it, and it’s almost an expectation. Great minds think alike, after all.

And even the saying “Great minds think alike” has fallen victim to the race for more results. It’s become a contextomy – the selective excerpting of words from their original linguistic context in a way that distorts the source’s intended meaning. Ask Wikipedia what a contextomy is.

“Great minds think alike, small minds rarely differ” or “Great minds think alike, and fools seldom differ” are the directory versions, and the more idiomatic “Great minds think alike” is the search engine version.

Millions of people misquote this saying and in that misquotation change the meaning we take from the quote.

When we find answers that fit the shape of our question, and in the face of potentially millions of answers, we excuse ourselves from the need to investigate the answers too thoroughly. Often, there is little harm in our expedience; occasionally, though that expedience is the root of our lament.

Were we to take the time to investigate, the answer would be closer than we think, and more useful than we expect.

Allow yourself to only need an image search for “Great minds think alike” and you’d be told the saying originated in Ancient Greece. Don’t settle for the picture-telling-a-thousand-words option, and Google can lead you to a Stack Overflow result where you’d learn that the idiom wasn’t quite that old and likely comes from the 17th Century.

We don’t always need to go back to the source or specification to get the truth behind the answers we need, but we do need to be sure that someone has done the hard yards there for us. The answer that we desperately need might be the 11th result on Google and can save us hours of work.

Had Jesse James Garrett not been going back to the specification, he might not have been among the drive that saw Asynchronous JavaScript + XML push the use of the Internet in new directions.
Arguably, you don’t need to know that Garrett coined the term Ajax in the shower, but then that might be the information that’s your tipping point.

And, as they say, “the rest is science”.

Or do they?

Maybe we should google that.

The post Idea of the Week – Craig Sharkie appeared first on Web Directions.

Monday Profile: Jen Simmons

Source: Web Directions BlogJohn • 20 June 2016 02:16 AM

jen simmonsThis week’s Monday profile is Jen Simmons: web designer, front-end developer, Designer Advocate at Mozilla and host of The Web Ahead podcast.

Jen spoke at our Respond Front End Design conference, and this profile appeared in our magazine, Scroll, which you can download right now.

You can follow Jen on Twitter, and find her at http://jensimmons.com/.

Q Describe your family.

A I come from a long line of English folks, some of whom immigrated to Massachusetts in the days of the Mayflower, others who moved to Washington D.C. in the early 20th century, with a bunch in between.

While there’s a bit of Scottish and a bit of German in my ancestry, it’s mostly English, English and English. There must be something to the sense of where you are from, way back, as the U.K. is now one of my favourite places to be. It does seem familiar somehow. Comfortable.

Q What book has changed your life in some way?

A There have been several books that have changed my life: A Separate Peace; Designing with Web Standards; Bulletproof Web Design; anything by Judy Blume. But if I were to pick one, I’d say There is Nothing Wrong with You: Going Beyond Self Hate by Cheri Huber. It’s a funny little book. Big hand-written-style text. Lots of drawings. It walks you through one particular idea–there’s a voice in your head that’s telling you crappy stuff all the time. And that voice is lying to you.

Cheri Huber is a meditation teacher in the tradition of Zen Buddhism. She’s written a pile of books, including The Fear Book and The Depression Book. The Fear Book is another that changed me. And The Depression Book is the best book on depression I’ve ever seen. I think I’ve bought There is Nothing Wrong with You a half dozen times. I keep giving away my copy and buying it again. Really all of Cheri Huber’s many books teach the same simple truth about life and who we are. But it’s a truth that’s both the hardest thing to
learn and the most helpful.

Q What formal qualifications do you have? How did you end up doing web work?

A I have a BA in Sociology with minors in Mathematics and Theatre from Gordon College. And an MFA in Film and Media Arts from Temple University. In neither did I set out to study web design or computer science. I did computer science in junior high and high school (and did very well), but dropped out because of the culture of harassment.

I got into the web years later as a natural progression of living a career as an artist. I was designing lighting, sets and sound for theatre, producing events, teaching high school (and later college) students, and doing freelance graphic design. When the web came along, it was only natural that I also make the websites, so I taught myself HTML.

Eventually, I stopped doing print because I was bored with it. After I moved to New York in 2008, I focused on a full-time career as a designer and front-end developer, shifting to larger budget projects with teams. And I eventually evolved my role as a teacher into what I do today. I love being both creative and technical. I find being on the forefront of a medium very exciting.

Q Describe what you do. What’s your job? Is presenting at web conferences part of that job?

A I am a Designer Advocate for Mozilla–as a member of their Developer Relations team. So yes, it is part of my job to travel around and present at conferences. I was doing so long before I got this job at Mozilla. But it’s great now to have the backing of an institution to help make it possible.

It’s also my job to collect ideas and feedback from the web industry and take those requests back to Mozilla. The folks who make browsers usually don’t also make websites. It’s my job to research the field and bring my findings back, to advocate for designers and developers within Mozilla.

I’m also the host and executive producer of “The Web Ahead”, a podcast about new technology and the future of the web. I started the show in 2011, and have been thrilled to reach such a large audience, bringing many of the ideas and guests we see at web conferences to folks around the world.

Q Do you give much thought to the title you apply to yourself? Does it matter?

A I do think titles can matter. They carry power. At Mozilla we can chose our own titles, and I put a lot of thought into mine. The job opening for my position was titled “Technical Evangelist”, but I don’t believe this is really about the technology. It’s about people, and what people can do with technology–not the technology for its own sake.

Our department is called “Developer Relations” but I believe designers are just as important as developers–perhaps more so, since their work impacts the humans who use our sites and products more directly. Advocate is a great word, and more accurately reflects the responsibilities I have. So Designer Advocate it is. Or Designer and Developer Advocate on more wordy days.

Q Describe the first time you gave a presentation on a web topic.

A I think the first presentation I gave at a tech industry event was in 2006 at Vloggercon. I showed people how to customise their Blogger blog using CSS. I’d been on panels at conferences a few times before, but that was the first time I prepared a talk with slides, and gave it on my own. The conference was a gathering of the folks who invented the techniques for putting video on the web. It was a great community that I was honoured to be part of.

Of course I was incredibly nervous. I didn’t feel prepared. I’d taught college courses for three years by then, so I was used to lecturing, but somehow a conference presentation seems much higher stakes.

I think it went well. I likely left wanting to have done a much better job. I’ve been striving to get better and better ever since.

Q In The Graduate, Mr McGuire has just one word to say to aimless college graduate Benjamin Braddock: “Plastics”. What one word would you give to today’s prospective web professional?

A Layout.

If an aimless college grad wanted to break into the web industry today, and wanted to know what they should focus on to get ahead–I’d tell them “layout!”

There’s incredible opportunity coming to invent some truly new design patterns. Once CSS Grid Layout hits browsers, everything about layout will change. Anyone who knows what’s coming will have lots of work.


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.


The post Monday Profile: Jen Simmons appeared first on Web Directions.

The CSS Day 2016 in Amsterdam on June 17 presents eight adva…

Source: W3C's Cascading Style Sheets home page17 June 2016 12:00 AM

17 Jun 2016 The CSS Day 2016 in Amsterdam on June 17 presents eight advanced CSS topics. Speakers include Léonie Watson, Greg Whitworth and Chris Lilley. The day before, June 16, is about HTML, with speakers such as Peter-Paul Koch, Simon Pieters and Lea Verou.

Minutes Telecon 2016-06-15

Source: CSS WG Blog Dael Jackson • 15 June 2016 11:34 PM

Full Minutes

Idea of the Week – Peter Wilson

Source: Web Directions BlogJohn • 14 June 2016 12:00 AM

One of the informal benchmarks for a conference presentation is the number of tweets referencing it – and what they say, of course. The presentation Peter Wilson gave at Respond prompted many tweets, almost all of them expressing some surprise at how little they knew about HTTP2 and how clearly important it is.

And that’s why Peter’s presentation is our Idea of the Week. We know too little about web performance in general and we need to know much more about the transition to HTTP2.

You can also read this abbreviated version of his live presentation in the first edition of our rebooted Scroll Magazine.

Performance: HTTP2 in a 1.5 World

For most of us, the year 1969 is incredibly important. In some ways, it could be seen as the most important year of our working lives, even though – for many of us, anyway – it happened some time before we were born.

At around 9:30 on the night of 29 October 1969, a group of researchers from UCLA sent the first message on the ARPANET, predecessor to the internet, to the University of Stanford in San Francisco.

That message, sent about half the length of California, was simple: “login”.

With the sending of that five letter message the path to the internet and, eventually, the World Wide Web, had begun. It was an inauspicious beginning, because the message that actually made it to Stanford was: “lo”.

Yes. Performance issues have been with us from the start.

Performance is a two part issue

I started developing sites in the 1990s. Back then, we had a maximum download speed of 56 kilobits per second. Very much a theoretical maximum, at best. When this old man talks about caring about every byte on a page back in the day, it’s because we had no choice.

I still think about bytes on the page in my role as WordPress engineer at Human Made [https://hmn.md/is/], making high-end WordPress sites, often using it as a headless CMS and delivering content via an API.

As far as performance goes, we’re now in a transitional period. With the release of the spec for HTTP version 2 and increasing but not universal browser support, we need to consider how server configuration influences the performance of our front-end code.

Because we’re in transition, code for one circumstance may cause problems for another. We find ourselves in dire straits. However, as professional web designers and developers we don’t get our money for nothing, or – in terms of conversions – our clicks for free. We need to accept that front-end code and HTTP protocols have become the brothers in arms of performance. (Thank you, thank you, I’ll be here til Thursday.)

The internet is slow

Since late 2011, the HTTP Archive – run by the Internet Archive – has collected statistics on the Alexia top one million sites. Dozens of data points are collected visiting the one million sites both on a desktop using broadband and on a mobile phone simulating a mobile connection.

The stated aim is to record not just the content in the Internet Archive, but how this content is delivered and served in the HTTP Archive. It focuses our attention on the state of front end web development, including how we as designers and developers are changing the web.

With this focus on the front end, let’s take a look at what has happened to bytes on the page in recent years.

In April last year, we passed an average of 2 megabytes per page and we have not looked back. We currently sit at a little under 2.3 Mb per page and we will pass an average of 2.5 Mb by the end of this year. That’s for every page.

Mobile users fare slightly better with the current average weight of a page accessed via a mobile device sitting at 1.2 Mb.

The average weight of each web page is 250% of what is was in 2011.

There are any number of statistics I could show you to demonstrate what we as web designers and developers have done to damage the web. I could show you the increasing number of assets we’re using (around 100 per page), the tenfold increase in the use of web fonts, or any number of the 44 data points made available by the HTTP Archive. However, while factual, they’re all abstract.

Try waiting out the typical web page loading in awkward silence. To demonstrate what that feels like, without the payoff of a web page at the end, I’ve created a video at http://pwcc.cc/respond/wait.

When you visit this, you’ll see it’s 4.2 seconds before the page starts rendering, 12.7 seconds before the page is visually complete and 15.2 seconds before the page has fully loaded.

It’s worth remembering this is the average load time on a desktop using a fast, wired connection. On mobile connections, surrounded by EMF interference on a train or a tram, or when connecting to a server overseas, it will be slower.

Why speed matters

As a user, the internet being slow is an inconvenience. We sit on public transport looking at a screen with a blue progress bar apparently going backwards and, after a few moments, we give up and jump over to a competing site.

It’s at this point that performance starts costing you – yes, you the internet professional reading this – money. Without meaning to get all neoliberal trickle-down economics on you, even for the employed reading this, an effect on your company’s bottom line affects how much they can pay you.

Case study after case study has revealed the effect of performance on revenue through declining conversions.

A few years ago, Walmart acknowledged internally that their site had performance issues. These performance issues became particularly apparent on high traffic days – when the opportunity for turnover is at its greatest – such as Black Friday and Cyber Monday. Walmart found their conversion rate declined exponentially as their users waited for the page to load, with the first four seconds being a real killer.

Amazon discovered it would cost them an inhumane amount of money – $1.6 billion in sales annually – were their site to slow down for a mere second. To put that into perspective, in 2013 Jeff Bezos purchased the Washington Post company for 250 million dollars. The one second slowdown would cost them that amount every 55 days.

In percentage terms, Amazon’s drop in sales is 1% for every additional 100 milliseconds of load time. Shopzilla increased revenue by 12% by improving their load time by just a few seconds. Yahoo increased page views by 9% with an improvement of 400ms. And they’re Yahoo!

It doesn’t take a great deal of imagination to see why improving your site’s performance could lead to a tidy little bonus come Christmas time, which is a nice side effect of helping to make the web a better place.

How we measure speed

The facts about performance are all very interesting but, without knowing where your site stands, largely useless. Once you decide to improve performance, you need to check what is slowing down your site to discover where the easier wins are. Why refactor code to save 100 ms if removing a blocking request will save 300?

While you’ll hear people talking about page-speed score as a convenient shorthand (me included), it’s a single number that provides minimal insights.

For more meaningful metrics, WebPageTest is the most convenient tool for measuring the effect of a change. It’s pretty much enter the URL and go. There are a bunch of locations and other settings you can change, but when measuring the effect of a change, consistency is key.

When choosing a browser to test in, I tend to take my lead from Google Analytics. For my own site that means Chrome on iPads and iPhones. For a client site not visited exclusively by middle-class internet professionals, the browser selection may vary.

When you first run WebPageTest, you are presented with some key metrics. The three I consider most important, all related to the user’s experience, are: time to render starting, render completing and the document loading. These are the three I highlighted earlier while we were waiting for the average web page to load.

On WebPageTest, I tend to spend most time looking at the filmstrip view. My biggest concern is how visitors experience the site loading, often referred to as perceived performance. As long as text is readable and calls to action are working within the user’s viewport, it doesn’t really matter what is happening elsewhere on the page.

What causes the delays?

At the time of writing, over 90% of web servers use HTTP 1.1 (w3tech.com). If you work in client services, or on a product installed on client servers, the chances are your work will ultimately be delivered from a server running HTTP 1.1.

The first step is for the browser to look up the IP address of the server, and for the name server to respond.

Figure 1

The browser then makes the first of two round trips to the web server by connecting and waiting for the web server to respond with the open connection:

Figure 2

Once connected, the browser requests the web page in a protocol it understands, in this case HTTP 1.1. The browser includes the name of the site as there can be multiple sites on any one server, and the server responds with the web page.

Figure 3

When requesting the web page, the browser includes a bunch of other details we don’t need to worry about when simulating the connection from the command line.

For HTTP 1.1, the browser needs to initiate every connection. It can make multiple parallel connections and reuse them when needs be, but for each connection it needs to go through the original round trip when connecting.

As the browser needs to initiate every connection over HTTP 1.1, the number of assets on a page affects how quickly it can load. The browser needs to download and begin processing the HTML before it knows to download the CSS. Once the browser downloads and starts processing the CSS, it discovers images and other assets it needs to download.

By downloading the images, etc, the browser blocks itself from downloading some JavaScript. While processing the JavaScript, the browser discovers an iframe it needs to load. The browser downloads the iframe (assuming it’s not blocked by other assets) only to discover CSS, images and other assets.

Something had to be done. That something is HTTP 2.

As you research HTTP 2, you’ll come across articles and podcasts telling you it’s time to forget everything you know about performance. I think it’s too early for such grand declarations, when over 90% of web-servers are running HTTP 1.

And if you’re lucky enough to have a site running on an HTTP 2 server, a little under 40% of your visitors will still be stuck using HTTP 1, according to caniuse.com.

HTTP 2 is a binary protocol so, unlike HTTP 1.1, we can’t run the commands in the browser to emulate a connection, we’re limited to describing it. Although it’s not part of the protocol, all browsers currently offering support require a secure connection for HTTP 2. The process is as follows:

1. The first round trip to the server is for the browser to open the connection, and for the web server to respond. As happens in HTTP 1.1

2. On the second round trip, the browser requests details about the server’s SSL certificate, and the server responds with those details. If the server supports HTTP 2, it includes this as additional information in the reply.

3. On the third round trip, the browser calculates an encryption key and sends it to the server. Without waiting for a reply, it starts using the encryption key to request the first asset from the server, the web page the user requested. As the web server has indicated HTTP 2 support, the browser requests it in this protocol.

So far, no real difference from the earlier protocol. It’s once the browser starts processing the page and discovers the other assets, that it finds it can request these over the same connection without waiting for the connection to clear. Instead of three round trips to the server to request the CSS, it takes one. As the browser requests assets, it can continue to request others without other assets blocking the connection.

If downloading a web page was a conversation, HTTP 1.1 would be over a CB radio allowing only one person to talk at a time; whereas HTTP 2 would be a crowded room with multiple conversations happening in one place at any one time.

Where HTTP 2 really provides a performance boost is with HTTP 2 server push. This is a technique in which both the browser and the server can initiate sending a resource across the wire. This allows the server to include the CSS and other files when a browser requests the web page.

Including an asset via server push is incredibly easy. The convention is to trigger the browser to send the additional resource using a link in the HTTP header. In PHP (the language I usually use), this becomes:

if ( is_http2() ) {
        // Set HTTP Push headers, do not replace
header( 'link:; rel=preload', false );
header( 'link:; rel=preload', false );
} 

However, this presents a problem. It instructs the server to push the two additional files on every load, without considering the state of the browser cache. If the files are in the browser’s cache, our efforts to speed up our website’s load time have resulted in unnecessary data being transmitted.

Server push is unsophisticated; it lacks the smarts to determine if a file is in the browser’s cache. Browsers can cancel the transmission but by the time they do, the server has already started sending data down the line.

The solution is to check if the file is cached in the browser and only push the file if it is not:

if ( ! is_cached( '/style.css' ) ) {
  header( 'link:; rel=preload',    false );
}

Regrettably, there is no is_cached function in any programming language to check if the browser is caching a file. It’s not something the browsers report, and for security reasons nor will they.

if ( ! is_cached( '/style.css' ) ) {
  header( 'link:; rel=preload',    false );
  setcookie( '/style.css', 'cached', 0, '/' );
}

To fake the cache detection, we need to set a cookie indicating the file is likely to be in the browser cache. In this example I’m setting the word cached to test against, if the file version changes regularly, then you may want to use the version number.

function is_cached( $filename ) {
  if ( 'cached' === $_COOKIE[ $filename ] ) {
    return true;
  }
  else {
    return false;
  }
}

Our function is_cached becomes a check for the existence of a cookie against the file name. I’d write some additional code for a production version, and as a first step I’d hash the file name, but exactly what the code would look like depends on the site specifics.

What the transition to HTTP 2 means

Over the next two or three years, to keep our sites performant, we’re all going to have to consider the impact of every byte we put on the page.

Once we have an HTTP 2 enabled server – and we should all argue for this to happen sooner rather than later – we have to think how bytes on the page impact visitors to a site on a fast or slow connection, and to think about the impact under both HTTP versions 1 and 2.

At times it will be annoying, at times frustrating, but it will keep our jobs interesting.

And that’s why I love working in the industry we do.

The post Idea of the Week – Peter Wilson appeared first on Web Directions.

Monday Profile: Sara Soueidan

Source: Web Directions BlogJohn • 12 June 2016 11:30 PM

sara soueidanThis week’s Monday profile is Sara Soueidan, a freelance front-end web developer, writer and speaker from Lebanon – and SVG Guru.

Sara spoke at our Respond Front End Design conference, and this profile appeared in our magazine, Scroll, which you can download right now.

You can follow Sara on Twitter, and find her at https://sarasoueidan.com/.

Q Describe your family.

A I’m 29 years old and the fourth in a family of five children. My family currently lives in Lebanon and has been for the past 21 years. Before that, my parents moved a lot from one country to another, until they finally settled down for eight years in Dortmund, Germany, a short while after I was born. I was born in Lebanon but spent the first eight years of my life in Germany. My sister has three kids and she lives in a house close to my parents’ house.

I have a brother who works in Africa, and the rest of the family lives in Lebanon. I work freelance from my home office there.

Q What book has changed your life in some way?

A The Quran has the biggest influence on my life. It’s the light of my heart and is what gives me peace and keeps me in good balance whenever I feel lost. Apart from that, I’m not much of a book reader since I am more of a visual learner and prefer watching things instead of reading them. That said, I did get more into the book reading world in the last few months, and one book that has changed the way I think about user interfaces in general, and web interfaces in particular, is Seductive Interaction Design by Stephen Anderson.

Even though I’m not a designer, that book has changed the way I perceive interfaces as a user, and has changed the way I approach “designing” my own pages, making sure I always think from a user’s perspective. This, in turn, has led me to focus more on all aspects of accessibility, from tone to color and everything in between.

Removing yourself from the position of a developer or designer and changing perspective has an immense result when it comes to designing successful user interfaces and experiences.

Q What formal qualifications do you have? How did you end up doing web work?

A Web-wise: I have a Bachelor’s Degree in Computer Sciences. Though I can confidently say that I am self-taught, because I never attended any front-end development classes in college. Almost everything I know today I learned online.

Outside the web, I’m quite good at drawing—drawing people, to be more specific. Whenever I draw someone using charcoal, I almost always get a comment from someone saying “you didn’t draw that—you printed it off the computer”. So I suppose that kinda counts as a qualification, right?

The first time I ever saw HTML markup was in eighth grade. I loved it so much that it felt like a second language I never knew I could speak. I took one class in school and that was it. Years later, I reluctantly chose Computer Sciences as my major, and that’s how I got introduced to programming concepts and a bit of back-end development using PHP and mySQL.

After graduation, I wasn’t sure which path to take and what to do for a living. A year and a half after that, my best friend—who at the time also worked as a web designer and developer—gave me the push I never knew would change my entire life.

He suggested I get into web development, knowing how much I loved it when I was younger. I gave it a shot, started learning CSS from Point Zero, and in 2013, I was approached by an American client to build the front-end of a web application they were working on at the time. I started writing on my blog right around that time as well, and my writing is what encouraged people to approach me and invite me to give talks at conferences.

So you could say I never planned it, but am more than thankful to God for choosing the best path for me I could ever have wished for.

Q Describe what you do. What’s your job? Is presenting at web conferences part of that job?

A I’m a freelance front-end web developer. I work with design and development agencies around the globe, building websites and applications, focusing on HTML5, SVG, CSS and JavaScript. I don’t
do any back-end coding. I also write articles and speak at conferences, and like to consider both as facets of my work that I very much enjoy.

Q Do you give much thought to the title you apply to yourself? Does it matter?

A Not so much, no. I like a lot of titles that I hear here and there, and find myself in quite a few of them. “Front-End Developer” conveys my skills quite well to my clients, so I stick to that, along with some extra elaboration on my website to make sure my clients don’t have any incorrect expectations.

I definitely avoid the word “Designer” though, even though I know that many people with my skills would call themselves “front-end designers”—which I like, but would definitely confuse my clients, some of whom already mistake me for a designer and send me design requests that I don’t normally do.

I do think titles matter, but it’s too controversial and usually both sides of the controversy have quite valid points, so personally, frankly I don’t bother giving this too much thought.

Q Describe the first time you gave a presentation on a web topic.

A Oh, that was a fantastically scary time!! It was so exciting but also so intimidating that I had a moment on stage where I forgot the word that I wanted to say and ended up with a thought in my head that said “What are you doing here?! Just get off the stage and go sit back at the table”. Ha ha. It was the first time I ever spoke in English continuously for more than 30 minutes, so it wasn’t easy and I forgot quite a lot of words on stage, but one of them was the worst, so that idea did cross my mind.

But then I remembered the a tip my friend Bruce Lawson told me via Twitter right before I went on stage: “Just breathe. And keep going.” So I literally did that: I took a deep breath, rephrased what I was going to say and just kept going. By the time I reached the last section I couldn’t believe it, so I ended up saying “I can’t believe I’m at the last section”… out loud … to the audience!

After the talk, I felt absolutely nothing. It was like I hadn’t even give a talk. You know how you feel numb after a dentist’s visit and only start feeling the pain after the pain-killer effect goes away? That’s exactly how I felt. For about an hour, I felt like I hadn’t even been on stage at all. It was the fantastic feedback from the super nice attendees after the talk that sort of “woke me up” from my trance, and that’s when I realized I must of done a fairly good job.

I hated watching myself speak and said I’d never speak again after watching the video because I was too embarrassed. But, well you get over it after a while, and the excitement of being on stage sucked me back in just 4 months after the first talk, and I’ve kept going since.

Q In The Graduate, Mr McGuire has just one word to say to aimless college graduate Benjamin Braddock: “Plastics”. What word would you give to today’s prospective web professional?

A ‘Intempathy’. OK, that’s not a word. But I had to choose only one when I would actually say two: Integrity & Empathy.

I believe anyone can master (almost) any skill they want, but the truth is that what makes a good web community is the people behind it, not those people’s skills; and the only way it can grow positively is if people understand each other and feel for each other and are nice and kind to each other.

It’s very common for people to forget that there is another person sitting on the other side of the screen. We’re not robots. It’s our behavior that defines who we are, and that eventually defines our community. Having strong moral values and empathising with people goes a long way in pushing the Web forward in the right direction.


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.


The post Monday Profile: Sara Soueidan appeared first on Web Directions.

Video of the Week: Elijah Manor–JavaScript Code Smells

Source: Web Directions Blog John • 09 June 2016 11:42 PM

Recently, someone who’ll remain nameless, but who holds something of an engineering leadership role at a high-profile financial institution in Australia, said to me “It’s not like this is rocket science. It’s only JavaScript”.

This is someone who works with JavaScript day to day. But this attitude has somewhat overshadowed the language since its inception. Partly, it’s that word “script”, and the marginal place scripting has traditionally had in the computing world. Partly it’s because for a long time, the Web has been seen as primarily a communications medium, not a computing platform.

Associated with this is that we’ve often built things for the Web in “quick and dirty” ways, rather than taking the time to engineer them properly. Perhaps that approach made sense when the Web was primarily “owned” by marketing and communications teams, and what we built was more campaign (made to do a specific communications job for a limited period of time) than product focussed (built to deliver ongoing value for users and the organisation).

But times have certainly changed, and the sort of challenges software engineers have long faced with traditional software systems are our problem on the Web, too. So, a more engineering mindset and approach has been something of a focus at Web Directions for some time now, particularly with our conference Code. And this week’s Video of the Week, from last year’s Code is a perfect and incredibly useful example of this. In it, Elijah Manor talks about JavaScript “code smells” – those often common patterns or approaches that can, in the words of Martin Fowler – who coined the term, indicate “deeper problem[s] in the system”[1].

Elijah takes this idea and applies it specifically to JavaScript. I found this one of the most useful sessions we’ve had at one of our conferences for a long time, and really recommend it.

In fact, I found it so valuable much that this year at Code, we’ll have a session on CSS Code Smells, from Fiona Chan. If you want to be a better Front End Engineer, you should definitely get along. This year Code is coming to both Sydney and Melbourne.

Notes

Martin Fowler: CodeSmell

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.


The post Video of the Week: Elijah Manor–JavaScript Code Smells appeared first on Web Directions.

Video: In conversation with Ethan Marcotte

Source: Web Directions BlogJohn • 08 June 2016 11:32 PM

Recently we had the great privilege of having Ethan Marcotte speak at Respond, our Web design focussed conference.

While Ethan (and other speakers) were in town, we tried a bit of an experiment. Why not record conversations with the speakers about their work, their ideas and their interests?

We think it turned out pretty well, and over the coming weeks we’ll be releasing not only my conversation with Ethan (videos this week, and a slightly longer podcast version next week), but conversations with Sara Soueidan, Jen Simmons, Karen McGrane, Rachel Simpson and Russ Weakley as well.

All fully captioned too.

Enjoy my conversation with Ethan, on the past, present and future of the Web–I certainly did.

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.


Notes, links and ideas

Responsive Web Design.
The A List Apart article by Ethan that gave the name to the phenomenon, and which outlined the key patterns and practices, with examples from Ethan’s redesign of the Boston Globe.
Image Replacement Techniques
“IR” techniques were developed to allow images to be used in place of text, in ways that were still accessible. [editorial, I always thought they were a terrible idea]
Sydney Morning Herald (December 29, 2004 Edition)
The Sydney Morning Herald, a Fairfax Media newspaper is considered one of Australia’s key newspapers. Their 2004 redesign was a very early, CSS and standards based design for such a significant, large scale publication.
Emulating Network conditions
Using tools to emulate network conditions, in this case Chrome’s developer tools. Other browsers developer tools similarly allow you to test your site as viewers of networs of various speeds might.
Trent Walton Device agnostic
Trent Walton’s article that refers among other things to “hostile browsers”.
Dao of Web Design
My article in A List Apart that Ethan (very kindly) remembers, and from which this podcast takes its name.
Stewart Brand
From the Whole Earth Catalogue to the Long Now foundation, and much in between, Brand’s influence on the internet, the Web, and the wider world is impossible to overstate.
How Building Learn
Brand’s 1997 work on architecture thatEthan refers to.
Shearing layers
and their applicability to web site design
Brian Rieger’s article on Virtual Reality and Augmented Reality
What are these things, and how do they relate to the Web?
VR nausea research
it even has a name, “Virtual Reality Sickness”
Jetpack Futurism
My article on “jetpack futurism”, and the common tropes of visions of the future that I argue in many ways constrain our ability to predict, and invent the future.

The post Video: In conversation with Ethan Marcotte appeared first on Web Directions.

Minutes Telecon 2016-06-08

Source: CSS WG Blog Dael Jackson • 08 June 2016 07:09 PM

Full Minutes

CSS Pseudo-elements Level 4 Updated

Source: CSS WG Blog fantasai • 08 June 2016 06:45 PM

The CSS Working Group has published an updated Working Draft of CSS Pseudo-Elements Level 4. This CSS module defines pseudo-elements, abstract elements that represent portions of the CSS render tree that can be selected and styled.

This somewhat-overdue publication includes the new ::marker pseudo-class, as well as ::inactive-selection. Changes since the last Working Draft are listed in the Changes section.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-pseudo]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

The CSS WG updated the Working Drafts of CSS Pseudo-Elements…

Source: W3C's Cascading Style Sheets home page07 June 2016 12:00 AM

7 Jun 2016 The CSS WG updated the Working Drafts of CSS Pseudo-Elements Module Level 4, CSS Generated Content Module Level 3 and CSS Pseudo-Elements Module Level 4. The Houdini TF published first drafts of Worklets Level 1, CSS Typed OM Level 1, CSS Properties and Values API Level 1 and CSS Painting API Level 1

Monday Profile: Karen McGrane

Source: Web Directions BlogJohn • 05 June 2016 11:44 PM

karen mcgraneThis week’s Monday profile is Karen McGrane, Author, renowned content strategist, and someone who’s been working to make the Web a better place since almost its inception.

Karen spoke at our Respond Front End Design conference, and this profile appeared in our magazine, Scroll, which you can download right now.

You can follow Karen on twitter, and find her at KarenMcgrane.com

IN ONE SENSE I DON’T HAVE A LOT OF FAMILY. I AM AN ONLY CHILD, I AM NOT MARRIED, I HAVE NO CHILDREN. (I DO HAVE PARENTS.)

In another sense, to describe “family” as only blood relations strikes me as too limiting, as we don’t live in a 1950s children’s book. I have dog godparents and blood sisters and foster brothers and friends who I’d die for. Your family should include people you choose.

Q What formal qualifications do you have? How did you end up doing web work?

A I am one of the few 20+ year veterans in this industry with formal training. I studied human-computer interaction and technical communication in a masters program in the mid-90s.

If I were studying today, I’d be tempted to rename those programs Interaction Design and Content Strategy. I knew, back in 1995, that I wanted to work on the web, and I went to engineering school to understand it better. In retrospect, it feels like a great privilege to have learned the foundations of the field in graduate school, since so many people have had to pick up bits and pieces along the way.

Q Describe what you do. What’s your job? Is presenting at web conferences part of that job?

A I answer emails and make spreadsheets and take screenshots of web pages. Somewhere in there I try to make the web a better place, for the people who use it and for the people who create and maintain it.

Because I am an independent consultant working with clients, speaking at web conferences is part of my job. The best client relationships are the ones that start with someone saying they heard me speak.

If a client can see themselves and their problems in the talks that I give, then they know I understand what they’re going through and I can help them. You have to market your business somehow, and for me, speaking is an enjoyable way to find new work.

Q Do you give much thought to the title you apply to yourself? Does it matter?

A My title is “Managing Partner” even though I have neither employees or partners. I have business cards left over from a time when I did have employees and partners, so that’s what I call myself. Titles can be important in certain contexts, but mine isn’t so important to me that it’s worth reprinting my business cards.

Q Describe the first time you gave a presentation on a web topic.
A I spoke at the very first Information Architecture Summit in 2000. I emailed Lou Rosenfeld and talked my way onto the program, believing that was an event I should be a part of. I gave a talk on modular content and design, based on a case study of a project from Encyclopedia Britannica. Recently, a friend pointed out that I’m still presenting on essentially the same topic, more than 15 years later. He asked if I’d become bored with the subject matter — the truth is I find it more interesting and rewarding than ever. If I spend my life’s work exploring that very same topic, I’ll feel it was time well spent.

Q In The Graduate, Mr McGuire has just one word to say to aimless college graduate Benjamin Braddock:“Plastics”. What one word would you give to today’s prospective web professional?

A Stylesheets.
That’s probably two words. I don’t mean that strictly in the CSS sense, but in the sense that people need to be able to encode semantics separate from styling. Whether you’re a writer, or a designer, or a developer, working with stylesheets is a skill that pays off. I wish we taught it in schools.

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.


The post Monday Profile: Karen McGrane appeared first on Web Directions.

Feeds

The Future of Style features:

If you have a post you want to add to this feed, post a link (or the whole thing) on the CSS3 Soapbox. If you own a blog with frequent posts about the future of CSS, and want to be added to this aggregator, please get in touch with fantasai.

fantasai

Made with CSS! Valid CSS!Valid HTML 4.0! RSS feed Atom feed