lately, web development has become very complex. People being full-stack developers often complain to me that they can’t care about all these cool things in front-end development. People doing front-end still complain about having too few things to control the website, make it faster, more reliable.
This growing gap worries me about the future of usual websites. For big web applications and big websites, it’s great to have all the options and a dedicated front-end performance engineer. But what about an average website? A simple website for a painter can’t cost thousands of dollars.
Do we indeed lose individuality by moving our process towards templates-based design? I hope not. I hope we find a way to simplify our workflows again within the framework of web standards, and that we’ll be able to communicate them clearly so everyone in the industry can make use of them. Let’s pull this trigger together. And if you have a story to share, about the workflows you are using or the toolset you prefer, just add it to the comments or send me an email.
News
This week, the AMP project has been launched. It’s a web tool and special subset of web technologies to enforce fast web performance. It’s very controversial because it requires a duplicated, adapted variant of your website and while not allowing you to use most JavaScript features, it throws a huge (open sourced, Google based) JavaScript on top and controls the content and loading behavior of your site. Tim Kadlec wrote up some good thoughts on AMP that don’t present just a biased opinion but show reasonable concerns while reflecting on the advantages of the project.
Tooling
At the MAX conference this week, Adobe announced Project Comet, a UX design tool that makes creating prototypes fast, easy and collaborative.
We tend to solve a lot of problems related to the front-end by delegating them to existing programs. We use libraries and tools which we don’t understand completely – and our code base grows and grows. Simplify your Workflow is not only a slogan, but a necessary development, says Hans Christian Reinl.
Security
Sometimes it can be hard to figure out issues with your Content Security Policy or similar security and privacy settings on your website. But you can inspect the CSP or referrer policy via Firefox DevTools. Another tool worth noting is report-ui for inspecting and testing such settings.
Privacy
Subgraph OS will be an open source, secured and Tor-based operating system that is designed for usability and takes privacy and security into its core, so you don’t need to worry anymore or understand the technical details in its full extend.
Web Performance
KeyCDN launched HTTP/2 support on their CDN solution and improved load times even further than with SPDY3.1. Now they share the results in this article.
There are many resources on the web featuring tricks to improve web font loading. But I haven’t found a resource combining all the approaches, so I wrote my own article: Using Web Fonts The Best Way (in 2015).
We’re often talking about optimizing our JPEGs or PNGs. Some people optimize their image assets by using the newer, more efficient WebP format. Now, FLIF is coming up, claiming an even better size-to-quality ratio and featuring responsive asset container – which would be awesome. Unfortunately, it is not supported anywhere which is also the problem why the WebP share is still so low.
Now as we have reached a state where we technically know so many tricks to improve a site’s performance, the topic of perceived performance is getting more attention. Paul Irish and Paul Lewis from Google wrote up how to optimize performance following the user-centric RAIL model.
Having metrics is good, but it’s more important to actually understand it. Because metrics are often misleading, you need to know what to make out of it and how to extract reasonable findings out of metrics.
Accessibility
It’s two years old already, but still very useful. Take Karl Groves’ diagnostic.css to test your webpage against the very basics of web accessibility.
When using interactive content on your website, we should always consider all users. For example, it could be a bad thing to show a full-sized, flickering or flashing video to an epileptic person. Therefore, the minimum requirement would be to always show controls to such interactive content or, even better, to warn people or not auto-play it.
CSS
Speaking of emails, Gmail is one of the clients that makes writing templates for it very hard. Julie Ng summed up how she approaches responsive emails with the Gmail-first strategy. To help you with calculation of a responsive grid for your newsletter, Julie also built a tool called the Email Layout Calculator.
Work & Life
“Let a 1,000 flowers bloom. Then rip 999 of them out by the roots.” – this quote comes from Twitter’s tech lead of the Engineering Effectiveness group. The piece tells you a story about embracing developer’s work, letting the team grow and how to create an effective team.
Zach Holman shares the difference of “Remote-First vs. Remote-Friendly” and explains why it’s important to not only treat remote working as side project in your team.
Go beyond…
“The secret to success in our fast-paced industry is, I believe, straightforward: make things, share things and – last, but by no means least – be nice to people. That’s it, really.”
October is Fair Trade month. I think we should treat everyone as fair as possible on our planet, and sometimes it’s not even very difficult to change your habits. Just look at this list to find out what companies are already supporting a fair life (which does not mean it’s a rich life at all) for their suppliers. As a challenge, you could try to opt for the Fair Trade label if available for this month—wouldn’t that be cool?
