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

Updated Candidate Recommendation: CSS Backgrounds and Border…

Source: W3C's Cascading Style Sheets home page17 October 2017

17 Oct 2017 Updated Candidate Recommendation: CSS Backgrounds and Borders Level 3.

Minutes Telecon 2017-10-11

Source: CSS WG BlogDael Jackson • 11 October 2017

Full Minutes

CSS Multi-column Layout Level 1 republished as a Working Draft

Source: CSS WG Blog Rachel Andrew • 05 October 2017

The CSS Working Group has published an update to CSS Multi-column Layout Level 1 as a Working Draft. The Group resolved to republish as a Working Draft rather than a Candidate Recommendation due to the large number of changes made to the specification since the last publication of the Candidate Recommendation on 12th April 2011, and the backlog of outstanding issues still to resolve.

Changes since the 2011 Candidate Recommendation

A list of significant changes made to the specification can be found in the Changes section of the Working Draft. Summarized below are some notable changes.

Next steps

I became co-editor of the specification at the CSS Working Group meeting in Paris in August 2017, and am keen to maintain momentum with this work so we can get the outstanding issues in Level 1 resolved. My intention as an editor is to work through the outstanding issues, and also to ensure that the test suite is brought up to date.

I’m aware that the interoperability issues in Multi-column Layout have been a source of frustration to those trying to work with it, I hope that reviving work on the specification will be the first step in improving that situation.

Send your feedback!

I would love to hear from web developers, and those working with multicol for EPUB and print output, in addition to people implementing the specification in User Agents. In particular I am keen to clarify anything where differing interpretations of the specification have caused interoperability problems.

The existing issues are listed on GitHub, and this would be the preferred way to send feedback on the specification. If you have thoughts on an existing issue please add a comment. If you have a new Multi-column related thought or have spotted a problem in the specification, please raise a new issue. I’m very happy to help figure out if an issue is with the User Agent, with this spec or another spec, so please raise an issue even if you are unsure where the problem originates. If you cannot post to GitHub for some reason then posting to www-style with the spec code [css-multicol] is an option and I will copy the issue over to GitHub.

Updated Working Draft: CSS Multi-column Layout Level 1.

Source: W3C's Cascading Style Sheets home page05 October 2017

5 Oct 2017 Updated Working Draft: CSS Multi-column Layout Level 1.

Release Notes for Safari Technology Preview 41

Source: Surfin' Safari Jon Davis • 04 October 2017

Safari Technology Preview Release 41 is now available for download for macOS Sierra and macOS High Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 221968-222556.

File and Directory Entries API

CSS

Bug Fixes

WebRTC

Drag and Drop

Web API

JavaScript

WebCrypto

WebGL

Media

Rendering

Accessibility

Storage

Web Driver

Web Inspector

Designing Websites for iPhone X

Source: Surfin' SafariTimothy Horton • 03 October 2017

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.

The inset area is filled with the page’s background-color (as specified on the <body> or <html> elements) to blend in with the rest of the page. For many websites, this is enough. If your page has only text and images above a solid background color, the default insets will look great.

Other pages — especially those designed with full-width horizontal navigation bars, like the page below — can optionally go a little further to take full advantage of the features of the new display. The iPhone X Human Interface Guidelines detail a few of the general design principles to keep in mind, and the UIKit documentation discusses specific mechanisms native apps can adopt to ensure that they look good. Your website can make use of a few similar new pieces of WebKit API introduced in iOS 11 to take full advantage of the edge-to-edge nature of the display.

While reading this post you can tap on any of the images to visit a corresponding live demo page and take a peek at the source code.

Safari's default insetting behaviorSafari’s default insetting behavior.

Using the Whole Screen

The first new feature is an extension to the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. viewport-fit is available in iOS 11.

The default value of viewport-fit is auto, which results in the automatic insetting behavior seen above. In order to disable that behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover. After doing so, our viewport meta tag now looks like this:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

After reloading, the navigation bar looks much better, running from edge to edge. However, it is immediately clear why it is important to respect the system’s safe area insets: some of the page’s content is obscured by the device’s sensor housing, and the bottom navigation bar is very hard to use.

viewport-fit=coverUse `viewport-fit=cover` to fill the whole screen.

Respecting the Safe Areas

The next step towards making our page usable again after adopting viewport-fit=cover is to selectively apply padding to elements that contain important content, in order to ensure that they are not obscured by the shape of the screen. This will result in a page that takes full advantage of the increased screen real estate on iPhone X while adjusting dynamically to avoid the corners, sensor housing, and indicator for accessing the Home screen.

Safe and Unsafe AreasThe safe and unsafe areas on iPhone X in the landscape orientation, with inset constants indicated.

To achieve this, WebKit in iOS 11 includes a new CSS function, constant(), and a set of four pre-defined constants, safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom. When combined, these allow style declarations to reference the current size of the safe area insets on each side.

The CSS Working Group recently resolved to add this feature, but with a different name. Please keep this in mind while adopting.

constant() works anywhere var() does — for example, inside the padding properties:

.post {
    padding: 12px;
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}

For browsers that do not support constant(), the style rule that includes it will be ignored; for this reason, it is important to continue to separately specify fallback rules for any declarations using constant().

Safe area constantsRespect safe area insets so that important content is visible.

Bringing It All Together, With min() and max()

This section covers features that are not currently included in iOS 11.

If you adopt safe area inset constants in your website design, you might notice that it is somewhat difficult to specify that you want a minimum padding in addition to the safe area inset. In the page above, where we replaced our 12px left padding with constant(safe-area-inset-left), when we rotate back to portrait, the left safe area inset becomes 0px, and the text sits immediately adjacent to the screen edge.

No marginsSafe area insets are not a replacement for margins.

To solve this, we want to specify that our padding should be the default padding or the safe area inset, whichever is greater. This can be achieved with the brand-new CSS functions min() and max() which will be available in a future Safari Technology Preview release. Both functions take an arbitrary number of arguments and return the minimum or maximum. They can be used inside of calc(), or nested inside each other, and both functions allow calc()-like math inside of them.

For this case, we want to use max():

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
    }
}

It is important to use @supports to feature-detect min and max, because they are not supported everywhere, and due to CSS’s treatment of invalid variables, to not specify a variable inside your @supports query.

In our example page, in portrait orientation, constant(safe-area-inset-left) resolves to 0px, so the max() function resolves to 12px. In landscape, when constant(safe-area-inset-left) is larger due to the sensor housing, the max() function will resolve to that size instead, ensuring that the important content within is always visible.

max() with safe area insetsUse max() to combine safe area insets with traditional margins.

Experienced web developers might have previously encountered the “CSS locks” mechanism, commonly used to clamp CSS properties to a particular range of values. Using min() and max() together makes this much easier, and will be very helpful in implementing effective responsive designs in the future.

Feedback and Questions

You can start adopting viewport-fit and safe area insets today, by using Safari in the iPhone X Simulator included with Xcode 9. We’d love to hear how your adoption of all of these features goes, so please feel free to send feedback and questions to web-evangelist@apple.com or @webkit on Twitter, and to file any bugs that you run into on WebKit’s bug tracker.

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

Source: W3C's Cascading Style Sheets home page28 September 2017

28 Sep 2017 RealObjects released PDFreactor version 9.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, MathML, SVG, XSLT, JavaScript, and accessible PDF. Version 9 adds, among other things, CSS opacity, box-shadow, new REST APIs, improved JavaScript and support for Linux systemd. (Java. Free personal version)

New WebKit Features in Safari 11

Source: Surfin' SafariJon Davis • 26 September 2017

With the release of iOS 11 and macOS High Sierra, the new Safari brings impressive performance improvements and great new WebKit features to the web. This release takes bold steps to curb all too common annoyances that have become pervasive across the web. It’s important for developers to be aware of how they might impact their sites. WebKit includes a JavaScript engine that is faster than ever and adds transformative features like WebAssembly and WebRTC. We can’t wait to see what developers will build with them.

Here are the highlights of the features that make Safari 11 such a significant release.

WebRTC and Media Capture

WebKit support for WebRTC and the Media Capture and Streams API brings real-time communication between browsers to Safari. The combination of support for both technology standards enables developers to bring video conferencing experiences to the web without the use of plug-ins. WebKit uses libWebRTC under the hood for interoperability and a solid foundation of features for efficient video conferencing.

Read more in the WebKit blog post about WebRTC.

WebAssembly

WebKit added support for WebAssembly as a complement to JavaScript programs. It is a low-level binary format designed to be a compilation target for existing languages like C++. It can’t do everything that JavaScript can, but it works together with JavaScript to accelerate computationally-intense operations. The implementation in WebKit supports both x86-64 and ARM64 platforms.

Learn more about WebAssembly in WebKit.

Variable Fonts

Developers can improve the loading performance on their site and provide designers with more control over typography using Variable Fonts. It is a specially formatted font file that contains values describing font variations across different axes of features like font weight, size, or oblique angles. The implementation in WebKit also adds CSS property support that can be animated, allowing web authors to incorporate fluid motion into typography changes.

Read more about Variable Fonts on the Web to learn more.

Timing APIs

Support for Resource Timing, Performance Timeline, and User Timing APIs in WebKit enables developers to measure performance characteristics of their web applications. The Resource Timing API can gather detailed network timing data, such as the time taken to fetch a specific resource. Performance Observers allow you to gather timing metrics asynchronously without blocking the application. While the User Timing API allows developers to set application-specific timestamps that are tied in to the browser’s performance timeline.

Read the Resource Timing, Performance Timeline, and User Timing specifications for more details.

WebCrypto API Updates

WebCrypto API support was updated in WebKit to include a standards-compliant SubtleCrypto implementation. This includes DER encoding support for importing and exporting asymmetric keys. Time-consuming cryptography methods now execute asynchronously and can even run in a Web Worker. Support for a number of new cryptographic algorithms adds new functionality, better efficiency, and improved security.

Learn more about the WebCrypto updates in WebKit.

Web Inspector Improvements

Web Inspector sports several useful new features for developers. When the system is set to a right-to-left language, Web Inspector will display a right-to-left user interface layout. It also added a new Settings tab for Web Inspector preferences. In the Network tab, Web Socket connections can now be inspected to show data being communicated across the connection. Finally, in the Elements tab developers can set debugging breakpoints on elements when the subtree or attribute is modified, or when the node is removed.

Intelligent Tracking Prevention

WebKit identifies cross-site tracking on websites you visit with machine learning, and shuts it down. This prevents ads that follow users around the web, but it also helps them have more control and awareness of the sites and services using their data. It’s a feature that protects users and enforces better user privacy practices across the web.

Find our more about Intelligent Tracking Prevention in WebKit.

Video Auto-Play Blocking on macOS

The auto-play blocking policy introduced on iOS last year inspired a new video auto-play blocking feature in Safari on macOS. Simply put, auto-play video with sound will be paused. Video elements without audio tracks, or muted audio can still auto-play. This release also includes support for the play method of the video element to return a promise to easily handle successful and unsuccessful video playback.

Read more about Auto-Play Blocking on macOS with a helpful example on using a Promise to handle auto-play success or prevention.

More Web Platform Features

Support for history.scrollRestoration was added to give developers control over when to maintain scroll position when a user navigates back through browser history.

New CSS Fill and Stroke Module support gives developers more tools to control how text and SVG artwork is painted with new fill- and stroke- properties.

An improved Flexbox implementation brings it up to match current specifications and better layout performance.

CSS Scroll Snapping was updated to add scroll snapping to the main document frame, overflow scrolling containers, and adds support for scroll-snap-proximity.

User Experience Enhancements

There are also several user focused changes to enhance the user-experience that can impact web development. Text rendered on transparent layers match regular text for consistently beautiful text. Decoding large images happens asynchronously to keep animations smooth dropped frames in animations. Scrolling speed is now consistent between the top level document, iframes, and across web views in apps. Lastly, when sharing a link to an article on iOS, the canonical link of the article will be used.

Feedback

All of these improvements are available to users running iOS 11 and macOS High Sierra, as well as macOS Sierra and OS X El Capitan. These features were also available to web developers with Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36. Download the latest Safari Technology Preview release to stay on the forefront of future web features. You can also use the WebKit Feature Status page to watch for changes to your favorite web platform features.

We love hearing from you. Send a tweet to @webkit or @jonathandavis to share your thoughts on this release, and any features you were hoping for that didn’t make it. If you run into any issues, we welcome your bug reports for Safari, or WebKit bugs for web content issues.

Microsoft's short video about the creation of CSS Grid shows…

Source: W3C's Cascading Style Sheets home page22 September 2017

22 Sep 2017 Microsoft's short video about the creation of CSS Grid shows some of the people who worked on its development.

Minutes Telecon 2017-09-20

Source: CSS WG BlogDael Jackson • 20 September 2017

Full Minutes

Release Notes for Safari Technology Preview 40

Source: Surfin' Safari Jon Davis • 20 September 2017

Safari Technology Preview Release 40 is now available for download for macOS Sierra and betas of macOS High Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 221334-221968.

JavaScript

FileSystem Entry API

Fetch API

Accessibility

Web API

CSS

CSS Grid

Web Inspector

Media

Rendering

WebGL

W3C's CSS Basics course is an online, MOOC-based course with…

Source: W3C's Cascading Style Sheets home page20 September 2017

20 Sep 2017 W3C's CSS Basics course is an online, MOOC-based course with professional instructors, developed jointly by W3C and Microsoft. It is part of W3C's ‘Front-End Web Developer’ Professional Certificate and Microsoft's Professional Program Certificate in Front-End Web Development.

Summit 17 – Lo, the Product & Design Track

Source: Web Directions Blog John • 15 September 2017

It’s time for Part Two of the Program Launch for Web Directions Summit 17: the Product & Design Track.

We are returning to our most popular conference format: two days, with two tracks – one focused on Engineering, the other on Product & Design, plus over-arching opening and closing keynotes on each day – a format to suit the whole team.

In this way, we are positioning Summit as a coming together of the different disciplines we practise, and as a peak event on your team’s professional development calendar.

We launched the Engineering Track program on Wednesday, and today we’re going to share with you the full program for the Product & Design Track of Summit 17.

Given this, we’re extending the Super Early Bird period by one week to Friday 22 September. And remember, if you register now to lock in the lowest possible pricing,  you  can pay later – even if that’s after the Early Bird closes.

Read on for an overview of the design track  or  Register now

 (don’t forget the special offer at the end of this email).

Product & Design Track, Day One

 Summit 17 - Chris Messina Lessons from the Death of the PC

Chris Messina

As the PC meets its slow demise, we stand on a precipice overlooking a broad shift in how technology is designed and serves people, with new hardware and embedded technologies that spell new paradigms for user experience, voice experience, and conversation experience.

 

 

 Summit 17 - Rob Manson The Landscape of (Extended) Reality

Rob Manson

For a technology that’s been over 55 years in the making, it’s taken a long time for VR to become an “overnight success”. What’s driving this buzz and how does VR relate to Augmented, Mixed, and Extended Reality?

 

 

 Summit 17 - Mark Dalgleish DesignOps: The Future of Design, as a Service

Mark Dalgleish

By focusing developers entirely on translating a company’s design language into production-ready code and monitoring its real-world effectiveness, teams can deliver high quality design across large organisations at a pace not previously possible.

 

 

 Summit 17 - Ben Birch & Tim Churchward Style Guides, So Hot Right Now

Ben Birch & Tim Churchward

A look at emerging tools and strategies that drive collaboration at the boundary of design and development, point out some pitfalls you might want to avoid, and help you evaluate the right approach for your team and organisation.

 

 

 Summit 17 - Nicola Rushton Retros, Research and Opinionated Design

Nicola Rushton

How do you create a culture of open communication, fast feedback and shared ownership? When it comes to normalising the sharing of feelings and helping a team own their process, structure is key.

 

 

 Summit 17 - Rona Shaanan Disruptive Design: The Designer as an Agent of Change

Rona Shaanan

You’re a designer, hired by an engineer-driven company that wants to get some of that umpteen per cent rise in productivity from being design driven. You are the agent of change. Now what?

 

 Summit 17 - Dan Rubin A Life on the Web

Dan Rubin

Dan has lived a life curiously suited to the web, one that has eschewed the traditional linear career structure and more closely resembles the inter-connected, graph-like nature of the web itself. Find out what he’s learned along the way.

 

So that’s Day One – although there’s actually one more speaker to lock in. Even then, we’re deep-diving into some major key topics already. Let’s see what’s on Day Two.

Product & Design Track, Day Two

 

 Summit 17 - Genevieve Bell Artificial Intelligence: Making a Human Connection

Genevieve Bell

It’s tempting to keep separate the art and science of the robot and the artificial intelligence that underpins it. However, there are reasons to thread them back together and understand how the story of AI is connected to the history of human culture.

 

 

 Summit 17 - Richard Rutter 13 Golden Rules of Typography on the Web

Richard Rutter

Typography is what comes between the author and the reader. If you design websites or use CSS then you are a typographer. The guidelines in this talk combine implement­ation details with typographic theory, to set you on the road to designing beautiful and effective responsive typography.

 

 

 Summit 17 - Lauren Lucchese Designing Conversations

Lauren Lucchese

How do we design for conversational UIs, when the content is the experience, and words are the interface? Can we design contextually relevant conversations for bots that evoke emotion and lead to relationships rooted in trust, empathy, and understanding?

 

 

 Summit 17 - Simon Wright Designing Better Coffee

Simon Wright

How the idea for, and design of, a new brand of ethical coffee came to be, and how the design was informed by the business and ethical goals, while these, too, were in turn shaped by the design decisions.

 

 

 Summit 17 - Sarah Pulis Designing for Extremes

Sarah Pulis

Designing for the “average user” doesn’t mean  you are designing for everyone. It means you’re designing for no-one. There is no average user. But what happens if instead you deliberately design for the extremes, for each individual?

 

 

 Summit 17 - Kazjon Grace Personalised Curiosity: Why and how machine learning can keep your users surprised and engaged

Kazjon Grace

How an AI model of curiosity inspired by cognitive science can be used to encourage us to broaden our tastes.

 

 

 Summit 17 - Oliver Weidlich On Mobile, Context is King

Oliver Weidlich

Most mobile service designs take no notice of what the device knows, or previous interactions, and assume each ‘channel’ is a new unconnected experience. But in a mobile-connected world, we can design richer and more contextual experiences.

 

 Summit 17 - Amélie Lamont Don’t Kill Them Softly: Fostering a Culture of Fearless Feedback

Amélie Lamont

Like opinions, harmful or useless feedback can kill your team by demoralisation. Design Anthropology can inform a framework that fosters a fearless feedback culture focusing on creating value, rather than pointing out flaws.

 

So, like the Engineering Track, we’ve curated a seriously substantial program of Product & Design presentations, each focused on a key topic or issue facing designers now and into the immediate future.

Now, you should be aware that tickets are already selling fast (just as they did in Melbourne for Code, when we sold out before Early Bird even closed). In fact, as you’ll see below, for Summit we’ve already sold out of Gold tickets.

Pricing

Register during the Primary Early Bird period up to and including Friday 22 September and get $200 off the regular cost.

NB Don’t forget the option of a Three Day Pass to Summit plus our new Culture or Reality conferences – outstanding value!

You’ll find much more info about the speakers and their presentations on the Summit 17 website.

Curating a two-track conference is a bit like putting together two conferences at once, and there’s an inevitable concern to make each track as potent as the other. With this conference, I think we’ve really achieved something special with both tracks.

If your work focuses on Product & Design, I think you’ll find Summit 17 to be just what you need.

See you there.

The post Summit 17 – Lo, the Product & Design Track appeared first on Web Directions.

Minutes Telecon 2017-09-13

Source: CSS WG BlogDael Jackson • 13 September 2017

Full Minutes

Summit 17 – Behold, the Engineering Track

Source: Web Directions Blog John • 13 September 2017

Web Directions is back!

We’ve taken our annual Sydney end-of-year conference back to the structure that’s best known and loved: two huge days, with two big tracks – one focused on Engineering, the other on Products and Design, plus stellar over-arching opening and closing keynotes on each day from high profile industry leaders;  a format to suit your whole team, across disciplines.

At the same time, we move forward. We renamed the conference Summit to distinguish it from other Web Directions events, and to characterise it as both a coming together of the different disciplines we practise, and a peak of our professional development year.

If there’s just a single web / tech / digital conference you go to each year, we want it to be Web Directions Summit.

We’ve so far announced eight Summit speakers, all important figures of international stature. We still have a detail or two to finalise in the Product / Design Track, but we can’t stand to wait any longer, so today we’re going to share with you the full program for the Engineering Track of Summit 17.

We’ll launch the other track next week, and because of that, we’re going to extend the Super Early Bird period by one week to Friday 22 September (the best ticket deals), and the second Early Bird to Friday 20 October (still good deals there).

When you have a line-up this good, you can’t keep it to yourself!

And remember, you can register now to get your Super Early Bird discount, and pay later – even if that’s after the Early Bird closes.

Engineering Track, Day One

 Summit 17 - Chris Messina Lessons from the Death of the PC

Chris Messina

As the PC meets its slow demise, we stand on a precipice overlooking a broad shift in how technology is designed and serves people, with new hardware and embedded technologies that spell new paradigms for user experience, voice experience, and conversation experience.

 

 

 Summit 17 - Iker Jamardo WebXR: Virtual and Augmented Reality on the Web

Iker Jamardo

A deep dive into the current state of the Virtual and Augmented Reality technologies on the web, with the most outstanding examples of VR/AR websites to date, cutting edge browser prototypes and an update on standards progress.

 

 

 Summit 17 - Chris Eppstein Some Thoughts on CSS Architectures, Frameworks and Tooling

Chris Eppstein

Insights and thoughts about how and why styling components led us to CSS-in-JS (and, inevitably, JS-in-CSS) and how tooling can bridge the divide between what’s best for the developer and what’s best for the browser

 

 

 Summit 17 - Kyle Simpson Keep Betting on JavaScript

Kyle Simpson

JavaScript is no longer trying to prove itself. It has arrived, it’s now fully a first class citizen in the programming language ecosystem. So what’s over the horizon for the world’s most ubiquitous and popular (by usage, if not emotion!) language?

 

 

 Mehdi Valikhani Meta Programming in JavaScript

Mehdi Valikhani

Meta whaaat?! Meta programming is a way to customise built-in features of a programming language. Say we have an array of multiple Beer objects, each of them has a field called ‘name’. What if I tell you that you could fetch VB’s data using ‘beers[‘VB’]’!

 

 

 Summit 17 - Erwin van der Koogh Back-end Development for Front-end Developers

Erwin van der Koogh

With the release of AWS Lambda and similar “serverless” computing services, anyone with a rudimentary knowledge of JavaScript can write reliable and scalable back-ends. And front-end developers actually have a big advantage.

 

 

 Summit 17 - Josh Duck Exploring Static Types: Writing Typesafe Code that Feels Like Real JavaScript

Josh Duck

Flow and TypeScript are changing the foundations of JavaScript. Far from turning code into an object oriented mess, static typing gives us JS code that’s cleaner and more predictable. With typechecking, we end up with easier interfaces for humans, too.

 

 

 Summit 17 - Dan Rubin A Life on the Web

Dan Rubin

Dan has lived a life curiously suited to the web, one that has eschewed the traditional linear career structure and more closely resembles the inter-connected, graph-like nature of the web itself. Find out what he’s learned along the way.

I think you’ll agree that is a pretty substantial Day One: five internationals and three locals, big picture and deep dive, a few perspectives on JS, some “now” and some “coming soon”.

Let’s see what Day Two holds.

Engineering Track, Day Two

 

 Summit 17 - Genevieve Bell Artificial Intelligence: Making a Human Connection

Genevieve Bell

It’s tempting to keep separate the art and science of the robot and the artificial intelligence that underpins it. However, there are reasons to thread them back together and understand how the story of AI is connected to the history of human culture.

 

 

 Summit 17 - Amir Shevat Moving from Web & Mobile to Messaging – To Bot or Not to Bot

Amir Shevat

We’re seeing a big move from web and mobile apps to conversational interfaces. The future of work doesn’t include endless email chains, 30 open browser tabs, or siloed tools. Find out instead what bots and delightful UI can do for you.

 

 

 Summit 17 - Jessica Edwards Workers of the Web Unite

Jessica Edwards

With increasing browser support for Service Workers, developers can now create websites that work offline, independent of network status, and with great flexibility. By understanding the Web Worker API, we can better understand Service Workers and how to use them.

 

 

 Summit 17 - Tammy Everts Performance is About People, Not Metrics

Tammy Everts

A brief history of UX and web performance research, highlighting key studies that connect the dots between performance and user experience, with some educated guesses about new metrics just around the corner. Some day we’ll laugh at how little we actually knew.

 

 

 Summit 17 - Hannah Malcolm Delivering a Web Experience in 10KB

Hannah Malcolm

Can you deliver a compelling web experience in less than 10KB, without the need for JavaScript? Learn about the challenges and breakthroughs in designing and building the Best Design winner of the 2016 A List Apart competition.

 

 

 Summit 17 - Phil Nash 2FA, WTF?

Phil Nash

Everyone is hacking everything. Everything is vulnerable. Your site, your users, even you. Are you worried about security? You should be! Let’s look at one time passwords, implementing 2FA in web applications and the only real life compelling use case for QR codes.

 

 

 Summit 17 - Elle Meredith The Latest in Browser Developer Tools

Elle Meredith

The capability of tools like Firebug in our modern browsers has grown extraordinarily, but keeping up with them is hard work. Get up to speed with some of the more overlooked ways in which we can improve performance, code quality and more.

 

 

 Summit 17 - Amélie Lamont Don’t Kill Them Softly: Fostering a Culture of Fearless Feedback

Amélie Lamont

Like opinions, harmful or useless feedback can kill your team by demoralisation. Design Anthropology can inform a framework that fosters a fearless feedback culture focusing on creating value, rather than pointing out flaws.

All up: nine international speakers, seven locals, four broad theme keynotes, and 12 tightly focused presentations on many of the fundamentally key topics and issues with which engineers are engaging, now and into the immediate future.

And this is just the one track!

Now, you should be aware that tickets are already selling fast (just as they did in Melbourne for Code, when we sold out before Early Bird even closed). In fact, as you’ll see below, for Summit we’ve already sold out of Gold tickets.

Register during the Primary Early Bird period up to and including Friday 22 September and get $200 off the regular cost.

NB Take a look at the add-on deals available by registering for a Three Day Pass to Culture or Reality conferences the day before Summit – outstanding value!

You’ll find much more info about the speakers and their presentations on the Summit 17 website.

As someone who’s been in the business for over a decade now, I can assure you that this is one of the strongest programs for a conference engineering track I have ever been privileged to curate. I’m very proud of it, and I know you’ll love it.

See you there.

The post Summit 17 – Behold, the Engineering Track appeared first on Web Directions.

Minutes Telecon 2017-09-06

Source: CSS WG BlogDael Jackson • 07 September 2017

Full Minutes

Release Notes for Safari Technology Preview 37

Source: Surfin' Safari Jon Davis • 06 September 2017

Safari Technology Preview Release 37 is now available for download for macOS Sierra and betas of macOS High Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 219567-220128.

Web API

JavaScript

WebAssembly

Apple Pay

CSS

Web Inspector

WebDriver

Rendering

Accessibility

Media

Updated Working Draft: CSS Box Alignment Level 3.

Source: W3C's Cascading Style Sheets home page06 September 2017

6 Sep 2017 Updated Working Draft: CSS Box Alignment Level 3.

New Candidate Recommendation: Media Queries Level 4.

Source: W3C's Cascading Style Sheets home page05 September 2017

5 Sep 2017 New Candidate Recommendation: Media Queries Level 4.

Minutes Paris F2F 2017-08-03 Part II: Fonts, Display, Counter Styles

Source: CSS WG Blog Dael Jackson • 02 September 2017

Fonts 3

Full Minutes || Spec Referenced

CSS Fonts 4

Full Minutes || Spec Referenced

CSS Display Level 3

Full Minutes || Spec Referenced

CSS Counter Styles

Full Minutes || Spec Referenced

Minutes Paris F2F 2017-08-03 Part I: Tables, Automating Test Coverage, CSS UI, F2F Scheduling

Source: CSS WG Blog Dael Jackson • 02 September 2017

Tables

Full Minutes || Spec Referenced

Automating Test Coverage

Full Minutes

CSS UI 3

Full Minutes || Spec Referenced

CSS UI 4

Full Minutes || Spec Referenced

F2F Scheduling

Full Minutes

The Law of Least Power and Defunct StackOverflow Answers

Source: Web Directions Blog John • 02 September 2017

Sadly, I don’t get the chance to work with JavaScript extensively day to day much anymore, but from time to time I do get the chance to explore a new idea and build something hopefully useful and interesting.

In an age of single page app architectures, it’s surprising what new, novel and interesting things you can build with a relatively small amount of plain old JavaScript, HTML, CSS, and little else. As terribly out of fashion as that might sound.

But one downside of not working with the technologies every day is you forget … well, just about everything. Exploring something at the weekend, I loaded a video element and there were no controls – before recalling dimly you need to set a boolean attribute controls for a video element to display controls.

But that’s not really the point of this piece.

So, where do you go when you can’t remember simple things like “How can I be sure that this element is currently visible in the user’s window”?

The internet!

Which leads directly to the fountain of all programming wisdom, Stack Overflow.

Yes, the parody is essentially real.

parody book cover of O'Reilly book titled Copying and Pasting from Stack Overflow

But answer after answer to this and similar questions about basic DOM APIs and common patterns lead to the response “well, in jQuery you …”. And of course the questions end up being closed off at some point by moderators.

The thing is, a few years ago, jQuery was such a ubiquitous part of a developer’s toolkit that this seemed a perfectly reasonable approach. Who didn’t use jQuery?

And since it smoothed off so many bumpy surfaces in terms of browser differences, answers using jQuery could be more succinct and more immediately practically useful. A plain old vanilla JavaScript and DOM API answer might have required a bunch of additional code for edge cases, different browsers, and so on.

But now? jQuery is a far less central technology, as much as it’s still widely used. Its core value propositions, smoothing over the pain of browser inconsistencies, and providing higher order functionality, have largely gone away (browsers have become more consistent, the DOM API now supports features ‘inspired’ by jQuery like classList and querySelector).

And so, for all but those using jQuery in ongoing application development, these answers (which due to StackOverflow’s high pagerank dominate search results for related topics) are doubly useless. They are no longer cut and paste code that “just works”, nor do they help us understand the underlying APIs and their workings.

This speaks to an important software engineering principle (software engineering is a practice we on the web have frankly paid too little attention to, as I’ve been on the record arguing for many years): The Law (or rule, or principle) of least power. It’s been formulated by Tim Berners-Lee, no less (so, you know, any of us who work on the web should perhaps pay at least a little attention to his thoughts, since he invented this whole damned thing), as “choosing the least powerful [computer] language suitable for a given purpose”.

Which, to many, may sound backwards. But it is at work here in jQuery based stack overflow answers.

How does this work in the case of StackOverflow answers? If we choose the underlying DOM APIs, and then the simplest, plainest JavaScript to access them, this solution is essentially immortal. It will always work. People with foundation knowledge of web technologies will in decades hence understand. People who work with jQuery will understand. Angular, CoffeeScript, TypeScript, even React users (calm down) will understand. Because they all understand JavaScript, right? Right?

Instead, we now have effectively useless answers, crowding out potentially good ones.

To draw a slightly longer bow, the same principle applies to deeper architectural decisions. Right now, I see literally a mania for React. We’ve seen it (with less fervour) for many other DOM and CSS frameworks, tools and libraries, for variants on and supersets of JavaScript.

jQuery, once utterly dominant, is increasingly a legacy technology. How many grid frameworks had their moment in the sun? Bootstrap, Angular, CoffeeScript, all had moments where they seemed to define best practice.

Now even simple websites, the sort we used to build with tables and spacer gifs, then CSS, are now built with React.

The ads that used to look for jQuery developers now look for React developers.

We’ve been here before.

I don’t know. Perhaps we have reached the perfect (or at least good enough) architecture and toolset for building web stuff. But when a pattern keeps emerging time after time, I think it makes sense to consider whether there’s something fundamental to that pattern. So what is that pattern?

On the web we seem to have cycles that look like this: we start with something really simple, like the original HTML. No styling, no images even, just a few page elements (headings, paragraphs, a few inline styles) and links.

Over time, features are added (for example, tables and images) and we uncover patterns that allow us to transcend what the platform imagined – hacking tables and gifs to create Killer Layouts (look it up). These patterns become increasingly complex and arcane, and require ever more specialisation.

And then something newer and simpler arrives (for example, CSS in the mid 90s), that seems initially too trivial to allow us to do anything meaningful, too limited, that makes it too hard to do what we were doing easily before (“easily”, because we’d built a body of practices and patterns and technologies over a period of years).

A perfect example is Image Replacement (IR) Techniques. For the uninitiated, before web fonts and the likes of Typekit (you can thank me later for all this – No, seriously) we developed (well, I say “we”, but I always thought they were a terrible idea) techniques that would allow us to render text as an image, then display this on a page, while maintaining accessibility by displaying the actual text of the element in a way that screen readers (and search engines) could read, but hid the text itself from sighted viewers.

Just explaining what they did is exhausting and frustrating. But they did allow you to “display” fonts that weren’t on the user’s computer.

And then web fonts came along. And, in a stroke, IR techniques were redundant.

Of course, we now have a set of challenges around loading web fonts, and do we have the Flash of Unstyled Content, or Flash of No Content?

You see how it goes?

This has played out over and over on the web (and beyond, but more of that another day). A kind of Groundhog Day, where each recurring day is also a different one.

But.

Underneath all of these patterns and practices and frameworks and libraries are core technologies. And underlying principles.

Some that pertain specifically to the web, some that predate the web (as I mentioned, that significantly overlooked field of software engineering).

These are foundations – technological, and of practice – that we ignore, overlook, or flaunt at our peril.

And a simple example of the consequences is that all those StackOverflow answers are now worse than useless.

 

The post The Law of Least Power and Defunct StackOverflow Answers appeared first on Web Directions.

Minutes Paris F2F 2017-08-02 Part II: Flexbox, Selectors, focus-ring, Inert

Source: CSS WG Blog Dael Jackson • 27 August 2017

Flexbox

Full Minutes || Spec Referenced

Selectors

Full Minutes || Spec Referenced

focus-ring

Full Minutes

Inert

Full Minutes || Spec Referenced

Minutes Paris F2F 2017-08-02 Part III: Motion Path, Sizing, Step Function Parameter Names, Intrinsic Sizing of No Intrinsic Size Images

Source: CSS WG Blog Dael Jackson • 27 August 2017

Motion Path

Full Minutes || Spec Referenced

Sizing

Full Minutes || Spec Referenced

Step Function Parameter Names

Full Minutes || Spec Referenced

Intrinsic Sizing of No Intrinsic Size Images

Full Minutes || Spec Referenced

Minutes Paris F2F 2017-08-02 Part I: Grid, CSS Counter Styles, Media Queries 4, Additive CSS, CSS Alignment

Source: CSS WG Blog Dael Jackson • 27 August 2017

Grid

Full Minutes || Spec Referenced

CSS Counter Style

Full Minutes || Spec Referenced

Media Queries 4

Full Minutes || Spec Referenced

Additive CSS

Full Minutes

CSS Alignment

Full Minutes || Spec Referenced

Updated Candidate Recommendation: CSS Scroll Snap Level 1.

Source: W3C's Cascading Style Sheets home page24 August 2017

24 Aug 2017 Updated Candidate Recommendation: CSS Scroll Snap Level 1.

Minutes Telecon 2017-08-23

Source: CSS WG BlogDael Jackson • 23 August 2017

Full Minutes

Release Notes for Safari Technology Preview 38

Source: Surfin' Safari Jon Davis • 22 August 2017

Safari Technology Preview Release 38 is now available for download for macOS Sierra and betas of macOS High Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 220128-220795.

Beacon API

Fetch API

Web Payments

CSS

Web API

Media

Apple Pay

Web Inspector

WebDriver

Updated Working Draft: CSS Text Level 3.

Source: W3C's Cascading Style Sheets home page22 August 2017

22 Aug 2017 Updated Working Draft: CSS Text Level 3.

Program for W3C Publishing Summit Announced

Source: W3C Blog Bill McCoy • 17 August 2017

openweb quote illustration The program for the inaugural W3C Publishing Summit (taking place November 9-10, 2017 in the San Francisco Bay Area) has just been announced. The program will feature keynotes from Internet pioneer and futurist Tim O’Reilly and Adobe CTO Abhay Parasnis. along with dozens of other speakers and panelists who will showcase and discuss how web technologies are shaping publishing today, tomorrow, and beyond.

Publishing and the web interact in innumerable ways. From schools to libraries, from design to production to archiving, from metadata to analytics, from New York to Paris to Buenos Aires to Tokyo, the Summit will show how web technologies are making publishing more accessible, more global, and more efficient and effective. Mozilla user experience lead and author Jen Simmons will showcase the ongoing revolution in CSS. Design experts Laura Brady, Iris Febres and Nellie McKesson will cover putting the reader first when producing ebooks and automating publishing workflows. We’ll also hear from reading system creator Micah Bowers (Bluefire) and EPUB pioneers George Kerscher (DAISY) and Garth Conboy (Google).

The newly-unveiled program will also showcase insights from senior leaders from across the spectrum of publishing and digital content stakeholders including Jeff Jaffe (CEO, W3C), Yasushi Fujita (CEO, Media DO), Rick Johnson (SVP Product and Strategy, Ingram/VitalSource), Ken Brooks (COO, Macmillan Learning), Liisa McCloy-Kelley (VP, Penguin Random House), and representatives from Rakuten Kobo, NYPL, University of Michigan Library/Publishing, Wiley, Hachette Book Group, Editis, EDRLab, and more.

I’m very excited about this new event which represents an important next milestone in the expanded Publishing@W3C initiative and I hope you will join us. Register now. For more information on the event, see the W3C Publishing Summit 2017 homepage and Media Advisory.

Sponsors of the W3C Publishing Summit include Ingram/VitalSource, SPi Global, and Apex. Additional sponsorship opportunities are available, email me at bmccoy@w3.org for more information. The Publishing Summit is one of several co-located events taking place during W3C’s major annual gathering, TPAC, for which registration is open for W3C members.

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