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

Right-to-left scripts

Source: ishida blog » cssr12a • 25 August 2016 07:32 PM

These are just some notes for future reference. The following scripts in Unicode 9.0 are normally written from right to left.

Scripts containing characters with the property ARABIC RIGHT-to-LEFT have an asterisk. The remaining scripts have characters with the property RIGHT:

In modern use

Adlam
Arabic *
Hebrew
Nko
Syriac *
Thaana *

Limited modern use

Mende Kikakui (small numbers)
Old Hungarian
Samaritan (religious)

Archaic

Avestan
Cypriot
Hatran
Imperial Aramaic
Kharoshthi
Lydian
Manichaean
Meroitic
Mandaic
Nabataean
Old South Arabian
Old North Arabian
Old Turkic
Pahlavi, (Inscriptional)
Palmyrene
Parthian, (Inscriptional)
Pheonician

Minutes Telecon 2016-08-24

Source: CSS WG Blog Dael Jackson • 25 August 2016 01:35 AM

Full Minutes

Minutes Telecon 2016-08-17

Source: CSS WG Blog Dael Jackson • 18 August 2016 12:57 AM

Full Minutes

Minutes Telecon 2016-08-10

Source: CSS WG Blog Dael Jackson • 11 August 2016 01:38 AM

Full Minutes

Minutes Telecon 2016-08-03

Source: CSS WG Blog Dael Jackson • 04 August 2016 01:06 AM

Full Minutes

Color Function Syntax Update

Source: CSS WG Blog fantasai • 29 July 2016 01:12 AM

From Tab’s blog post on the recent changes to the Color module:

Yesterday I committed a few changes to the CSS Color spec that are proving a little controversial to people without any background on the changes. Hopefully this will help!

Specifically, I made it so that the rgb() function (and others) can now use the syntax rgb(0 255 0 / 50%) for half-transparent green. Previously you’d write that as rgba(0, 255, 0, 50%). Why’d I make this change?

This is part of a general overhaul to how CSS defines functions that fantasai and I are pushing. The overall strategy is written up on our wiki, but the general idea is that CSS has some informal rules about how to organize things and use certain punctuation characters. In particular, in CSS properties we normally just separate values with spaces, relying on distinguishable syntax (like <string> vs <number> vs <length>) or just careful ordering to keep things unambiguously parseable. We use punctuation separators only for very specific purposes: commas are used to separate repetitions of a base value (like layers in the background property, or font names in the font-family property), and occasionally, when we can’t do anything better, a slash is used to separate two otherwise-ambiguous values (like font-size vs line-height in the font shorthand, transition-delay vs transition-duration in the transition shorthand, or the multiple pieces of syntax in a border-image layer).

However, functions violated those rules. They used commas extensively and somewhat inconsistently, just to separate values from each other. On the one hand, this makes CSS functions look slightly more like functions in a traditional programming language; on the other hand, it meant you had to learn a different mental model of how CSS’s syntax works, and type a bunch of comma characters that weren’t actually necessary. fantasai and I have gradually come to the position that it’s worthwhile to unify CSS’s syntaxes, making functions more property-like. (Our position can be summed up aptly as “functions are just named chunks of CSS syntax”.)

Color

So that brings us to the Color spec. Color 3 was already a function-full spec, and Color 4 more than doubles that number, adding hwb(), gray(), lab() and lch(), and color(). The first four of those look similar to the existing rgb()/etc functions, just taking a couple of numbers, so they were originally designed with the same syntax, separating every number with commas.

But color() was a bit more complex, more like a CSS property. It had to take a colorspace name, an arbitrary number of arguments to the colorspace, an alpha, then finally a fallback value in case the colorspace wasn’t loaded or was invalid. Putting commas between every value there just got ridiculous, not to mention made it difficult to read; in particular, it was hard to tell where the colorspace arguments ended and the alpha began.

So, I opened Issue 266 about it, and discussion eventually led us to making it use CSS property syntax pretty much exactly: color() takes a comma-separated list of colors (each one serving as fallback for the previous), and within each color, everything is space-separated. Because colorspaces can take an arbitrary number of numeric parameters, the alpha value was ambiguous (hard to even tell whether or not there was an alpha at a casual glance), and so we employed the slash to separate it visually from the parameters.

At this point, tho, it was slightly weird to have this one color function use this particular syntax form, while none of the others used anything like it. Welp, all the color functions were on our wiki page’s list of things to overhaul anyway, so bombs away! We went ahead and changed all the new functions to use the same syntax (all values space-separated, with an optional slash-separated alpha), and then added a new syntax variant to the old functions with the same form.

(I stress, this is a new variant syntax, not a replacement. All your old rgb(0, 255, 0) code is fine and will never be incorrect. We’re just classifying it as a legacy syntax; we’ve got a handful of those cluttering up CSS specs.)

So, now all the color functions use the same syntax form, and they all agree with our general push to make functions resemble properties more closely. It may feel a little weird at first, but I think you’ll appreciate it as you get used to it (a few characters less typing, at the very least). And we’ve been edging this way for quite a while – as far back as linear-gradient() we were trying to use commas reasonably, with the complex sizing/positioning part up front completely space-separated and commas used only to separate the color-stop repetitions.

Minutes Telecon 2016-07-27

Source: CSS WG Blog Dael Jackson • 28 July 2016 01:19 AM

Full Minutes

Idea of the Week: Ricky Onsman

Source: Web Directions BlogJohn • 26 July 2016 12:30 AM

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

As he explains, you should definitely see what your Sydney and Melbourne code-focused meetups are up to this week and next.

Meetups at Conference Time

by Ricky Onsman

Web Directions has long been a sponsor of meetups that have a focus on web technologies. Often, these meetups in different cities around Australia provide an opportunity for conference speakers to test material in front of a willing and supportive audience, in the process helping to promote the conference and also attracting more people to the meetup.

For that reason, meetups that happen around the time of a conference event are often exciting affairs, with more people than usual and an international flavour.

The SydCSS meetup held the night before our Respond conference in Sydney in April was just such an event. One hundred and thirty of us turned up to the rather cool rooftop bar of the Pyrmont Bridge Hotel on a balmy Sydney early autumn evening, where we found a generous bar tab and regular rounds of tasty snacks circulating through the room. Classy, or what?

There was a real air of excitement as the usual buzz of friends and colleagues seeing each other was heightened (literally!) by the spectacular semi-outdoor setting, as well as the awareness that tonight would be graced by two major speakers from Respond.

Rachel Ilan Simpson is an American UX Designer based in Munich who works on the Chrome team for Google. Her Respond presentation was to be a version of a talk she’d originally created and presented with Guy Podjarnik, and this meetup would give her the chance to test some of the material solo with a live Australian audience.

The topic Rachel addressed was one with which developers and designers alike often struggle: finding the balance between website Usability and Security. Users want sites that can guarantee the security and safety of any information they provide, but they don’t want things to get in their way, like passwords.

Rachel took us through several aspects of the situation, looked at some of the core issues, made us cringe at some of the statistics and wince at some of the examples, and offered some ways all of this might be addressed. It was an excellent preview of her longer presentation at Respond itself.

The other main speaker was Russ Weakley, an Australian designer, front end developer and trainer based in Sydney who has built an international reputation not only as a CSS expert, but as someone who can make the often arcane world of stylesheets comprehensible even to beginners, while inspiring veterans to look at new ways of using CSS.

On this occasion, Russ took us into the world of CSS Property Values and the syntax required to use them properly. That might sound dry – but have you ever seen a Russ Weakley talk? Dry, it was not. He’s a very funny speaker who nonetheless has an excellent grasp of his subject, and that special knack of clarifying things that often look dauntingly complicated.

He even came up with a code puzzle for us to solve, with the winners taking home copies of the excellent Offscreen magazine.

Both speakers received a very warm reception from a knowledgeable crowd. The post-talk questions and answers were informed and technical, which helped to give the whole evening a comfortably techy feel.

As with most meetups, there were short announcements of local projects, opportunities, events and jobs, then a lot of chat until the food and drinks ran out. A top night out.

In Melbourne, a similar event took place the day after the conference, in the form of a mega meetup between the MelbCSS, MelbJS and BeResponsive groups. That time, Jen Simmons and Ryan Seddon spoke to another packed audience.

Wherever you are, whatever your specialties, it’s definitely worth searching out meetups in your area that focus on your interests – especially when they’re sponsored by Web Directions, and even more especially when it’s conference time.

 

The post Idea of the Week: Ricky Onsman appeared first on Web Directions.

Monday Profile: Yoav Weiss

Source: Web Directions BlogJohn • 25 July 2016 12:30 AM

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

Yoav is a Web performance and browser internals specialist, whose talk at Code focuses on third party content on websites, mitigating its impact on performance and security, and its longer term implications.

This interview is also in the second issue of our Scroll Magazine.

Q What made you decide you could do this for a living?

A I grew up in Israel where software development is the major industry. So, before I started higher education, I decided to work for a while to save up some money that would help me get myself through school. With software being the major (if not only) non-minimum-wage option, I started working as a software tester, picked up programming while doing that, and moved to software development a few weeks later.

I found it to be extremely fun and creative and I loved the problem solving part of it. Before I knew it, I was deep in the trenches in a software engineer position.

Took me few more years to actually take some time off in order to go to school and complete a Computer Science B.Sc.

Q Have you ever coded live on stage, or in front of an audience? How did it go?

A No, I have not. I don’t think that my typing skills are up for the task. If I had to demonstrate code on stage, I’d probably use a pre-recorded video.

Q How do you further develop and extend your skills? Books, courses? Noodling by yourself?

A I read professional books from time to time, but most of my reading is done online. A large chunk of my work day (and evenings) is dedicated to reading the latest blog posts, standards discussions and specification changes. Whenever I encounter a new subject that I need to study, I usually tackle it with a mix of tutorial reading and playing around with it in practice.

Q Is it better to learn HTML then CSS then JavaScript, or JavaScript then HTML then CSS, or all three at once, or something else?

A HTML is the foundation upon which the web is built, and it’s certainly not advised to reimplement basic HTML functionality in JavaScript. So, if your job is to build Web pages, you probably want to learn the foundations first, starting from HTML, then CSS and then JavaScript.

That way you can be sure that you’re tackling the problems you encounter with the right tools for the job, creating page components with HTML, styling them with CSS and adding functionality on top of that using JavaScript.

Q What’s the best way to get more women coding?

A I think the real question is how do we avoid discouraging the women and other under-represented groups about to enter the field from feeling marginalized and unwelcome. To me, the key is to create welcoming and “noob-friendly” environments. Many projects use the “meritocracy” narrative in order to justify shitty behaviour to people new to the project, or to people in general.

That behaviour is particularly hostile to women and other under-represented groups, but at the end of the day, it’s bad for everyone. No-one likes to have to take verbal abuse as part of their work, and certainly not as part of their off-hours open source participation.

I believe that a code of conduct with clear rules regarding unacceptable behaviour and strict enforcement of those rules helps everyone, enables everyone to express themselves, and encourages new people of all kinds to participate.

Q Frameworks. What’s your take? Are they good, bad or does it depend on how you use them?

A Frameworks help speed up development and have certain UX advantages, but they often do that at the expense of our users. Our users often have to run more code on their machines than necessary, which can be taxing for both loading and runtime performance. Especially today, when more and more of our users are on mobile devices, the performance price of frameworks must be taken into account when deciding to use them.

At the same time, the wide use and popularity of frameworks indicates that there’s a need for the abstraction they provide. As someone working on browsers and the Web platform, I give a lot of thought to that subject. I’m hoping that one day we can figure out a way to provide the UX and development ease of frameworks as part of the platform itself.

Q Tabs or spaces?

A Vim.

Q What’s on your horizon?

A I plan to continue working on browsers and their performance-related features, at least until I feel that loading performance is no longer an issue. I don’t think that will happen anytime soon :)

Another issue that’s close to my heart is getting more people involved in Web standards and browser work, which is why I took on co-chairing the Web Platform Incubation Community Group (or WICG for short). So I intend to continue to do what I can in order to make “getting involved” as painless a process as possible.


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


The post Monday Profile: Yoav Weiss appeared first on Web Directions.

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

Source: Web Directions Blog John • 21 July 2016 11:57 PM

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

We finally have the tools necessary to create amazing page designs on the web. Now we can art direct our layouts, leveraging the power and tradition of graphic design. In this eye-opening talk, Jen explores concrete examples of an incredible range of new possibilities.

She walks through a step-by-step design process for figuring out how to create a layout as unique as your content. You’ll learn how Flexbox, Grid, Shapes, Multicolumn, Viewport Units, and more can be combined together to revolutionize how you approach the page — any page.

Get more like this delivered weekly

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


The post Video of the Week–Jen Simmons: Real Art Direction on the Web appeared first on Web Directions.

Minutes Telecon 2016-07-20

Source: CSS WG Blog Dael Jackson • 21 July 2016 12:22 AM

Full Minutes

Video Ristretto: Rhiana Heath–Pop-up Accessibility

Source: Web Directions BlogJohn • 20 July 2016 03:09 AM

Modals and pop-ups can be a really useful tool for displaying additional information or getting users to enter information in a way that doesn’t clutter up your screen. However as yet (one coming soon) there is no official HTML element that lets us display modals in a consistent way. As a result screen readers, such as JAWS and NVDA, have a hard time reading them resulting in a lot of pop-ups not being accessible to people with disabilities.
In this week’s video ristretto, Rhiana Heath looks at how to make modals accessible for people who use screen readers. This uses a combination of ARIA attributes and hidden text to speak with the screen reader. As well as helping of JavaScript to help with some custom keyboard control. All while keeping a pleasing look and feel for all users using JavaScript and CSS.

Want more?

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


The post Video Ristretto: Rhiana Heath–Pop-up Accessibility appeared first on Web Directions.

Monday Profile: Rachel Andrew

Source: Web Directions BlogJohn • 18 July 2016 02:19 AM

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

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

This week, it’s with Rachel Andrew, whose talk and workshop on CSS Grid Layouts should be a conference highlight.

Rachel Andrew: In Person

Q What made you decide you could do this for a living?

A Despite being the daughter of a programmer, I had no intention of working with computers. I trained in dance and music theatre and I was convinced that my future lay in the theatre somewhere. Life had different ideas and I began building websites when pregnant with my daughter in late 1996. By the time she was three years old I was proficient enough to be offered a job in a dot com company. I’m curious about how things work and not afraid to play, experiment and get things wrong. That, coupled with an ability for unpicking complex problems, has made up for my lack of formal training in computer science – though I sometimes find myself searching for the definition of something that everyone else seems to know already!

The web is a great place to work for the polymath. Most of us aren’t sitting in cubicles working on small parts of systems – we get to build large chunks, sometimes even entire experiences. I love that there is always something new to learn and it might be in a completely different area to the last thing I studied.

Q Have you ever coded live on stage, or in front of an audience? How did it go?

A I’m not a fan of live coding in presentations, unless the presenter is truly exceptional at it. There are a few people who really have this skill, however much live coding results in fumbling through examples – often with the audience yelling out corrections to the presenter’s typos! In presentations of an hour or less I prefer to have my code on slides, that I can then talk about. I often link to fully worked examples for the audience to take a look at later. This approach lets me craft a talk of the right length that hits the things I want to share with the audience.

In my day-long workshops I do live code, however I begin with a set of starting point files on CodePen, and we work together to build out the examples. I try to keep the typing to the minimum required to show the techniques – partly to focus on what we are learning but partly for self-preservation. Three years ago I shattered my elbow and have about 30% use of my dominant hand. Typing all day is pretty difficult for me, so I try and keep the examples streamlined.

Q How do you further develop and extend your skills? Books, courses? Noodling by yourself?

A I attend a lot of conferences, I enjoy seeing talks that are on areas I don’t do so much myself. I’m a developer, so it is interesting to sit in on a design talk; I’m not someone who uses JavaScript frameworks such as React, so it is interesting to sit in on a React or Angular talk. I find different approaches make me think about the things I do in a different way.

In terms of CSS, I mostly learn by reading the specifications and building examples. Even where no browser implementation exists, I’ll usually build examples just to clarify how it is supposed to work in my own mind. That is where a lot of my work on CSS Grid started – I was building examples of something that didn’t yet exist in any browser and then as implementations appeared I could see if what I thought was the case, actually worked!

Q Is it better to learn HTML then CSS then JavaScript, or JavaScript then HTML then CSS, or all three at once, or something else?

A HTML and CSS, then JavaScript. You need to understand the DOM and the presentation layer that is CSS before you start using JavaScript to manipulate it. In addition, there is so much now that is part of CSS that traditionally we would have had to use JavaScript for – it is worth making sure that you aren’t using JavaScript for something we have a perfectly useful CSS property for.

Q What’s the best way to get more women coding?

A I’m not sure I have a good answer to that, however I mentioned that my father is a programmer. He was a programmer all through my childhood and worked at Newcastle University in the UK. We would sometimes go visit him at the computing lab, and there I took away the impression that programmers were mostly women. It was women I spoke to, sat amongst the giant whirring computers. It never occurred to me that this wasn’t a job for someone like me.

I think having role models who represent the different reasons why people get into this field has to be a positive thing. Some people are genuinely interested in code, in and of itself. Others are perhaps more interested in running a business, creating products – and writing code is just the route to being able to do that. For young people to see that is I think important, and as important for young men as well as young women.

Q Frameworks. What’s your take? Are they good, bad or does it depend on how you use them?

A It absolutely depends on how you use them, that is the same for any tool. I would encourage anyone who wants to work as a professional in this business to learn HTML and CSS, understand the basics of Accessibility, and also learn a solid amount of vanilla JavaScript. The reason being that these languages and principles are pretty timeless. They will outlast your understanding of the framework of the moment, and they will enable you to make good decisions about frameworks rather than being swayed by what everyone on Twitter is saying.

From that point, you need to look at the business requirements for the thing you are building. How much time have you available? What are the upsides of using a framework, what are the downsides? Does one outweigh the other? You can usually fairly easily make those decisions, and then be in a good position to address any potential downsides with your choice.

My real concern with frameworks is that a complete reliance on tools and frameworks is creating abstractions to the extent that people are unable to engage with the underlying languages. This means they struggle to debug issues, as they don’t understand how to create a reduced test case without the involvement of the tool. It also means that they don’t butt up against places where our core specifications are lacking. I’d love for more people to be looking at the CSS specs for example and asking “why can’t we do x?” If folk are always working with an abstraction they are less likely to do that, instead just working with what their favourite tool gives them.

Q Tabs or spaces?

A I really don’t care. Be consistent with the rest of your team. There are better things to worry about.

Q What’s on your horizon?

A A lot of travel! I’m speaking at several conferences about Grid Layout and related CSS specifications. We’ve also got a bunch of exciting things planned for my CMS product Perch and Perch Runway. Lots to do – but I like it that way!


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


The post Monday Profile: Rachel Andrew appeared first on Web Directions.

Minutes Telecon 2016-07-13

Source: CSS WG Blog Dael Jackson • 14 July 2016 01:02 AM

Full Minutes

W3C Web.br is the main Web conference in Brazil, organized b…

Source: W3C's Cascading Style Sheets home page12 July 2016 06:30 PM

13 Oct 2016 W3C Web.br is the main Web conference in Brazil, organized by W3C Brazil, CGI.br, NIC.br and CEWEB.br. This year's special focus is on the Web of Things and Finance. Keynote speakers include Dave Raggett and Bert Bos. (Conference in Portuguese.)

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

Source: W3C's Cascading Style Sheets home page12 July 2016 06: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.

Ilya Streltsyn (Russian: Илья Стрельцын) collects surprising…

Source: W3C's Cascading Style Sheets home page12 July 2016 12:00 AM

12 Jul 2016 Ilya Streltsyn (Russian: Илья Стрельцын) collects surprising, but beautiful things people do with CSS. (He has similar examples for SVG and JavaScript.) The page is in Russian, but just follow the links from the pretty pictures, or use Google's translation.

Monday Profile: Tim Kadlec

Source: Web Directions BlogJohn • 11 July 2016 01:51 AM

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

We’re going to start with Tim Kadlec, web technology advocate at Akamai, and someone who knows more about the intersection of performance & responsive design than probably anyone around.

Tim’s Code session will focus on giving users the feeling that their web experiences are fast and friction-free. Let’s find out a bit about him.

Tim Kadlec: In Person

Q What made you decide you could do this for a living?

A In junior high, I saw a magazine at a local store that promised to teach you HTML for maybe $6, so I bought it and read it cover to cover. I honestly wasn’t that interested in web development. I liked to write, particularly about the history of basketball at that time, and wanted to be able to publish articles online. So I used the information in that magazine to build a very basic site full of all sorts of obnoxious animated GIFs, where I could write articles about basketball. Occasionally, I helped someone in town put together something simple as well.

In college, I found an ad for an agency that was looking for an entry level web developer. At that point, it had never occurred to me that I could do this as a full-time job, but I called up and scheduled an interview. I basically faked my way through the whole thing. When they offered me the job, I ran to the book store and bought a few books: Designing with Web Standards, Meyer on CSS, DOM Scripting and one or two more.

That weekend, all I did was read and code. By the time Monday came around I was at least OK enough to do the work (luckily, the agency wasn’t doing anything very advanced). Before long, I was hooked.

Q Have you ever coded live on stage, or in front of an audience? How did it go?

A No, never. I’ve seen a lot of people live code, but I can count on one hand the number of people I’ve seen do it well. I would definitely not be one of them. I’m guessing watching me make typo after typo for 45 minutes wouldn’t be particularly interesting to folks.

Q How do you further develop and extend your skills? Books, courses? Noodling by yourself?

A Videos, blog posts and books are certainly a part of it. I stubbornly hold onto my RSS feed and download a ton of talks to my computer to watch whenever I have a spare moment.  The reading and video watching doesn’t do much if you don’t practise, so firing open a browser and seeing what you can build and what you can break is important.

But if I had to say one thing more than any other that helps me, it’s that I am constantly bothering people smarter than myself with questions. Anytime I have an idea to bounce off someone, or run into something that doesn’t make sense, I fire off an email or send a message. We have a lot of smart people in our industry who are willing to share their knowledge — it’d be silly not to take advantage of it.

Q Is it better to learn HTML then CSS then JavaScript, or JavaScript then HTML then CSS, or all three at once, or something else?

A I learned it that way: HTML, CSS then JavaScript. That’s how I teach it to others as well. Markup is your base and everything else is layered on top of that, so to me it makes sense to teach the base first. As long as you start with the vanilla versions of each though, I think you’re probably OK. Jumping into a framework right away obscures a lot of core knowledge and at the end of the day it’s the core knowledge that will help you best adapt to new technologies.

Q What’s the best way to get more women coding?

A I’m not really qualified to provide the best advice here. If you really want to know how to make our industry a more welcome space for women, ask them. Listen to what they have to say and ask for clarification on things you don’t understand. There’s a lot we can do to make our community a friendly, safer space and I think it starts with being willing to listen.

Q Frameworks. What’s your take? Are they good, bad or does it depend on how you use them?

A It all depends. That’s the boring answer, but it’s true. I think it’s incredibly important to know the core language first—CSS before Sass, JavaScript before jQuery—but there’s nothing inherently bad about frameworks themselves. Abstractions can be useful, if applied with care.

The problem I see with them in our industry is the number of people who blindly reach for them, applying framework after framework without realizing what they’re giving up in the process. You don’t always need a framework, and if you understand the core, you’ll be able to tell the difference between when you don’t and when you do.

Q Tabs or spaces?

A Tabs, but not enough to have any sort of serious debate about them. More like the kind of debate you have with friends late one night when everyone involved has had a few drinks.

Q What’s on your horizon?

A The sun.

For the web, there’s plenty of stuff that has me excited: service workers (which I still don’t think we’ve even scratched the surface of) and the physical web stuff come to mind right away. I’m interested to see how we handle the challenges of truly going global as we adjust our sites and applications for different markets, as well as the challenge of reducing our impact on the CPU.

Someone smarter than me pointed out that we’re increasingly becoming CPU bound in terms of performance, not network bound. It’s true, and it’s not necessarily something that has been true for very long. It’ll be interesting to see how we adjust for that new reality that we’ve created with loads of images and scripts.


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


The post Monday Profile: Tim Kadlec appeared first on Web Directions.

Video: in conversation with Jen Simmons

Source: Web Directions Blog John • 07 July 2016 05:03 AM

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

Her current focus is layout for the Web, in particular new layout capabilities in CSS, like Flexbox and Grid, about which she speaks and writes extensively, and about which she spoke at our recent Respond conference. While Jen was in Sydney we sat down and spoke about these new layout capabilities of the Web, how being always connected changes the way our social networks have changed, and much more. It was a long, but very enjoyable chat, and I hope you enjoy it.

As always, the transcript is below, and you can find more video conversations in this recent series, including with

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


Full Transcript

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

The post Video: in conversation with Jen Simmons appeared first on Web Directions.

The CSS WG updated the Working Draft of Media Queries Level …

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

7 Jul 2016 The CSS WG updated the Working Draft of Media Queries Level 4

Idea of the Week: Fiona Chan

Source: Web Directions BlogJohn • 05 July 2016 01:52 AM

Fiona ChanFor Scroll: Respond, we asked several presenters if they’d like to write an article based on or somehow related to their conference presentation.

We’re going to do the same with Scroll: Code, to be distributed at our Code conference (you’re going, right?), and for the next few weeks, we’re going to post a few of those articles here as Idea of the Week.

First cab off the rank is Fiona Chan, former front end dev and lately Technical Recruiter at Lookahead Search, and one of the organisers of the SydCSS meetup group.

Fiona’s article is on “linting” … but we’ll let her explain.

A Brief History of Lint

Do You Lint?

In my presentation for Code 2016, CSS: Code Smell Sanitation, I talk about how to keep your CSS clean and free of errors. Most of the techniques I talk about are applied when everything looks right and has passed linting.

Now, I’m looking forward to telling you more about that, but it occurred to me that I’ve assumed everyone knows about linting.

Maybe that’s not the case. And it’s important that people who haven’t heard of it before, and therefore haven’t used it, feel comfortable about learning about it.

So I’m going to write a bit here about linting, and specifically CSSLint.

Lint

Broadly, a lint tool performs static analysis of source code and flags patterns that might be errors or otherwise cause problems for the developer. Static analysis is when code is checked without actually being activated, as opposed to dynamic analysis when the software is running.

But linting has a history.

Back in the late 1970s, Stephen C. Johnson first developed Lint as a Unix tool that examined C language source code and pointed out code that might contain errors or be structurally unsound.

It appeared in public in 1979 in Unix v.7, as part of the Portable C Compiler.

The name comes from the textile fibres that accumulate on clothing and other material. If you do laundry, you’ll know lint. There’s also belly button lint – let’s not go there.

To clean lint off a jumper or skirt, you might use a lint brush, a tool designed for that purpose. Jonhson’s Lint utility was like a lint brush for C, picking up code that looked messy or badly structured.

From then on, most computer language compilers had a lint checker of some kind built in.

Nowadays, lint checkers are tools that look for structural or syntactical discrepancies code in any language. For JavaScript there’s JSLint, for Python there’s Pylint and for CSS there’s CSSLint.

CSSLint

CSSLint is an open source CSS code quality tool originally written by Nicholas C. Zakas and Nicole Sullivan, released in 2011.

CSSLint screenshot

As the authors say:

CSS Lint points out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

The idea is that you choose which rules to apply and which problems to look for.

CSSLint options screenshot

This shows you both the comprehensiveness and the flexibility of CSSLint. You can see exactly what rules are being checked, and you can choose to implement them or not.

Apart from anything else, it’s incredibly useful to have a checklist of what can and does go wrong in CSS.

It is, of course, really confronting to be told everything that’s wrong with the CSS you wrote. It looked OK last time you went over it, right?

But this is the kind of step you need to take and the kind of check you need to make – to avoid errors, to enhance site manageability and to improve page performance.

It also doesn’t take long before many of these things stick in your head and you already address them as you work.

Controversy

CSSLint is not without its critics. Their criticisms are mostly focused on CSSLint “enforcing” rules that they feel inhibit creativity, or limit ingenuity, or are vague and arbitrary, or encourage bad practice.

In my view, these criticisms are – by and large – not well-founded.

The point of CSSLint is not to enforce any kind of policy or practice, nor is to clean your code for you. It’s designed to point out possible issues you might want to address, according to a set of rules you customise for yourself and your site.

Even if you turn off all the rules, CSSLint is a great basic syntax checker, without having to look at validation issues. Sometimes, you just want – or need – to know that your CSS works.

So, now when you come to my presentation (that’s CSS: Code Smell Sanitation, 3.10pm on Day 1) you’ll know what I’m talking about when I talk about what still needs to be checked after linting – the things even CSSLint might not catch – to keep your code smelling good.

The post Idea of the Week: Fiona Chan appeared first on Web Directions.

The CSS WG published the first draft of CSS Color Module Lev…

Source: W3C's Cascading Style Sheets home page05 July 2016 12:00 AM

5 Jul 2016 The CSS WG published the first draft of CSS Color Module Level 4

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

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 web 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.

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)

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

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