KEYCODE ME - 루피아빠의 웹개발자 이야기

출처 :Tomomi Imura on Mobile Web, Future of CSS

(해당 동영상 및 MP3를 보시려면 위 링크로 이동하세요.)

1.We are here at Craft Con 2014 in Budapest, I’m sitting here with Tomomi Imura, so Tomomi who are you?

Hi, I’m a frontend web developer and I’m focusing more on the UX side but, I would say I’m more focused on mobile because always I had a passion in mobile and I’ve been working in mobile industries for a while, the companies including like Yahoo, but Yahoo's mobile team and I use to be a developer at Palm WebOS and I worked at Nokia as well, so I’ve been in the mobile industry for a while.

2.And you talk a lot about UX but also about the web, in recent times people have been saying that the Mobile web is dead, do you say that they talk nonsense or do you are agree, what is the situation, what do you think?

In some way I agree, I actually I would say “Mobile is dead” is a sensational title that grabs people’s attention, so if we have a news blog that is a really cool thing to say because people react with “What?”, people wants to get attention, so I don’t really think it’s dead of course, it’s not dead, it’s there, but in sense the reason I agree with is because we don’t, we shouldn’t really separate the mobile web from the web because the web is web, so actually like back in mid 2000 I was in Yahoo Mobile and back in the time mobile web was the thing, like mobile web you had heard of, we’ve seen WAP and then we had WML languages as well, but those days are over, now the mobile browsers are just like desktop browsers, we can write HTML 5 I would say and it works with both. So when we are talking about writing for the web that we expect is that it works on any device, mobile, desktop, doesn’t matter. 

Werner: But there is still a slight difference because the mobile devices, as diverse as they are, they have certain sensors that the desktop doesn’t have, you know I can't pick up my desktop and shake it, so there are still UX differences I guess. 

Yes, so the interesting thing is that mobile has its own, I would say, a different user experience because mobile to be mobile we take mobile devices with us, so it makes more sense that, let’s say, like a location where you are saying like motion of the device, something that we can do with the device which we don’t do on the desktop when we are sitting at a desk, so working on the mobile web as a developer we can take advantage working on mobile devices such as using all the sensors, so I was talking about this earlier at the conference as well, so we have the device APIs to access that hardware; mobile is mobile, it's a different experience.

3.You mentioned device APIs, so at this point in 2014, how stable are they, what do they offer, it’s just accelerometers or Geolocation, what do we have?

Yes, and Geolocation is one of the stable one, so the most of browsers already have support, so you can do this to access the user's data so accessing GPS or cell id to get the user location, that is stable. And device orientation event is another thing that we can get information of motion of that device itself, so when it’s tilted we know exactly how many degrees it's moved, and has been supported wonderfully except I think Internet Explorer. And all of that interesting APIs including vibration APIs and actually yes, the vibration API was supported only by Mozilla, I mean Firefox, but now is supported by Chrome, Chrome actually Chrome 30 as well, so yes, Google is catching up and so many other APIs including like actually ambient light APIs, like a battery APIs, currently only supported by Firefox. So there are a lot of other browser vendors that need to catch up and I’m hopeful we'll see this happening this year in 2014.

4.You mentioned Firefox, is that Firefox OS or is that generally Firefox?

I do have couple Firefox OS devices, so I can see that Mozilla is clearly pushing those standards really because they have Firefox always, but actually Firefox as a browser is wonderful, it works as well as the Firefox OS, so it does works fine in Android phones. 

Werner: But in Firefox OS obviously they need these API’s because you can only program them in JavaScript. 

Right, so it looks like they are really trying to set the standard because they want it and if it’s not available as a W3C Standard, they are the ones who are usually proposing it to the standard body to making happen, so I really like to see what they are doing.

5.We talked about mobile devices; so one distinguishing factor of mobile devices is they are coming in different form factors and I think for that the keyword is responsive design. Can you gives us an idea what responsive design is. Is it an UX method, is it a technological method, what is it?

Yes, with responsive design the idea is we try to write once, not a separate mobile site like m.whatever.com and such using one URL and that should work, seamlessly across the devices, because you know, we should not discriminate users, we don’t know, users depend on mobile phones, tablets, a desktop, we don’t know, so we have to keep the best possible experience for any users we have and so far when we are talking about responsive design that’s pretty much all the devices we are seeing, but in future we might have, I don’t know about if TV is going to be big again, I know in the 90’s there was a Web TV, looks like it failed, no one is browsing the web [on TVs].

I would say it’s not really easy to browse web on TV yet but you never know what will happen and where about and now we have Pebbles, Fitbits, etc and they don’t come with Web browsers, but Google Glass does have a browser, so now that will be another challenge that web developers have about how we support those wearable devices. Maybe Internet of things would be the next, again that might not come with browsers, so the experience is different, we don’t know yet, so we have to really think ahead and responsive web to be really responsive to anything, so that’s the challenge we have.

6.What web technologies help me with responsive design, is it CSS, how do I do this?

So mostly I’d say CSS because we have CSS Media Queries and that is a way we can give different experiences, I mean different experiences means UI using CSS to certain, let’s say, browser window height, or maybe not height but browser width or device width, orientation because when we are using a tablet we can switch orientation around, so CSS Media Query is key.

7.How do media queries work, is it just a form factor or can I say “Google Glass” or something like that, how does that work?

That is really another challenging thing because we don’t really have a definite answer, we are trying to find something like a breakpoint, you know like a which, mostly we are doing with the devices width, like the iPad has a certain width, and other devices, but everything is different, so people tend to do get the width of the iPad and such popular devices to support by certain, by size I would say, but many times it doesn’t work out, because we are just guessing what users device's size is, so I would say that’s pretty challenging and we are trying not to use, I mean we are trying not to differentiate by form factors too much because it’s kind of like using user agent sniffing which is a big no-no for developers to do because user agent fails, we don’t exactly get the correct information from this, so we have to make it as generic as possible, so people are using common width of the device in a browser but still that could depend on your design.

8.Talking about CSS, what are some of the exciting new features that you are looking forward to in CSS, what are some of the features that might change the nature of CSS, make it easier to use?

Currently so many developers depend on preprocessors such as Sass or Less because there are so many features that we want to use that are missing from the current web standard. First of all we have so many different browsers means we need to have a browser specific prefix, so if we want to support new features like animations, we have to add browser prefix, the vendor prefix for each one of them and that can be really long, so we want to get rid of those and by using preprocessor. Or I would say variables, if we want to set some colors to certain variables we can reuse the same variable or we don’t have to keep changing each time in design I make changes, right? So this is not doable yet with current CSS but now we have a new standard that is coming, there is a proposal about CSS variables and other things that close a gap in between current standard and something that preprocessors do, so that would be really wonderful news to us.

9.You mentioned Sass and Less, so with these new standards would those go away those preprocessors or do you think they still offer some utility?

I think it will stay but once standards, like CSS standard catches up, this is something interesting because like maybe few years ago everybody was using jQuery, but then what the jQuery guys have done to the web standard is actually wonderful, I mean you use to have a $ but now we have a querySelector (method) as a standard, so something like this once [the features ] make it into the standard maybe we are going to depend and less and less on Less, I don’t try to joke about it, but yes, that’s what I think and that will be actually great news because it’s not like you know we are ditching them, it’s more like Sass and Less guys have contributed so much to make the standards better, so I think that will be great if it happens.

Werner: They basically helped design the standard by providing a useful workaround.

I think so, I would say so. 

Werner: That happens a lot in the web, as you say, with jQuery and all these ideas, it’s a very communal I guess design process. 

I really think web is free to the community work and everyone of us as a developer to participate, doesn’t matter if we are actually officially W3C member or not, we can always express our opinions.

10.Since you mention Less and Sass, what do you think of other languages that compile to JavaScript, so when you write code do you write JavaScript, do you write CoffeeScript, do you write Dart?

I can’t really say much because I haven’t really used CoffeeScript, so when I use JavaScript it’s JavaScript and it’s yes, I can’t really see if you know what I mean, I’m not saying I can’t trust how it’s get it converted and so, but I just simply haven't tried. 

Werner: You still prefer JavaScript. 

Yes, just my personal preference. 

Werner: To wrap up, a few months ago, years ago you created something involving HTTP and cats, so you bring the best two thing on the web together, what did you do there. 

So really Internet is for cats, is what everybody says, so I’m a big cat person, I do have a cat, I used to have two but now only have one, but anyway I’m a big cat lady and I love Internet as well so of course you want to bring two things together, and I don’t know how I got the idea but you know of course HTTP status errors are just something that we see all the time, maybe daily, so one day I just decide to combine them all, I never expected that was going to be so successful that gave me like 15 minutes of fame. Interesting phenomenon people do like cats. 

Werner: If you want to promote something, use cats. 

Just use cats, it’s my takeaway, cats solve everything. 

Werner: It’s a great way to end and thank you very much Tomomi!

Thank you for having me!