Monthly Web Development Update 2/2018: The Grown-Up Web, Branding Details, And Browser Fast…

综合技术 2018-02-16 阅读原文

Every profession is a wide field where many people find their very own, custom niches. So are design and web development today. I started building my first website with framesets and HTML4.0, images and a super limited set of CSS, and — oh fancy — gifs and inline JavaScript (remember the onclick="" attribute?) about one and a half decades ago. It took me four days to learn the initial, necessary skills for that.

But times are very different today, and when I see how capable the web has become, it’s reasonable to say that it can give people a hard time to start out in this field, and it can be reasonable for people to say that they want to focus on one specific part of web development only . Nowadays, we have JavaScript developers who don’t know much HTML or CSS, and we have developers who aren’t able to work on a modern JavaScript stack but are heroes in what they achieve with CSS. There are people specializing in web font loading, in web performance, in security, in privacy, or in usability.

Web development has grown up to be a solid profession — something that needs a vast amount of knowledge to be an expert in, something that cannot be learned in a few days anymore. Instead, we’re now able to build applications on the web and do things I would never have imagined the web to be capable of when I started out 16 years ago. If we look at how much effort it is to get into woodworking, for example, we realize that web development isn’t much different. Of course, one can achieve some result in a few hours, but producing something that lasts, something that is solid and looks great requires a lot of knowledge, experience, failures, and patience. So does building a great web experience.


  • The big news from browser vendors don’t stop coming in: Google Chrome now announced that starting in Chrome 68 (to be released in July 2018) the browser will mark non-secure sites (HTTP) as “not secure” — the end of non-HTTPS websites. I just imagine all the clients with their small business sites and portfolios desperate about this change. It’s great to see the shift to a more secure web, but sometimes I have the feeling that those who decide don’t think enough about the impact their decisions have on small entities using the Internet as well.
  • Safari’s Technology Preview 49 brings some interesting features: The Intelligent Tracking Protection now has a debug tool in experimental mode, column-gap is now supporting % -values, active-descendant is supported, too, and Console will throw a warning if AppCache is used.
  • Here we go with the announcement of the last major browser vendor to support Progressive Web Apps: this time Microsoft in Windows and the Edge browser . Edge 17 will come with Service Workers and push notifications, but what’s even more interesting is that the company shares their strategy on how they will support such apps at an operating system level: The Microsoft Store will start listing Progressive Web Apps by manual submission which is a big step forward for making web apps as usable as native apps. I can imagine many Electron apps to become obsolete if this concept gets adopted by other OS vendors as well.
  • Google Chrome 64 is out and brings ResizeObserver , a way stronger popup blocker mechanism. window.alert won’t change the focus anymore, and, to save bandwidth, the new Chrome also changes the preload behavior of media files to metadata only.
  • In the upcoming Chrome version 65 , the browser will block certificates from Symantec’s Legacy PKI and, to protect users’ safety, the download -attribute if the target is a cross-origin reference.
  • Firefox 58 was released this week with big performance improvements. It throttles timers in background tabs, brings font-display as a CSS property, and supports Intl.PluralRules . Also new is that the WebVR API is enabled by default on macOS now, and WebAssembly has gotten the amazing streaming compiler .
  • Safari 11.1 is shipping with iOS 11.3 and macOS 10.13.4. It is also available in older macOS 10.12.6 and 10.11.6 versions. The update brings Service Workers, the Payment Request API including Apple Pay, HTMLImageElement.decode() , the File and Directory Entries API, Beacon API, video as an image asset in elements, support for Encrypted Media Extensions in Safari on iOS, support for allow="camera" in WebRTC and Media Capture, the CSS font-display property to control flash of unstyled text with web fonts, and the Web App Manifest. Security-wise it adds support for subresource integrity, “website not secure” warnings, a frozen Safari User-Agent string. I think this marks quite a milestone that shows that Apple is putting a lot of effort into keeping Safari up to date. It’s also interesting to see that Safari automatically drops old Service Workers that haven’t been used in a long time to not waste users’ disc space.
Firefox 58 includes a
new two-tiered compiler that compiles code 10–15 times faster than the optimizing compiler. (
Image credit )


  • Frank Chimero published a new article in which he explains that it’s normal to struggle with constantly changing technologies . It’s also a fun journey through starting out in a business and exploring the in-depth details of a craft.
  • Eric Meyer is one of the people who have worked with CSS since the beginning and have deep insights into how it developed. He now wrote up some thoughts on how the complexity of CSS changed over time .
  • Vitaly Friedman wrote an article in which he asks us as developers, us as company foundersto respect users, and why it should matter more to all of us.
  • Last year, Matt Ludwig published an article about the problem of software compatibility over time and why a Progressive Web App rewrite will be the solution to make it still work in fifty years . The fallacy here is to think that the web is the same as twenty-five years ago. Today we face browsers removing a lot of APIs after a few years, putting existing features behind an HTTPS wall, and developers building code based on countless dependencies that are abandoned after some time by their authors. And once we’re building upon anything that is not the plain web standard, we’re not in a position anymore to say that the code will last for long.
  • Tim Kadlec is questioning the two faces of Google AMP and claims that it can be either a Google search marketing tool or a tool for the open web to improve site performance but not both, as it’s trying to be.
  • John Cobb shares why he started to think about code quality differently and why code reviews need to involve more than just viewing the code.


  • Looking at the example of design concepts by the invasive tracker-selling company PageFair, Ben Werdmüller shares why the upcoming GDPR rules on asking users for consent to be tracked is a good thing . The GDPR rules state that consent needs to be explicit about what and how user information is processed. A good thing to boost privacy.
  • This case study of how the Lufthansa brand evolved its design language and logo over time, including the latest subtle but still very different branding change, shows how much small details matter when it comes to improving a brand’s visual appearance.
  • Naema Baskanderi shares best practices for modal windows and dialogs , analyzing well-known modals and improving them.
Modals can be annoying and users often automatically dismiss these windows. Naema Baskanderi shares what you can do to
ensure your modal doesn’t get in the way . (
Image credit )




Coming soon to Chrome DevTools: a
contrast ratio checker in the color picker. (
Image credit )

Web Performance


  • Did you know that for accessible tables it is required to have a caption element in your HTML? Stefan Judis explains how to do it .


The JavaScript framework
Stimulus is designed to augment your HTML. (
Image credit )



  • Marcy Sutton’s slide deck “ Automating Peace Of Mind With Accessibility Testing & Continuous Integration ” gives an idea and some hints on how we can continuously test the accessibility of websites.

Work & Life

Going Beyond…

  • Stephen Ilardi shares why personal tech is depressing .
  • Mike Gifford shares his thoughts on reducing office waste , a topic we talk about rarely, yet it’d be so simple to improve the situation and shape a future we still want to live in.

Finally, I wrote up some personal notes about dealing with Slack notifications and about why using acronyms is a bad idea . If you have any thoughts about it, you’re welcome to reply to me here or on Twitter.

We hope you enjoyed this Web Development Update. The next one is scheduled for March 16th. Stay tuned.

Smashing Magazine

责编内容by:Smashing Magazine阅读原文】。感谢您的支持!


CSS Leading Ellipsis Is there anyway to accomplish a leading ellipsis using CSS? Like in a table of c...
Pure Css transition sliding panel does not work Im trying to make slideDown Menu on hover.So on hovering HButton3 i want to exte...
Using style.setProperty() To Keep CSS Property Nam... This morning, while reading an article on theming Angular components by Austin ...
flying-saucer + iText + Freemarker实现pdf的导出, 支持中文、c... 前言 项目中有个需求,需要将合同内容导出成pdf。上网查阅到了 iText , iText 是一个生成PDF文档的开源Java库,能够动态的从XML或者数据...
Copy HTML / CSS image I'm having an issue with the bottom two images moving around/across each oth...