CSS Function Syntaxes (color and otherwise) - Tab Completion

There’s a big change coming up for how we write colors in CSS. Tab Atkins recently changed the color functions syntax in the CSS specification. So in future, we will write rgb(0 255 0 / 50%) instead of rgba(0, 255, 0, 50%). This might sound awkward after years of doing it differently, but the reason for it are the new color functions available in CSS Colors Level 4, including color(). You can read more about this in Tab’s blog post, but for now be assured that the old syntax is likely to be supported forever in our browsers thanks to legacy support.

Introducing FlyWeb

FlyWeb is a new experimental Web API that allows web pages to host local web servers for exposing content and services to nearby browsers. It also adds the ability to discover and connect to nearby local web servers to the web browser itself. This might be a bit hard to grasp now, but imagine this in combination with a decentralized service picking the nearest edge server via FlyWeb. You wouldn’t need any complex external CDN solutions that choose the “nearest” edge server via geolocation resolution or similar unreliable technologies anymore. Another use case could be an “off-grid on-the-fly network” with devices that use FlyWeb together with Bluetooth and WiFi chips to find other devices in the vicinity and hereby introduce a whole new area of network reliability. As FlyWeb is a technology experimentally developed by Mozilla, you need to have Firefox Nightly installed to test this out.

Introducing Visual Studio Live Share

Microsoft announced Visual Studio Live Share which enables developers using Visual Studio or Visual Studio Code to collaborate in real-time. An amazing thing that Atom just introduced similarly to their editor with Atom Teletype—opening great new ways to collaborate and pair-program in a team.

Official Google Webmaster Central Blog: Using page speed in mobile search ranking

This week also brings us news from Google’s web search team: Starting July 2018, the well known Pagespeed tool will become a ranking factor for mobile searches. This marks a point in history as it basically means that finally a lot more webstandards and best practices are enforced by this change and leads to better web performance and better adoption of web standards and also accessibility features.

Secure Contexts Everywhere | Mozilla Security Blog

The announcement with the highest impact (probably this year) comes from Mozilla: Starting immediately, Firefox will require HTTPS for all new features built into the browser from now on. So this means not only privacy or security relevant information such as Geolocation API require HTTPS to work but for example the next CSS property or a new JavaScript feature will only be usable if a site is served via HTTPS. Google Chrome made a similar announcement last year, but the team hasn’t clarified when they will do this. The impact, as you can imagine is quite big, and while it might lead to an even faster adoption of HTTPS, there’s also a risk that new features are not adopted by developers as fast anymore. As an effect of this change, we might temporarily see even more “optimized for Chrome” messages on websites until this browser follows the same strategy. One thing at least is for sure: This week marks a quite important point in the history of the web—no matter what the feedback will be, it’ll definitely be interesting and change the way we build all our websites.

Google Online Security Blog: A secure web is here to stay

The big news from browser vendors don’t stop coming in: Google Chrome now announced that starting in Chrome 68 (to be releaded in July 2018) the browser will mark non-secure sites (HTTP) as “not secure”, marking 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 feel like those who decide don’t think enough about the impact of small entities using the Internet as well.

The Website Obesity Crisis

Really, if you only read one thing this week about web development, let it be this transcript of Maciej Ceglowski’s talk “The Website Obesity Crisis” or watch the talk.

Hypertext for all | A Working Library

Everybody who has ever linked to a third party and checked the health of links from time to time knows the issue: broken links. And we still change URLs or remove resources (yes, I did this myself a couple of times) without sending a proper redirect or notice to the user. We do that despite knowing that the hyperlink is one of the most important parts of the web. I think this is also a good place to remind you of this article, too.

Reality is messy | The Haystack

Stephen Hay writes about best practices featured in blog articles and why the reality is often very different, requiring us to be more pragmatic and less idealistic. The reality is sometimes messy, not all people can spend days optimizing the smallest details.

The Software Developer’s Library: A Treasure Trove of Books for People Who Love Code

Eric Elliot collected the — from his view — best books for people who love code in this article.

Choosing an HTTP Status Code — Stop Making It Hard – Racksburg

These lovely flowcharts will help you decide which proper HTTP status code your application should respond with.

A Comprehensive Guide to Font Loading Strategies—zachleat.com

A Comprehensive Guide to Font Loading Strategies by Zach Leatherman is the current best pocket guide on how to load fonts.

Hidden Expectations - daverupert.com

Dave Rupert reflected on the hidden expectations and why the hardest parts of the web are the ones the client doesn’t see. Accessibility, security, and performance serve very well as main examples for such hidden expectations.

Writing Less Damn Code | HeydonWorks

Heydon Pickering shares tips on writing less code to make your developer life easier. Something we all should remember.

Using Immutable Caching To Speed Up The Web ★ Mozilla Hacks – the Web developer blog

Firefox has been supporting Immutable Caching since version 49. Now they share how efficient the technique is for Facebook and other big sites that are frequently visited by the same people.

HTML & CSS Is Hard (But it doesn’t have to be)

So here’s something that helps beginners to start with web development and advanced people to recap some of their knowledge: Oliver James wrote “HTML & CSS Is Hard (But it doesn’t have to be)”, a friendly web development tutorial for complete beginners.

Ana Balica - Code review checklist

How does your team review code? Ana Balica shares a useful checklist for reviewing your and your teammates code.

World Wide Web, Not Wealthy Western Web (Part 1) – Smashing Magazine

Bruce Lawson wrote a full-length novel for Smashing Magazine about the World Wide Web, Not Wealthy Western Web. It’s about the bias of western web developers, about ignoring other continents, and why we need to see the bigger picture instead. A piece you should definitely take the time to read.

The bricks we lay. — Ethan Marcotte

Ethan Marcotte wrote an important statement on “the bricks we lay”. In that, he describes a situation where people do work and say they’re only focusing on the task they do and therefore are a-political. But your work is never neutral.

World Wide Web, Not Wealthy Western Web (Part 2) – Smashing Magazine

In the last edition of the web development reading list, I shared the first part of Bruce Lawson’s story about the “World Wide Web, Not Wealthy Western Web”. Today comes the second part of the mandatory read of this week.

Going Indie. Step 1: Securing Privacy · Matthias Ott – User Experience Designer

Matthias Ott points out that it’s about time that we take back control, reclaim our digital future and rebuild the web so that it, finally, becomes a web for everyone. And with growing surveillance and even bigger data consolidation by a few big private players, it’s now up to us to recognize the errors we make and amend our decisions accordingly to create a better web—a web that is more accessible, more private, and more independent.

The ".well-known" directory on webservers (aka: RFC 5785)

Have you already heard of the .well-known/ directory on web servers? This relatively new standard is used to announce directives to browsers. Let’s Encrypt, for example, uses it for their validation URLs.

Assisted Writing – samim – Medium

Samim shares insights into how assisted writing tools are using machine learning to understand and generate the human language. While the article focuses on how we can reimagine word processing software with machine learning and better algorithms, we can also learn a lot about improving our own writing style.

Docracy - Free Legal Documents

Docracy is a community-driven platform for free legal documents. It already covers a lot of categories and might become useful in future for you.

Rendering on Google Search  |  Search  |  Google Developers

This article by Google now reveals that the search engine crawler bot is based on Chrome 41 (M41) and therefore is able to render JavaScript apps. Things to consider though are: No HTTP/2 support yet, basically no storage support such as cookies, localstorage or IndexedDB, no WebGL, and no Service Worker support.

We Offered Matching Funds for Open Source — Here’s What Happened.

Ben Vinegar from Sentry on why companies should give back to open source projects and shares the story of matching donations of Webpack. The motto?

“What’s a few hundred a month to support the critical tools you use, compared with the cost of hiring a full time software engineer to build them for you?”

Chrome is Not the Standard · Chris Krycho

Chris Krycho on the importance of browser diversity and why we as developers need to end building solutions for one browser only. It was never a good idea back when Internet Explorer was the most popular browser and is not today for Chrome. And just think what we’d lose when there’s only one browser—take Chrome—left: Probably there would be no WebAssembly, no CSS Grids, no concurrent JavaScript. Only if a variety exists, innovation will happen and will do good for the people building stuff for the browsers.

Software rot and the case for the PWA rewrite - DockYard

Matt Ludwig wrote an article last year 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 like twenty-five years ago. Today we face browsers removing a lot of APIs after a few years, putting existing features behind a HTTPS wall, and developers building code based on a countless amount of 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. I’ve built relatively simple projects several years ago and without investing time today, they would not work anymore. The Geolocation API has been restricted to HTTPS, so I need to get a certificate and renew it regularly which depends on an external company that could go bankrupt or untrusted by browsers anytime. AppCache gets removed from browsers and put behind secure context as well so my Progressive App I’ve built with web standards just five years ago does not work today anymore. The web changed a lot, and despite HTML and some basic parts of CSS and JavaScript I think we cannot be sure that things will work in ten years, as sad as this sounds. But we all make progress and learn from errors and so do browser vendors. Time changes the tools we use and we will need to adapt.

Everything Easy is Hard Again – Frank Chimero

Frank Chimero has published a new article in which he explains how normal it is to struggle with web developers’ constantly changing technologies. It is also a fun journey through starting out in a business to exploring the in-depth details of a craft. From knowing how to build a website in general to knowing how to best load a web font which can be a complete job for one developer nowadays.

Using Ethics In Web Design — Smashing Magazine

Morten Rand-Hendriksen on using ethics in web design and what questions we should ask ourselves when suggesting a solution, making a design, new feature. And especially when we think we make something ‘smart’, it’s important to put these important questions whether it actually helps people first.

The Slow Death of Internet Explorer and the Future of Progressive Enhancement · An A List Apart Article

Oliver Williams on the importance to rethink how we’re building websites and implement “progressive enhancement”. It’s us who make the experience worse for our users when blindly transpiling all our ECMAScript code, and it’s us who make things worse when blindly serving tons of JavaScript polyfills to those who already use slow, old machines and software like IE11. Oliver takes on how we can shape the web to work great for everyone by prioritising features properly and stripping code out for older software.

Inclusive Components: Cards

Heydon Pickering shared a new, very interesting article to learn how to build a web component properly: This time he explains us how to build a “Card” module responsively and inclusive.

The Cult of the Complex · An A List Apart Article

In The Cult of the Complex Jeffrey Zeldman writes about how we often seem to forget that simplicity is the key and goal in all we do, the overall goal for projects and life. And he explains why it’s so hard to achieve and why it’s so much easier to cultivate complex systems and tempting to add complexity to projects. A very good read we should remember and re-read from time to time. Definitely a piece I’ll add to my ‘evergreen’ list.

Tech Sector Values are Broken? — Anton Sten — UX-Lead

Anton Sten asks if Tech Sector Values are Broken? Analyzing the marketing strategies by Apple, Microsoft, Google, Amazon but also small other companies and how we can do really purposeful work and stick to our values instead of treating them as marketing-material that we don’t need to respect or stick to.

What kind of ethics do front-end developers need?

Now that the technology sector of the world is rapidly transforming all of the world’s things into digital things, many have called for more ethics in our field. That is in many instances quite a vague goal, so let’s apply it to one part of digital: front-end development. How can we be more ethical as front-end developers, what kinds of things can we do? Hidde de Vries wrote an article about that.

Simple, correct, fast: in that order | Drew DeVault’s Blog

Drew DeVault’s “Simple, correct, fast: in that order” is a great reminder to set priorities straight in web and software development.

raisely/jwl: Just World License - A licence for using software for good

If you have an Open Source project or are building a new one, you have to decide which license it should use. Now there’s a new option, the Just World License. It’s for developers that agree in general with the principles of open source software, but are uncomfortable with their software being used as part of efforts to destroy lives, our environment and our future.

Stop building for San Francisco

Eric Meyer has published an article this week, elaborating the problems of the effort to make the web HTTPS only—where he reveals that developing countries suffer a lot from this development as they often have bad internet connections and due to the encryption, they now experience more website errors than previously. Ben Werdmüller jumped in and published his article “Stop building for San Francisco” in which he points out one of the biggest problems we have as developers: We use priviledged hardware and infrastructure. We build experiences using the latest iPhones, Macbooks with Gigabit or fast 4G connections but never consider that most people we’re building for use far less equipped devices and infrastructures. And while it’s a great idea to make the web more secure, we should always keep in mind who this might impact, who will not be able to access your site anymore.

Conversational Semantics · An A List Apart Article

As Alexa, Cortana, Siri, and even customer support chat bots become the norm, we have to start carefully considering not only how our content looks but how it could sound. We can—and should—use HTML and ARIA to make our content structured, sensible, and most importantly, meaningful.

Accessibility is not a feature. — Ethan Marcotte

Ethan Marcotte reflects on what accessibility means and realizes that it’s not about making a website compatible to some assistive technology or software but about making the website usable by everyone who wants to access it, regardless of the technology. This is a huge difference because it includes people having difficulties reading a website due to small font-size, low contrast. But they might still use the same Chrome browser and the same laptop as you, they just are in bright sunlight, have difficulties reading small text or get distracted by bright colors or animated elements besides a text.

The "Developer Experience" Bait-and-Switch | Infrequently Noted

Alex Russell’s “The "Developer Experience" Bait-and-Switch” is a great piece that explains the toxic environments we currently build for the web and why JavaScript can be compared with CO2—both are needed in small portions but if there’s too much of it, it’ll put the entire ecosystem (the web) at risk. A thoughtful article that I can only recommend everyone here to read, spread and remember next time you start building a new web application.

Learn  |  web.dev

Explore structured learning paths to discover everything you need to know about building for the modern web. web.dev is the new resource by the Google Web team for developers.

Ian Littman on Twitter: "Moving 50% of servers to PHP 7 from PHP 5 would save $2.5 billion in energy costs per year, and avoid billions of kilograms of CO2 emissions. Upgrade to PHP 7. Save the planet. - @rasmus #phpbnl19"

Ian Littman on Twitter: “Moving 50% of servers to PHP 7 from PHP 5 would save $2.5 (edited to 2.0) billion in energy costs per year, and avoid billions of kilograms of CO2 emissions. Upgrade to PHP 7. Save the planet. (…)”

Rendering on the Web  |  Web  |  Google Developers

Jason Miller wrote a primary about Rendering on the Web, a great introduction to how that all works when a user accesses a website through a modern browser. From beginning to the end, and there’a a lot to learn in here.

Common Voice

Voice is becoming more and more important in our lives, mainly because we use more tools without real display interfaces today—devices like Homepod, Alexa, Siri, Google Assistant or Amazon Echo. Mozilla together with a couple of institutes around the world is creating an open source pool of high-quality voices that wants to help teach machines how real people speak.

Humane by Design

Humane by Design is a very important resource for decisions backed by humans, not business. It gives ideas and helpful resources about transparency, empowering people, fostering inclusiveness, showing respect, and making thoughtful decisions. This is a most valuable website for any project or product you are in charge of or work on.

I Used The Web For A Day On Internet Explorer 8 — Smashing Magazine

The web is a place forever, people say. But this is what it looks like when you try to use a browser just ten years old today: The browser’s own start page returns with a 404 error, Google works but returns a no-script version—not deliberately but because the JavaScript errors out, YouTube doesn’t work and not even show an error, and creating accounts at any of the big services isn’t a nice experience at all. This article is not only enlightening but also reveals a lot of details we can take care of to make our web projects more sustainable and available to more people, regardless of which browser they use.

Frank Chimero on causing 'good trouble' and re-imagining the status quo to combat achievement culture | Creative Boom

Have you heard of the concept of “good trouble”? Frank Chimero defines it as questioning and re-imagining the status quo, and having your actions stand in contrast to the norm. But the interview with the designer shows much more than a new concept, it’s challenging how we work today and how to do your own thing that doesn’t match the norm of the society. Particularly, I like this quote here:

“Slow down, find a quiet place and create time for solitude so you can hear yourself. It’s so noisy out there.”

The World-Wide Work. — Ethan Marcotte

Ethan Marcotte’s talk “The World-Wide Work” is important to read and or watch for all of us. The importance of small little details and their impact on accessibility, or the society, the power of design in our world and how the web plays a role in here, too.

It’s Not Enough to Be Right—You Also Have to Be Kind

It seems that Jeff Bezos grandfather once said to him “one day you’ll understand that it’s harder to be kind than clever.” And this is very true, if you think about all the clever technologies and products out there. Most of them are not showing any sort of kindness to other people and we still have a hard time coming up with a list of companies that we would define as “kind” to us customers.

Microbrowsers Are Everywhere ◆ 24 ways

Colin Bendell explores the world of “microbrowsers”, these little link preview widgets appearing in messaging services like Slack, Messages, Whatsapp, Signal and shows how we can optimise the content of the previews with simple tools.

climate-strike/license: Prevent oil and gas companies from co-opting your work and extracting more fossil fuels with this software license.

The Climate Strike Github organisation created an open source license we can use which prevents oil and gas companies from co-opting our hard work to extracting more fossil fuels.

Sustainable Web Manifesto

The Sustainable Web Manifesto is a statement we can all sign to make the web less of a CO2 polluter and more sustainable, in all regards.

Why (Less) Options is More - Anticipatory Design

Looking at great products that have context-aware content, like Google Now, we realize that anticipatory design is not an easy thing to craft well. Often, less options are more and can provide a better result than too many features prominently displayed in an interface. Aaron Shapiro also shares why less choice can help our brain make better decisions and why the real innovation isn’t about having the best idea but solving real problems.

How To Take Charge of A UX Kick-Off Meeting

Robert Hoekman Jr shares an important lesson on How To Take Charge of A UX Kick-Off Meeting. This features his experience from agencies which didn’t manage to get this right, and stresses how important it is to ask the right questions before designers and developers are starting to work on the project.

7 Things Every Designer Needs to Know about Accessibility

Accessibility is often seen as a technical task but in reality, it’s an integral process that should be taken into account by everyone. Here’s what designers can do to improve the usability and accessibility of the product.

Death to Complexity: How we Simplified Advanced Search

Ali Torbati shares the process of reimagining Spokeo’s advanced search tools. All about making a very complex interface as simple as possible.

guide Archives - Web Methodology Project

The Web Methodology Project is a fresh guide to building web projects, and even though it’s still a work in progress, it already looks very useful. So keep an eye on it.

Don’t make Line Charts lying about its data

Coding a line chart isn’t a big deal anymore thanks to libraries like D3 or Highcharts. But what seems so easy, actually isn’t: there are quite some pitfalls which can distort the results and lead to false assumptions about the presented data. Line-smoothing is one of them.

Simplifying the GST registration process: a designer’s perspective

How do you design a simple, usable registration form for a tax reform? @jelumalai explains the process from a designer’s perspective , diving deep into the challenge of asking for a lot of information while maintaining a clear workflow for the user.

open-source color scheme optimized for UI like font, background, border, etc

Open Color is an open-source color scheme optimized for UI design.

Simple Icons

Dan Leech built a great set of very simple SVG icons of popular brands. It’s available under a Creative Commons Zero license.

The Secret Life of Comedy – Espen Brunborg – btconfDUS2017 in beyond tellerrand on Vimeo

Espen Brunborg gave a great talk at this year’s Beyond Tellerrand conference about “The Secret Life of Comedy.” Worth watching.

Better Web Typography for a Better Web | Better Web Type

Matej Latin created an online course to teach you better web typography in ten free lessons.

Designing The Perfect Date And Time Picker – Smashing Magazine

Vitaly Friedman did an exhaustive research on datepicker modules and shares the probably perfect design of a date and time picker.

Product Design for Sustainability – uxdesign.cc

Artiom Dashinsky explores how we can build products today that can make the world more sustainable tomorrow by designing the product for sustainability. He explores options that software and websites could show to users that are more practical, healthy and sometimes even more convenient: Promoting direct flights in a flight search, promoting remote jobs at LinkedIn, preferring walking, biking and public transport over car on a map app, and similar things.

You’re Offline | Max Böck - Frontend Web Developer

Max Böck shares his thoughts on how we should not only blindly provide our website offline, but how we should design for real offline usage. While it’s nice to have a website displaying its content offline, we should indicate that a form cannot be submitted while offline or that a video can’t be played currently.

Jan Östlund on Twitter: "Edit any text with Chrome Dev Tools. Sketch or check if you menu breaks with longer text. document.designMode = 'on'

There’s a neat setting hidden in most modern browsers: document.designMode='on'; which will give you the power of a text editor on a currently opened website. It means you can edit any text on the page live, and, with that, test your design against variable (user) content.

Best practices for site search design | Webflow Blog

John Moore Williams shares the best practices for site search design that are important if you want to provide an impactful, powerful search experience to your users.

Spectral: A New Screen-First Typeface - Library - Google Design

With Spectral, there’s a new screen-first serif typeface available under an open source license.

Brand New: New Logo, Identity, and Livery for Lufthansa done In-house with Martin et Karczinski

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 to improve a brand’s visual appearance.

Ethical Design: The Practical Getting-Started Guide
 — Smashing Magazine

Trine Falbe introduces us to Ethical Design with a practical getting-started guide. It shows alternatives and things to think about when building a business or building a product, and it doesn’t matter much if you’re the owner, a developer, a designer or a sales person. This is about serving users, and building a layer of real and sustainable trust to your customers.

The HSB Color System: A Practitioner's Primer – Learn UI Design

The HSB (Hue, Saturation, Brightness) color system isn’t especially new, it’s even available on the web since years now but its advantages are still not understood by many people. Erik D. Kennedy explains the principles and advantages of the HSB color system step-by-step.

Optical adjustments in components – Prototypr

Anton Lovchikov shares ways to improve optical adjustments in components. It’s an interesting study on how very small changes can make quite a difference in its visual appearance.

Product Design Principles in a Single Card – Prototypr

Mei Zhang shares how we can learn better product design principles building cards.

Ethics for Design

Ethics for Design is a project where 12 designers and researchers from 8 European cities discuss the impact, sometimes harmful, of design on our societies and the paths to follow for designers to work for the good of all and not just a few.

Creating Users, Not Addicts – Journey Group – Medium

Jeremy Cherry on why we should create users and not addicts for our products and why UX can easily affect people’s health. People are more anxious than ever and it’s related to the world of smartphones and accessing the web everywhere all the time. Why we should focus on providing a great experience that doesn’t trigger addiction to watch another TV series to help people.

How You’re Being Manipulated By Software – Signal v. Noise

Jonas Downey on how we’re constantly manipulated by software’s ‘User Experience’ design and why the only option we have is to vote against these patterns with our wallet and pay for software that doesn’t try to manipulate us in a way that affects our privacy, security or mindset.

Just-in-time Design || Matthew Ström: designer & developer

Matthew Ström’s article Just-in-time Design mentions a nice solution to minimize the disconnection between product design and product engineering. It’s about adopting the Just-in-time method for design. Something that my current team was very excited about and I’m happy to try this out.

Mental models in product design — HeyDesigner

Mental models are explanations of how we see the world. Teresa Man wrote about how we can apply Mental models in product design and why it matters.

Thinking in Triplicate – Mule Design Studio – Medium

Erica Hall shows us examples on why most of ‘UX design’ is a myth and why a good product is not made only by design but by the right product strategy and its business model. The best example why you should read this is when she says “Virgin America. Rdio. Google Reader. Comcast. Which of these offered a good experience? Which of these still exists?”—a truth you can’t ignore and gladly this is not a pessimistic article but has really good thoughts on how we can use that knowledge to improve our products. With strategy, with design, with a business model that fits the product.

4 Reasons Why You Should Design Without Color First

Anand Satyan explains why it’s important to start designing without color first. It helps you understand the structure of data and layout better, results often in cleaner designs, and creates consistency.

UI/UX Patterns You Literally Cannot Design: Design Patents From Tech Companies

Patents are all over the world but we forget that design patterns can also be patented—Christie Tang collected a few of the most prominent patterns that we cannot use for designing products due to big companies like Apple, Facebook, Samsung having patents on them.

Stop Misusing Toggle Switches

There are times to use toggle switches and times not to. When designers misuse them, it leads to confused and frustrated users. Knowing when to use them requires understanding the different types of toggle states and options.

Designing accessible color systems

The Stripe design team shares how they designed an accessible color system and we can learn a lot from it, not only from accessibility perspective but also to improve the design itself.

Better Form Inputs for Better Mobile User Experiences | CSS-Tricks

Alex Holachek shares her experiences on how to make form inputs better for mobile users by choosing the right input types, attributes, validators.

I Don’t Care What Google or Apple or Whomever Did | Adrian Roselli

“It is not uncommon that I raise an accessibility or usability issue with a client’s design or implementation and am met with either ‘But Google does this,’ or ‘But Apple does this.’” Adrian Roselli in a revealing, open statement on why we really shouldn’t care about what the big companies do because they don’t know either.

System UIcons

System UIcons is a set of icons under Unlicense so you can use without attribution for free (but it’s even cooler if you add an attribution).

AddyOsmani.com - Offline installation of npm packages

Working with npm? Then you’re probably annoyed by installing dependencies over and over again over the network. Fortunately, there is a second option that lets you use many features of npm offline. Addy Osmani explains what you need to do to use it.

GSX2JSON - Google Spreadsheet to JSON API service.

GSX2JSON is a useful tool to convert Google Spreadsheet to JSON data, available as a simple API.

Diffee Checker

There are different ways to compare screenshots. Usually, for testing tools, this has been done with command line applications, but you can now also create visual diffs easily by using CSS blend modes.

Butteraugli – estimate the psychovisual difference between two images

Butteraugli is a project that estimates the psychovisual similarity of two images. Y’all likely know that there are very different results from app to app if you use for example a JPEG-compression of 65—in one app this looks still perfectly fine while others already create unbearable artifacts. Butteraugli tries to solve this by creating a standardized comparison of two images and even claims to work better than SSIM.

Properly Close a Frozen SSH Session

Do you know what to do when your SSH connection freezes? There’s actually a simple solution for this: Press [enter], then ~, followed by a . to send an escape sequence to your local SSH client to terminate the connection.

peermaps — Peer to peer cartography.

Peermaps provides a decentralized, cooperative alternative to commercial map providers like Google Maps. Instead of fetching data from a centralized tile service, fetch map data from your peers using webtorrent.

GitFTP-Deploy, dead simple FTP-deployments

If you work on small projects, an (S)FTP-client can still be very useful. But on the other hand, it means you need to manually copy files from your git workflow to the server. To solve this issue, the indie developer Jan Östlund built GitFTP-Deploy, a handy (S)FTP tool for a small fee that does automatic deployments based on your git workflow.

MVPS HOSTS System-wide Privacy/AdBlocker

The privacy/tracking issue is bigger than we think. Have you ever monitored which apps connect to which service? You suddenly realize that an ad blocker/privacy add-on in your browser is only a drop in the bucket. Apps often connect to Google services, Google Analytics, sometimes to various ad networks, and very often to New Relic’s user tracking service. Fortunately, there’s a solution to nearly every problem: Add tracker hostnames to your /etc/hosts file. There’s even a public sample hosts file that you can use to be found here that includes most ad networks and trackers. Use it at your own risk though and be aware that some apps might not work anymore. But maybe your privacy is worth it?

How to recover a dropped stash in Git?

If you ever lost a stash in git, here are a few tips on how to recover dropped stashes.

Automated browser testing for the modern web development stack | TestCafe

Automated browser testing usually causes a lot of trouble and custom build solutions. TestCafé now tries to solve this now in an easy way with a Node.js tool that takes care of all the stages: starting browsers, running tests, gathering test results, and generating reports without the need for a browser extension.

Getting Started with Webpack 2 — Drew Powers

Last week I shared a Webpack version 1 to 2 migration guide. Now Drew Powers wrote a tutorial to get started with Webpack 2, and, as a bonus, it uses Yarn as a package manager instead of npm’s native CLI client.

Continuous Integration Using WebPagetest and Webpack — Rahul Yadav

Rahul Yadav shares how to use Webpack and WebPagetest on a Continuous Integration server to collect metrics and performance statistics on your web application.

Containers from Scratch — Eric Chiang

Eric Chiang explains Container archictecture from scratch so you might finally be able to understand what all the container virtualization is about.

Harry Roberts on Twitter: "Create a Git commit template file (left) and link it through your .gitconfig (right) to have a standard commit message format every time."

Harry Roberts shares a simple trick to set up a git commit message template. First, create a file .git-commit-template with the content (i.e. [refs #0000] Subject line) and save it to your project root. Then add [commit] template = {pathtoyour .git-commit-template file} to your .gitconfig file.

Building Efficient Dockerfiles - Node.js - bitJudo

Many of our projects are using Docker nowadays. But many Dockerfiles are written inefficiently, especially if you’re using npm. David Weinstein shares why you should use caching to improve the performance of your Docker container.

Docker Introduction by Tobias Tom

Tobias Tom explores Docker and explains from scratch how to use it, including how to clean up your computer when you don’t need the image anymore.

Using SSH securely — Anne’s Blog

Anne van Kesteren shares tips on using SSH securely in the context of a CI service such as Travis CI or Circle CI.

preload-webpack-plugin

Addy Osmani wrote the Webpack plugin preload-webpack-plugin for wiring up <link rel='preload'> (and prefetch) automatically.

Rembrandt by imgly

Rembrandt.js is an image comparison tool based on node-canvas running on a server or in the client. Great for visual regression testing, for example.

CSS Remynification: A completely crazy idea that worked -- Remy Luisant's whimsical take on squishy computing science things

Remy Luisant came up with a tool that optimizes your CSS output just a little bit better than you’re used to: CSS Remynification.

Little Things I Like to Do with Git – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts

Harry Roberts shares some useful tips on how to get more out of git with aliases and other rather unknown options.

Wes Bos on Twitter: "🔥 Use `git checkout -` to quickly jump back to your last git branch

Wes Bos has a clever git trick for you: Use git checkout - to quickly jump back to your last git branch.

Automated testing with Headless Chrome  |  Web  |  Google Developers

Eric Bidelman shares how we can use headless Chrome for automated testing, in this case to run your Mocha and Chai tests via the Karma test runner. As a bonus, he also explains how this works on a CI-server.

GitHub - tebelorg/TagUI: General purpose tool for automating web interactions

TagUI is a general purpose tool for automating web interactions. The author is currently working on the Chrome headless support to make this great tool even better. With the help of TagUI, you can easily write automated tests with a simple click and other actions.

Chain - Dynamic color relations in Sketch

With Chain you can create dynamic color relations in Sketch. The handy plugin is great to apply gradient transformations to objects in a matter of seconds.

Puppeteer headless Chrome node.js API

Puppeteer is a Node.js library providing an API to control headless Chrome. It can also be configured to use full (non-headless) Chrome.

Automatic visual diffing with Puppeteer – Monica Dinculescu

Monica Dinculescu shares how she wrote a script with Puppeteer, the Chrome team’s reference library to automate headless Chrome to achieve automated visual diffing.

1.1.1.1 by Cloudflare

There’s a new, fast DNS service available by Cloudflare now. Finally, a better alternative to the much used Google DNS servers is available under 1.1.1.1 and it’s the fastest DNS out there and probably one of the most secure one. They put a lot of effort into securing the service by putting encryption on it and partner with Mozilla to make DNS over HTTPS work. This means, they’ll close a big privacy gap that until now leaked all your browsing data to the DNS provider.

Machine Learning in iOS— for the noob – manu rink – Medium

I heard a lot about iOS’ machine learning already but despite the interesting fact that they’re able to do this on the device and don’t need to send everything to a cloud, I yet haven’t found out how to make use of this for own apps. Manu Rink now explains Machine Learning in iOS for noobs in her really nicely done guide.

Upptime

Upptime is an open source uptime and status page system, powered entirely by GitHub Actions and Issues. Cool!

Hash the email of your users as well

With the Ashley Madison data leak, we as developers should put more effort into securing our systems. Password hashing and encryption should already be the default, but as we now see, protecting email addresses and other private details is equally important.

Subresource Integrity - GitHub Engineering

With the growing usage of CDNs to deliver your static assets, it’s important to ensure the CDN is not compromised. Imagine an attacker injecting something into your code by intercepting or hacking the CDN. Of course you will not realize it until it’s too late. Since a few months, a web standard called “Subresource Integrity” has been developed. The github team now shares how you can use subresource integrity to check if your files are compromised or not and act accordingly.

Snyk - Web Security for Developers

Snyk finds and fixes known vulnerabilities in your Node.js dependencies. Also check out nsp which also can help you find vulnerabilities in your Node.js applications.

ToStaticHTML for Everyone! About DOMPurify, Security in the DOM, and Why We Really Need Both

Just in time for my reading list, Mario Heiderich’s new talk slides are here. The topic? “ToStaticHTML for Everyone! About DOMPurify, Security in the DOM, and Why We Really Need Both” and very serious considerations about email clients running in the browser, flawed security process and why the browser vendors are ultimately in charge here.

Barricade | Cross-Site Request Forgery Visually Explained

Do you know how a Cross-Site Request Forgery works? There is now an infographic that visually explains how CSRF works.

How to implement SRI in your build process ★ Mozilla Hacks – the Web developer blog

Justin Dorfman and Joshua Mervine explain how to implement Sub-Resource Integrity (SRI) in your build process.

How we built Origin CA: Web Crypto

GlobalSign has created a client-side PKI implementation to make certificates more secure. The open-source JavaScript library pkijs implements the formats that are used in PKI applications like signing, encryption, certificate requests, OCSP and TSP requests/responses. It is built on WebCrypto (Web Cryptography API) and requires no plug-ins. And now, CloudFlare has built “Origin CA” with it to make it easier to secure the connection between CloudFlare and the origin server.

WireGuard: fast, modern, secure VPN tunnel

Most VPN technology is already quite old, and cryptography is not as good as it could be. Wireguard is a new VPN currently in development that will have state-of-the-art cryptography and claims to be faster than IPSec. It’s built by people who have a deep understanding of secure software and cryptography, and I’m excited to see this as a stable product soon.

Backdoor Service Workers — Jeremy Keith

Jeremy Keith brings up a new point to the whole Service Worker and PWA debate: Currently, you can easily install a Service Worker via iframe without a user ever visiting the SW-site itself. Gladly, users who block third-party cookies and site data in their browser settings are safe but unfortunately this has huge potential to be abused by third-parties.

Making CSP great again! - Michele Spagnuolo and Lukas Weichselbaum // Speaker Deck

Content Security Policy [CSP] has great features but also brings its very own issues and risks. Michele Spagnuolo and Lukas Weichselbaum present the most common problems, implementation mistakes, some bypasses and how to make CSP great again in their slide deck.

SRI: The `require-sri-for` CSP directive. - Chrome Platform Status

A new require-sri-for directive in Content Security Policy gives developers the ability to assert to the browser that every resource of a given type ought to be checked for integrity. If a resource of that type is loaded without integrity metadata, it will be rejected without triggering a network request.

A practical security guide for web developers

FallibleInc’s “A practical security guide for web developers” tries to help developers build more secure, less vulnerable solutions. While they claim that it’s by no means a comprehensive guide, it covers stuff based on the most common issues they’ve discovered in the past.

New attack steals SSNs, e-mail addresses, and more from HTTPS pages

Mathy Vanhoef and Tom Van Goethem presented a new HEIST-attack on HTTPS pages to steal SSNs, email addresses, and more. You can view the slides [pdf], or read the write-up [pdf] to understand the attack and what you can do to prevent it.

Let's look at some of the security at Github

When we look into the source code of forms at github.com, we’ll find some interesting markup in there. Its purpose: preventing XSS attacks. In this blog post we can learn about the tricks that GitHub uses to maximize the security of their web application.

Troy Hunt: Website enumeration insanity: how our personal data is leaked

Troy Hunt wraps up how our personal data is usually leaked and why security is a design process, not only an implementation process. Also a good primer on how to design a password recovery feature.

More control with Clear-Site-Data and Feature-Policy

Both the W3C and WICG (Web Incubator CG) share ideas on two new new headers: Clear-Site-Data and Feature-Policy. They both improve the security and privacy of users. While the first one can clean locally-stored objects, the latter declares features the browser is allowed to use within the origin, such as geolocation, cookies, and WebRTC. As a site-owner, you can use this to prevent a third-party from tracking your users.

Stop Cross-Site Timing Attacks with SameSite cookies - igvita.com

When using cookies on a website, you should set the SameSite option to stop cross-site timing attacks.

Troy Hunt: Protecting your embedded content with subresource integrity (SRI)

I’ve already shared some thoughts on using SRI, but now Troy Hunt explains why it’s important to use it right now if you reference external third-party scripts, for example jQuery, from its CDN.

How To Issue A New SSL Certificate With An Old SSL Key – Smashing Magazine

Last week, Smashing Magazine had to deal with an expiring SSL certificate. While this is usually an easy thing to renew, problems may arise if you have HTTP Public Key Pinning (HPKP) enabled and set to a long expiry date (which usually is intended). Mathias Biilmann Christensen now wrote about the lessons learned from this and why you should be aware (and afraid!) of HPKP and how to issue a new certificate with an old key so that the site won’t break for your users with HPKP enabled.

Setup your Own L2TP/IPsec VPN Server with Raspberry Pi — Rita Zhang

Rita Zhang from Microsoft explains how you can set up your own L2TP/IPsec VPN Server on a Raspberry Pi, which can be useful to do in your home network so you’ll be able to connect to it when you’re traveling and using public WiFi.

GitHub's post-CSP journey

A few months ago, Github shared their learnings from using the Content Security Policy at github.com. Now they share more learnings in “GitHub’s post-CSP journey”. The focus lies on img-src, form nonces, same-site cookies, and more.

Everything you need to know about HTTP security headers - Appcanary

Max Veytsman summarized everything you need to know about HTTP security headers. An all-embracing but concise guide to security headers and when and how to use them.

Cross-Site Request Forgery is dead!

Mitigating Cross-Site Request Forgery attacks has never been easy. Luckily, it seems that we now got a proper solution for it: Same-Site Cookies. The only thing you need to do to make it work is adding SameSite to your existing Set-Cookie header. Of course, you should know how same-site cookies differ from “normal” cookies, but for most sites this should be easy to implement.

Hostile Subdomain Takeover using Heroku/Github/Desk

Let’s have a look at how Mr. Trump was hacked via DNS subdomain takeover, a long-known technique that most people who configure DNS entries for a domain aren’t aware of.

Design flaws in Lastpass 2FA implementation - Martin Vigo

Martin Vigo shares his findings from analyzing Lastpass’ Two Factor Authentication implementation. The article is a great reference to help you check your own implementation for the same fallacies and avoid the same design flaws.

Web Developer Security Checklist – Simple Security

Michael O'Brien shares a security checklist for web developers so that you don’t forget anything crucial in your next projects.

How to defend your website with ZIP bombs

Christian Haschek found an interesting way to defend a website with gzip “bombs” against rogue clients.

Troy Hunt: Introducing 306 Million Freely Downloadable Pwned Passwords

Troy Hunt, known for his service haveibeenpowned now released another cool thing: To match the latest NIST Digital Identity Guidelines, you should not allow users to use a password that previously appeared in a data breach. To do that, Troy released the data of his service in an anonymous way and you can now check online or get the data dump to implement the NIST guidelines. Note that there’s no requirement to implement this for non-federal agencies.

security.txt

For security researchers or people who found a security issue on a website, it can be hard to find a way to communicate about it appropriately. As a result, a lot of issues aren’t reported and others are disclosed without the team knowing about it before. To improve that situation, security.txt defines a standard to help organizations define the process for security researchers to securely disclose security vulnerabilities.

How our password check works — Colloq

Tobias Tom shares how at Colloq they implemented a password check that prevents users from choosing a password that has been exposed in a public data breach. It’s based on the amazing dataset by Troy Hunt and shares some interesting data on how to check against a 40GB Postgres dataset without affecting your site’s performance.

Ad targeters are pulling data from your browser’s password manager - The Verge

Gunes Acar shows how ad scripts can pull data from user’s password manager in the browser. There’s help for users using proper adblock plugins, and things site owners can do.

For Everyone - PagerDuty Security Training

PagerDuty just published an open source version of their internal security training material, full of interesting explanations about common security issues and strategies. This is especially nice as it can be given to people who are not technically experienced or simply to every employee in a company.

s0md3v/XSStrike: Most advanced XSS detection suite.

This neat Python tool is a great XSS detection utility.

Welcome · Practical Cryptography for Developers

Svetlin Nakov wrote a book about Practical Cryptography for Developers and it’s available for free. If you ever wanted to understand or know more about how private/public keys, hashing, cyphers or signatures work, this is a great entry for you.

"If you want, I can store the encrypted password." A Password-Storage Field Study with Freelance Developers - Naiakshina_Password_Study.pdf

This study shows interesting insights on how engineers think about doing tasks and why security is often so weakly implemented in projects.

SecurityPolicyViolationEvent - Web APIs | MDN

Did you know that you can capture CSP violation events in the browser with JavaScript? The SecurityPolicyViolationEvent does this and tells you all the details we want to know about such an issue. With that, we can easily build a simple reporting tool for our services.

terjanq/Tiny-XSS-Payloads: A collection of tiny XSS Payloads that can be used in different contexts.

terjanq provides us with a collection of short XSS payloads that can be used in different contexts. Pretty cool to do some security testing on our applications.

crowdsecurity/crowdsec: Crowdsec - An open-source, lightweight agent to detect and respond to bad behaviours. It also automatically benefits from our global community-wide IP reputation database.

Crowdsec is an open-source, lightweight service (written in Go) to detect and respond to bad behaviours and uses a global community-wide IP reputation database. Heard of fail2ban? This is a more modern approach of the service.

From Radio to Porn, British Spies Track Web Users’ Online Identities

This pretty frightening article, released last week by The Intercept, shows how intelligence companies have broken our web and can spy nearly everyone by tracking all metadata from everyone using online music networks, cookies, video sites, blogging platforms, calls, or photos and online ads. In light of this development, it’s important that we give more focus on privacy for our users by implementing HTTPS (with HSTS, HPKP), limit advertising network’s data grabbing and prevent MITM attacks by using resource integrity hashing for our CDNs.

Ethics of Algorithms at a glance

With the growing usage of algorithms in our everyday lives, we need to raise the question of ethics. Our human brain can make irrational and emotional decisions. And sometimes that is a necessary and good thing. But algorithms and computers can’t. This being the biggest challenge for artificial intelligence, we need to face this fact for already existing mechanisms like the Facebook news feed collection, or hiring algorithms. A good way would be to make such algorithms transparent, to give users a possibility to improve them and to make them more objective.

What every Browser knows about you

Today, as developers, we have many great features built into the browser. On the darker side, many of the features are affecting privacy and security of the user, as a site can read most of the information available even without user noticing anything. A demonstration shows what information a site can get about you without your confirmation. An eye-opener to re-think browser UIs and how much responsibility we, as developers, have to do the right thing. Be it educating the product owners or your own product where you voluntarily display a dialog to give a choice and notice about sending such data to your servers, we should embrace ethics. As a user, I tried to access the demo with a default Chrome setting (revealing horribly much sensitive data) and Firefox with Strict Tracking Protection, uBlock Origin, Disconnect and 3rd party cookies disabled. Despite all blockers, the latter reveals ‘only’ the data about my browser, its active plugins, my hardware and my local and public IP address.

Alexa, Cortana, and Siri aren’t novelties anymore. They’re our terrifyingly convenient future.

A.I. assistants can give you the news, order you a pizza, and tell you a joke. All you have to do is trust them—completely. An interesting story about the new listen-to-us devices that can scare the hell out of you if they surprise you. Reading George Orwell’s “Nineteen Eighty-Four” currently, I keep asking myself how we can still want to have such devices that are fully controlled by some company that only has follow-up commercial interest in selling such devices.

How sites can comply with Do Not Track

This guide explains how websites and apps can comply with the Do-Not-Track settings (newer link: DNT Guide) of users and how to use the Consent API to let people opt-out of tracking. I would love to see every website that tracks something providing it.

Facebook’s new ads will track which stores you visit - Recode

Facebook wants to prove that its ads lead to actual purchases. That’s why Facebook advertisers can now add their physical store locations, and Facebook will then track users by their phone locations and report if they have visited the store. Of course, Facebook is not the first company doing that: Google folks are proud of having done the same already for quite some time. I’m glad I don’t have apps of these brands on my phone anymore.

Uh Oh: Google Expands Its Ad Tracking. But, Yay: It’s Opt-In | WIRED

Google adjusted their privacy settings once again. I’ll leave you with these useful links where you can adjust your privacy settings for Maps, All Account Activity, more activity controls, and finally Google Payment privacy settings which have opt-in for data sharing and analysis for advertising on by default. Note that Chrome has its own settings in the app as well. So far, privacy…

Battery Status readout as a privacy risk

The Battery Status API in general sounds like a great addition to our web platform. Initially built by Mozilla to complete the API-set on the web, we can use it on websites to reduce the amount of interactivity and animation or serve videos in low resolutions when the battery is nearly empty, for example. Lukasz Olejnik, however, found out that this API is actually already used as a user tracking identifier by ad networks and others. And last but not least, it can also be used to charge more for a service when a user’s battery is low—as reportedly done by Uber.

Oversharing with the browser’s autofill

Stoyan Stefanov explains why using autocomplete fields in forms is great for some fields but can easily lead to data oversharing when used on fields that aren’t required.

Respecting Users | foobartel Ltd. | Web Design

Holger Bartel takes Vitaly Friedman’s article “̦Respect Always Comes First” as opportunity to highlight the importance of respecting users by asking a very interesting question: Everyone wants to create better experiences, but what are you willing to do for it? It’s not easy to find an answer and to blaze the trail for this in our work but an important part of building products.

#youbroketheinternet So We Got Tracked Anyway

Guess what? Our simple privacy enhancing tools that delete cookies are useless, as this article shows and explains. There are way more clever and secure ways to track a user via TLS session tracking and we have not much power to do anything against this, so be aware that someone might be able to track you regardless of how many countermeasurements you have enabled in your browser.

The Bare Minimum You Should Do to Protect Your Family's Data - Internet Citizen

Do you have a husband or wife? Kids? Other relatives? Then this essential guide to protect your family’s data is something you should read and turn into action. The internet is no safe place and you want to ensure your relatives understand what they’re doing and it’s you who can protect them by teaching them or setting up better default settings.

Opinion | We Read 150 Privacy Policies. They Were an Incomprehensible Disaster. - The New York Times

Kevin Litman-Navarro analysed over 150 privacy policies and shares the insights in this visual story. Not only it takes about 15mins to read them in average, most of them require a college degree or even professional career to understand them. Nicely shown, you can see the history of how hard the policies are to read over time, also linked to when GDPR was introduced.

The Encryption Debate Is Over - Dead At The Hands Of Facebook

Remember the bold claim that Whatsapp is end-to-end encrypted? Here are the latest plans and admits on how Facebook treats privacy with their incredibly low standards. It might be finally time for you to convince people to use Signal or Threema.

Prefetching, preloading, prebrowsing | CSS-Tricks

Making sense of prefetching, preloading, prebrowsing.

The Web in India: Anecdote 1 - Proxy browsers don't work - Tales of a Developer Advocate

Paul Kinlan had the pleasure to work from India for a week and shares his insights on network quality, browser usage and the difference of what works in proxy browsers and what doesn’t.

Why Performance Matters – A Perception Of Time

It’s important that we as developers understand that web performance is not only a matter of loading things fast and measure the timing. Denys Mishunov shares the principles of human perception, the attention span and how we need to engage people before it ends.

Facebook 2G Tuesdays to slow employee Internet speeds down - Business Insider

Facebook started 2G/EDGE Tuesdays for employees , so that its employees can better relate to their users’ problems. This is a great idea, and we all should do it regularly.

10 pro tips for managing the performance of your third-party scripts | SOASTA

If you include a third-party script, you should always be aware of its consequences. As you don’t control the resource but often rely on it, you should spend some time thoroughly considering whether it’s worth implementing it, what happens if the script is not available on the remote server any longer and, more specifically, whether your application will still work in such case.. Tammy Everts shares a couple of tips to consider when you include a third party script. Lots of great advice regarding advertising scripts, their ROI, caching methods, and how to detect malicious changes in such scripts.

Caching best practices

Jake Archibald elaborates on common caching mistakes and how to build a caching concept for your documents that works with the browser’s native cache and Service Workers. If you think no-cache or must-revalidate means the browser does not cache such resources, or if you ever wanted to understand caching properly, read his article.

Bits Up!: Cache-Control: immutable

Do you remember when Facebook researched the efficiency of the browser’s cache? Patrick McManus now made a reference implementation in Firefox to improve the situation by adding a new directive in the Cache-Control- header: immutable. It indicates that the response body will not change over time and is complementary to the lifetime cachability expressed by max-age. Thus, the browser will assume that, if not expired, it’s unchanged and should not be revalidated. The goal is to land support in Firefox 49 and tests have shown that this will make a big difference.

Service Workers and PWAs: It’s About Reliable Performance, Not “Offline” – Infrequently Noted

Alex Russell wrote up why Service Workers are about more than just an offline experience but also about providing reliable performance.

Designing for Performance by Lara Callender Hogan

Lara Callender Hogan now published her book “Designing for Performance” for free as an online HTML book. If you like it, consider purchasing it nevertheless to support the author.

How I built an app with 500,000 users in 5 days on a $100 server

Erik Duindam writes about how a good architecture can save you a lot of money when building a product. He shares how he built a Pokémon Go app with 500k users in just five days and reduced the costs of it to a $100/month server infrastructure, compared to many MVP products that burn money by choosing bad technical designs.

How To Use WebPageTest and its API | CSS-Tricks

Eduardo Bouças explains how to use the WebPageTest API to improve your quality assurance process.

You’re probably doing DNS wrong, like we were

Brian Armstrong from Canopy shares why you shouldn’t rely on default DNS settings, as the recent Dyn DNS outage has shown. He covers how to configure DNS the right way, why a longer TTL is important, and why having different nameservers from different providers can save your service’s uptime.

Web fonts, boy, I don't know – Monica Dinculescu

Monica Dinculescu just spent a week traveling Taiwan with a 2G roaming plan and now reminds us that we need to care more about proper lazy font loading if we use web fonts to not annoy our users.

Performance Calendar » Cache Digests: Solving the Cache Invalidation Problem of HTTP/2 Server Push to Reduce Latency and Bandwidth

Sebastiaan Deckers on how to get the real performance benefit from HTTP/2 by solving the Cache Invalidation problem.

How much data should my Service Worker put upfront in the offline cache?

Nicolas Hoizey analyzes why it’s not a good idea to just hook up Service Workers and save all resources offline. Given the fact that a lot of users might never come back or that they simply won’t read through all the pages of a website, downloading megabytes of data on first load might be a very bad practice — especially when we keep data plan costs in mind. Looking at these numbers, the 3MB of an average web page are nearly negligible if a Service Worker loads 16MB of useless data on initial page load without further ado.

Send messages when you're back online with Service Workers and Background Sync

Phil Nash wrote a guide on how to use Service Workers and the Background Sync API to send messages when a user is back online.

Performance and Resilience: Stress-Testing Third Parties – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts

Harry Roberts dives into the world of using third parties on a website and analyzes the performance and resilience. The article has great notes and insights into common issues with modern web projects and shows how request blocking through ad blockers or other techniques can be tested by developers and how you can avoid the most common pitfalls with third parties easily.

Offline POSTs with Progressive Web Apps – Web Dev @ Microsoft – Medium

Andreya Grzegorzewski shares how we can use the Cache API to do offline POST requests in Progressive Web Apps. This super cool trick allows us to queue POST requests, such as a form submission/data upload, cache it and once the user is back online, send it to the server.

Compression Decompressed | The website of Jack Preston, Computerer

Jack Preston has written up a nice visual explanation of how Compression works.

Essential Image Optimization

Essential Image Optimization by Addy Osmani is a free ebook that explains nearly everything you can and should know about image optimization for the web. Something you should definitevely have a look at when you find some time for it.

ARM Takes Wing: Qualcomm vs. Intel CPU comparison

Vlad Krasnov took the privileged chance of being able to compare the newest server processors at Cloudflare and wrote up what he found out. The result is pretty interesting: Qualcomm achieves a similar performance to the fastest Intel processors but only needs about 30% less power, sometimes even less. So while there might be some issues with software incompatibilities with the newer chips by Qualcomm, it’s going to be interesting what happens on the server market. Because at large data centers it’s quite important to save energy—not only because our planet benefits from less power consumption but also because it’s simply cheaper.

Understanding The Vary Header – Smashing Magazine

Andrew Betts took all his knowledge about the great feature in HTTP and summed it up in his article “Understanding The Vary Header”.

Network based image loading using the Network Information API in Service Worker | justmarkup

Michael Scharnagl explains how we can use Service Workers (which are basically a web proxy) to load images based on the Network Information API

The Fallacies of Distributed Computing (Applied to Front-End Performance) – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts

Harry Roberts often finds the right words to uncover issues that aren’t obvious to a lot of people. The Fallacies of Distributed Computing (Applied to Front-End Performance) is about as developer making assumptions for users, about actively neglecting or overthinking problems such as network performance.

Performance Calendar » Progressive Image Loading using Intersection Observer and SQIP

Dean Hume explores pretty interesting paths how to load images progressively using Intersection Observers and SQIP, a tool that builds SVG-based image placeholders automatically.

Building your own CDN for Fun and Profit — Janos Pasztor

Janos Pasztor built his own Content Delivery Network for fun and profit and why he thinks it can be a better solution than using existing third-parties for this. Finally, the code for the CDN on his personal website is available on Github. A nice web performance article looking at common solutions from a different angle.

w descriptors and sizes: Under the hood / Observable

Eric Portis shares the under the hood principles of the w descriptors and sizes attribute for images. A pretty technical but revealing secrets post that makes you finally understand the magic behind these new responsive image attributes.

Probably Wrong — Avoid Else, Return Early

Tim Oxley shares why he prefers to return early and avoid else wherever possible. This is something I’ve been doing in the beginning of my career, then lost at some point but nowadays do a lot again and can fully agree with. Especially the reduced complexity and simpler logic in functions is a key advantage for me here.

Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers

Jeremy Wagner shares the best practices on how to build a lazy loading mechanism for images and videos. This resource is definitely not the quickest solution but instead shares how to build the best experience and performance based on the latest technologies available in browsers.

Postgres 10, Performance and You // Speaker Deck

Postgres 10 is there already for a while now but yet I personally struggled to find good information how to use all these amazing features it brings. Gabriel Enslein now shares Postgres 10 Performance updates in his slidedeck that give you a clue how to use the built-in JSON support, native partitioning for large datasets, or hash index resiliency and more.

The headers we don't want

Andrew Betts researched how many websites use outdated headers that we don’t want anymore and found out that it’s a lot. He now shares why we should drop old headers and which ones we want to serve instead.

Connection-Aware Components | Max Böck - Frontend Web Developer

Max Böck on how we can build components that react to the actual device connection speed using the Network Information API. And despite it’s currently only available in Chrome and Samsung Internet browsers, it’s worth trying it out and maybe already serve it to these users.

Accurately measuring layout on the web | Read the Tea Leaves

Nolan Lawson shares how we can accurately measure layout performance on the web in his in-depth guide for debugging performance issues and how the rendering pipeline of modern browsers works.

LOW←TECH MAGAZINE

How can we build a website that’s working well and is fast on low-tech devices and uses as little resources as possible while not looking very bad? The low tech magazine tried to find out and has built their website following a crazy approach to save resources. Neat additional fun fact: The websites goes offline when not enough sun is available to power the 2.5Watt solar panel that powers the server of the website.

Measure Performance with the RAIL Model  |  Web Fundamentals  |  Google Developers

The new Google Web Fundamentals guide about measuring performance with the RAIL model is out and should be saved as a very useful link for when you want to analyze or debug the performance of a website.

Smart Bundling: How To Serve Legacy Code Only To Legacy Browsers — Smashing Magazine

Shubham Kanodia explains how we can serve legacy code only to legacy browser by using smart bundling techniques. Something we should’ve been doing for years already but yet struggle to implement.

CSS and Network Performance – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts

Harry Roberts explains all the details that are important to know about CSS and Network Performance. Yes, many of these facts are widely and long known but this is not only a comprehensive collection of all of them but also has some very interesting newer tips later in the article, especially when you have async scripts as well in your code.

Squoosh

I love the tiny ImageOptim app for batch optimizing my images for web distribution. But now there’s an impressive Web App called “Squoosh” that lets you optimize images perfectly in your web browser. It’s made by the Google Chrome team and as a bonus you can also resize the image and choose which compression to use, including mozJPEG and WebP.

Cache-Control for Civilians – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts

How much do you know about caching on the web? Harry Roberts now wrote a nice summary article that explains the basic and some extended concepts about caching. And as caching can make a huge performance difference, we all should try to think about it before optimising anything else.

Goodbye iframes - BBC Design + Engineering - Medium

Toby Cox shares how at BBC they ditched iframes now and instead use the ShadowDOM and improved their site performance by far. This is a good piece explaining the advantages and drawbacks of iframes and why adopting ShadowDOM takes time and feels uncomfortable for most of us—yet.

CO2 emissions on the web | Danny van Kooten

Danny van Kooten is the author of a very common Wordpress plugin. He made some simple changes and with it saved probably about 59000kg of CO2, all by removing a 20kb JavaScript dependency. There’s little chance you can similarly easy cut your personal emissions so this gives us a clue how important it is to not be careless about what we do on the web.

AddyOsmani.com - Infinite Scroll without Layout Shifts

Infinite scrolling is used a lot across the web, especially for item listings. Now the key for this cool way to ease a flow for the user is to implement this right and without layout shift or other glitches. Addy Osmani shows how to avoid layout shifts in infinite scolling. And don’t forget to update the URL to the next paging so if something goes wrong and the user needs to reload the page, they see the same state again.

AVIF has landed - JakeArchibald.com

AVIF is the new hot image format that we can use on the web. Finally, it’s a standard format that’s going to be implemented by probably all browsers quite quickly. Chrome already has support on Desktop and it’s coming to Android soon, Firefox is currently implementing it and Apple is part of the AV1 working group so they’ll probably add it as well soon. Anyway, you can already use the new image format by using the picture element and content negotiation methods as we do it for WebP or other formats already. But why AVIF? Well, it’s a standard that is accepted by many major software companies and it’s really good in compressing images while still looking good. In many cases it’s much better than WebP, and it’s really good for not only photos but also illustrations.

Creating websites with prefers-reduced-data | Polypane Browser for Developers

Kilian Valkhof shares concepts and examples of how we can integrate the prefers-reduced-data setting into our websites. With it, we can disable web font loading, not load background images, or using picture and its media query attribute to load smaller images than normal. We can even prevent preloading or autoplay of videos, disable infinite scrolling preloads (we could improve the example using IntersectionObserver). It’s super cool to see these practical implementations which don’t even require much effort but have a huge benefit to users with a limited data budget (international roaming, etc).

Optimising SVGs for Web Use 

Andreas Larsen shares step by step in a 2½-article series on how to optimise SVGs for the use on the web: The first steps, a deeper dive into SVG, and how to drastically optimize an existing logo.

SVG Country Flags | flag-icon-css

If you have to display country flags, you likely have some sort of picture-list for it. At least all the time this happened to me in the past, I was annoyed to not have an appropriate resource-set for it in times where we have SVG. Now, there is flag-icon-css, an MIT-licensed set of country-flags.

Boxy SVG Editor

You can build vector graphics in SVG format with the Boxy SVG editor, a Chrome application that is based on web technologies. A pretty cool alternative to the heavy-weighted Illustrator and Sketch applications which often create SVG code that not every browser understands.

» Autofill: What web devs should know, but don’t Cloud Four Blog

How convenient would it be if payment forms would just let you scan a credit card and fill out your invoice and delivery address? Despite most sites not using them, there are web standards that define exactly this behavior and many browsers actually support it already. For example, Safari lets you scan a credit card if you define the field properly. Jason Grigsby gives you a tutorial on how to properly format payment forms. Finally, we will get an entire Web Payment API that will offer developers a great way to build convenient checkout processes where the browser will autofill all information.

Safari Autofill: Trigger password suggestions in Devise registration form

Using account registration pages on a mobile phone is annoying, especially if you need to enter a password. But there’s a way to make this more convenient for your users: Safari provides an option to let users use the iCloud keychain to generate a password on demand.

Using the HTML lang attribute | The Paciello Group

Despite being a simple and old attribute, you can find a lot of websites doing it wrong: HTML’s lang. Sometimes it’s not declared at all, and sometimes its value is "en" although the content is not in English. Learn how to use the lang-attribute properly and where you can apply it.

Links vs. Buttons in Modern Web Applications

All people say using links and buttons is very easy in web development. The truth is, I don’t think that’s true, especially since the decision makes a huge difference when it comes to accessibility for which the semantic choice can make a huge difference. Marcy Sutton tries to give real-world hints how you can figure out if an element visually looking like a button should be a button or a link instead.

SVG Vector Effects - Call Me Nick

Nick Salloum shares how you can scale SVG graphics without scaling their borders. This is very useful for outline icons which you want to homogeneously display in various sizes altogether. The effect is achieved through the widely unknown vector-effect attribute, which for example can have the non-scaling-stroke value.

Responsive Images 201: Client Hints - Cloud Four

Jason Grigsby explains how we can use Client Hints for responsive images. With Client Hints, the browser can tell a server via HTTP headers what types of content it prefers based on information about the device pixel ratio, viewport width, and width of the image element on the page. This allows the server to serve the most appropriate image back to the client.

Document Outlines in HTML 5.1

Ire Aderinokun explains what you have to keep in mind to create a valid document outline in HTML 5.1, which has been officially released in early December 2016.

Align SVG Icons to Text and Say Goodbye to Font Icons

SVG icons often have one problem: They don’t align well to the text surrounding them. Elliot Dahl explains how to fix that.

Toggle Buttons

Sometimes a user interface requires a clear “On”/“Off” switch. It’s usually a great idea when you want to show optional settings but indicate more as a checkbox does by default and in a simpler way as two radio options could provide it. Heydon Pickering now shares the technical approach to building semantic, accessible and easy-to-use toggle buttons.

Implementing system fonts on Booking.com — A lesson learned.

Stuart Frisby from Booking.com shares what they learned from using system fonts and the improvements they made to a default stack which many of us are using.

Exploring What the Details and Summary Elements Can Do | CSS-Tricks

Robin Rendle explores what we can do with the <details>/<summary> elements in HTML and CSS. Ever thought that we could de-animate (pause) a gif? We can do inline-block footnotes or build tooltips with it!

react-a11y

react-a11y is a react tool that warns you about potential accessibility issues in your code.

Designing Safer Web Animation For Motion Sensitivity

In times where we inject animations on scroll, let elements fly in and make use of other playful animations on websites, we also need to think about users who get distracted or get ill by such “enhancements”. Val Head writes how you can really enhance your motion animated website with some controllers that allow people to disable the animations.

ally.js

Rodney Rehm started to research a little bit on accessibility and its consistency in browsers over a year ago. Now he released ally.js, a JavaScript library that helps you make a website or web application accessible. It’s great to see that as it makes optimizing the accessibility of your project much easier.

Making Accessibility Simpler, With Ally.js – Smashing Magazine

Rodey Rehm has published a new open source library to enhance your website’s accessibility: ally.js. It took him months to build this — now he shares why he wrote this accessibility stuff mainly for his own convenience and tells you how to properly handle a modal’s focus behavior.

The web accessibility basics – Marco's Accessibility Blog

Given that most people don’t how to improve accessibility on their site or application, here are some important basics that are extremely easy to implement but matter a lot. Next time you build something, consider incorporating those few things.

Free web accessibility tools round-up

An overview of free tools you can use to make sure your website is accessible. A short introduction that helps you to test your application or site easily.

The accessibility stack: making a better layer cake » Simply Accessible

When we see our development stack as an accessibility stack and follow some basic principles, we can easily build an accessible web solution that integrates all kind of users, no matter how they consume the content on the website.

Basic screen reader commands for accessibility testing | The Paciello Group

Léonie Watson collected the basic commands on how to use and control the most common screen readers (including the OS X built-in Voice Over) so that everyone can test websites for accessibility compatibility.

How to Meet WCAG 2.0

The W3C published a new document summarizing what is needed to meet WCAG 2.0 requirements withing your website or application.

How to Create More Accessible Content, Part 2: Media | Viget

How do you implement media to be accessible for a variety of users? Tricks for writing better alternative texts, or when to provide an empty alt="" attribute, how to add video captions, or create transcripts are shared by Megan Zlock.

Font Awesome

Fontawesome shares their new accessibility guidelines for the usage of icon fonts. A great resource you should read if you use fonts to serve icons on your website.

Custom Control Accessible Development Checklist

If you’re building custom controls in HTML and JavaScript, like a custom select / typeahead-field or similar components, you should at least bear in mind this helpful W3C checklist on how to make custom controls usable and accessible. This one is not about the usual accessibility for screenreaders, but for things like keyboard and touch operability, contrast and a clear focus indication state.

WCAG 2.0 checklist - a free and simple guide to WCAG 2.0

Luke McGrath now provides a free and pretty complete, understandable checklist for WCAG 2.0. Use it for your upcoming projects and even to recognize what could be improved in future.

How to Make Accessible Web Components — a Brief Guide

Web Components received a lot of negative feedback in the past. One major point is that developers need to implement accessibility features completely on their own. Now Artem Tabalin shares how to make accessible web components using a multi-select field as example.

Frend — A collection of accessible, modern front-end components.

Frend is a modest and dependency-free collection of accessible, modern front-end components. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment.

Web Accessibility | Udacity

Google released a free web accessibility course on udacity.

Accessible SVGs | CSS-Tricks

Heather Migliorisi wrote a huge compendium about creating accessible SVGs that you should definitely read if you use SVG files in your projects (and who doesn't it?).

Accessible UI Components For The Web — Addy Osmani

Addy Osmani explains how to build accessible UI components for the web, taking into consideration visual, hearing, mobility and cognition as accessibility factors. A pretty great entry-level guide to better, accessible products.

aria-selected – when (not) to use it

Stefan Judis explains when to use and when not to use aria-selected. . Applying it to the current active navigation item, for example, isn’t correct, but applying it to the current active tab in a tablist, on the other hand, would be.

Accessibility Testing with Intern | Blog | SitePen

Covering unit tests and functional tests, The Intern is a nice testing tool for JavaScript. But you can also use The Intern for accessibility testing, as Jason Cheatham explains in a recent article.

Patterns for accessible webchats | Accessibility

Chats are much more common these days, but how many of the web-chats out there are accessible? Theodor Vararu shares the patterns for accessible web chats.

General Principles: Principles: ARIA Landmarks Example

The W3C now has a web page that explains the general principles of ARIA.

Managing focus in SVG - ally.js

Rodney Rehm updated his focus management library ally.js with SVG support and wrote a tutorial on how to manage focus in your SVG code.

Responsive Design for Motion | WebKit

The WebKit team recently implemented reduced motion media queries and now shares how you can use them.

Accessibility feedback from Twitter

Hampus Sethfors and Hugo Giraudel collected a bunch of real-world experiences regarding accessibility on websites. These two articles give a lot of insight on how to understand accessibility and usability of websites better.

Building an accessible auto-complete

Russ Weakley shares in his slideshow how to build an accessible auto-complete field.

Accessibility at a Glance - YouTube

Microsoft’s developer team shares a video playlist about practical accessibility, including how to optimize presentations or language for inclusion or how to build a proper “skip navigation” functionality on your website.

59% of form inputs unlabeled - Alex Carpenter

I see it in many projects myself and Alex Carpenter wrote up collections of the Top 1 million sites: 59% of form inputs are unlabeled. This means that 2/3 of the forms that we see on these pages are not accessible, but more than that: They’re not even providing helpful forms to people who aren’t required to use assitive technologies like a screen reader but actually all of us. It’s as easy as wrapping the input and describe it, for example like this: <label>Name<input name="name"></label>. Surely there are even better labelling practices but this would be enough already to significantly make a difference for all users of a website, including for you and me.

Under-Engineered Text Boxen | Adrian Roselli

Adrian Roselli shares why we shouldn’t under engineer text form fields and why the default CSS that comes with the browser usually isn’t enough. A pretty good summary of what’s possible, what’s necessary and how to make forms better for everyone visiting our websites. It even includes high-contrast mode, dark mode, print styles, and internationalisation.

Bruce Lawson's personal site  : Checklist to avoid the most common accessibility errors

63% of surveyed developers don’t test for accessibility of their work, it seems. Bruce Lawson reacted and created a 4-minutes business case of testing and solving the biggest accessibility issues. Our turn now.

Standards for Writing Accessibly – A List Apart

Here are the Standards for Writing Code Accessibly.

Download the Atkinson Hyperlegible Font | Braille Institute

Here’s Atkinson, a new free and hyperlegible font published by the Braille institute.

ES6 Promises in Depth

ponyfoo’s article series about ES6 is now continued and an in-depth article explains ES6 Promises, so you can finally understand how they work. Oh yeah, and to make it even better, you can use the tool Prmoisees to visualize promises.

How to add DOM Events Listeners

Learn how to create and remove DOM Event Listeners the proper way.

Learn Code The Hard Way, Regex!

With this online book you can Learn Regular Expressions with a free online book in depth. It’s a great resource with lots of useful insight and can help you as a beginner or as an expert.

DOM Tips and Techniques: Parent, Child, and Siblings

Working with native DOM still seems to many people like a pain. But today, native JavaScript APIs for the DOM offer you a lot of tiny cool functions to select elements which you probably don’t know of. Louis Lazaris shares practical tips on how to select children and siblings with native DOM methods.

Offline Recipes for Service Workers

David Walsh introduces Mozilla’s new “Service Worker Cookbook”, which is a great resource containing lots of useful Service Worker examples. In his blog post he also shares the most common code examples to help you get started.

My node test strategy

Remy Sharp runs JSBin, a platform for collaborative JavaScript debugging which is being used by millions of users. Running tests is pretty crucial for this mostly one-man show project. You can now read about his Node.js test strategy on his blog.

Don’t forget the noscript element

It’s easy to forget about when you build JavaScript applications, but you should always remember to provide meaningful fallback content via the <noscript> element. It also targets people disabling scripts in their browsers or using content blockers.

How to learn ES6

This short guidance article gives you some of the best resources on how to learn ES6.

Everything you wanted to know about JavaScript scope @toddmotto

It’s not a new resource but worth reading if you haven’t yet fully understood how the JavaScript scope works: Everything you wanted to know about JavaScript scope by Todd Motto.

Debouncing and Throttling Explained Through Examples | CSS-Tricks

Seeing so much code that does not use debouncing or throttling for scroll, resize or typing events, I can only recommend this article for everyone not yet using it. The article visually explains the differences between a normal event listener, debouncing and throttling and shows example code for most common use cases.

Tracking unhandled rejected Promises

In promise-based asynchronous code, rejections are used for error handling. One risk is that rejections may get lost, leading to silent failures.

Plyr - A simple HTML5 media player

There are a couple of JavaScript video players out there already. But Plyr is a simple, lightweight and accessible media player that you can use for most projects to embed YouTube, Vimeo or self-hosted videos.

chillout.js — Reduce CPU usage in JavaScript

Chillout.js reduces the CPU usage in JavaScript by providing asynchronous iteration functions that have a Promise-based interface. No more “Warning: Unresponsive Script” alerts in the browser.

Things to Know (and Potential Dangers) with Third-Party Scripts | CSS-Tricks

We have a complex relationship with third-party scripts, mainly because we neglect that these resources can have downtime, can be altered silently or blocked in the client by the user. Yaphi Berhanu shares what you need to know about third-party scripts and the potential dangers that come with them.

Awesome Service Workers

I already shared a couple of Service Worker resources but which one to choose when you want to use it? Likely the best option is to search for the suitable use-case in the Awesome Service Workers list.

Complexities of an infinite scroller | Web Updates - Google Developers

A lot of projects nowadays have an infinite scrolling implemented. But most of these implementations lack certain details such as DOM recycling or scroll anchoring. The tutorial “Complexities of an infinite scroller” shows you how to build this with solid code.

Web Notifications Series — The Guardian Mobile Innovation Lab

In a multi-part story about Web Notifications, developers from The Guardian Mobile Innovation Lab share their experience and findings of implementing notifications into their news site. For each individual step, they explain what you need to do, can do and what can still be improved.

Passive Event Listeners are only needed for touch/pointer events

Paul Irish left a note this week on Passive Event Listeners. Apparently, they’re only needed for touch and pointer-events and have no advantage when used in other cases.

Of Course I’ll Let You Execute Arbitrary Javascript Code in My Users’ Browsers

“Add this JS-snippet to the project.”—a common request that developers hear quite often. Kevin J. Dolan shares his eye-opening experience with a QA-person on why it’s a very, very bad idea to follow such requests blindly and explains why you shouldn’t include external third-party JavaScript references without extensive reviews.

Understanding native JavaScript array methods – Ben Frain

Ben Frain explains the native JavaScript array methods and how they differ from each other. A great introduction (or reminder) of what we can use today to get data out of arrays.

Shadow DOM v1: self-contained web components | Web Fundamentals - Google Developers

Eric Bidelman explains the new Shadow DOM v1 standard, the now de-facto standard for building self-contained web components.

Passport.js – Simple, unobtrusive authentication for Node.js

Passport.js is an authentication middleware for Node.js, supporting authentication via username and password, Facebook, Twitter, and many more.

Lazy Loading Images? Don’t Rely On JavaScript! — Robin Osborne

Lazy loading images is a great way to save your users data. However, on bad network connections, JavaScript can easily break, and, thus, users often won’t be able to see the images at all. To tackle the issue, Robin Osborne shares an approach in which he first goes through the obvious JavaScript-enabled, then JavaScript-disabled scenarios, and concludes with a clever solution to solve broken JavaScript for image lazy loading.

Stateful and stateless components, the missing manual @toddmotto

Todd Motto wrote the missing manual on stateful and stateless components. This is a pretty good round-up for everyone writing JavaScript today.

50K Array, HTML5 Web Worker Demo

Afshin Mehrabani illustrates the impact of Web Workers when sorting a 50K array with JavaScript on the main thread or in a background task. Great to see why we should consider using asynchronous worker tasks for complex and non-time-critical operations.

bitsofcode | for..in versus for..of Loops

When should we use for … in and when should we use for … of loops? Ire Aderinokun explains the differences and advantages of these basic JavaScript loops in detail.

Enhancing a comment form: From basic to custom error message to BackgroundSync | justmarkup

Michael Scharnagl explains how you can enhance a basic form ((i.e. a login or comment form) with custom validation, AJAX requests, auto-expansion of a textarea, and, finally, Service Worker and BackgroundSync to store input when a connection is unstable.

The global object in Javascript: a matter of platforms, unreadable code and not breaking the internet - Contentful

Stefan Judis wrote about the global object in JavaScript, variables and the issues around it. This is not only useful for people with beginner or intermediate JavaScript knowledge but also for advanced users who want to understand the topic better.

Building a fully-accessible help tooltip

Sara Soueidan shows how to build a fully accessible help tooltip, and why CSS-only methods sound neat but often aren’t.

Bricolage | Typefaces: The easiest way to self-host open-source fonts

Kyle Mathews published typefaces, a self-host font-face loading package that makes it simple to host web fonts on your own. He also explains why self-hosting web fonts is faster and why it even works offline.

Prepack · Partial evaluator for JavaScript

Prepack is a JavaScript source code optimizer that tries to simplify your code on the compile-time to make it faster on the run-time. By pre-resolving calculations and assignments where possible, for example.

This in JavaScript | Zell Liew

Zell Liew wrote an entire article explaining this in JavaScript. As it depends on certain conditions and in which environment it’s used, this can sometimes be confusing. Zell shares his knowledge with us so we can learn more about the keyword.

Lazy loading images using Intersection Observer | Dean Hume

Dean Hume shares how we can use Intersection Observer to lazy load images, a relatively new technique that’s landing in more and more browsers right now and brings several advantages over the existing approaches of lazy loading images.

deeplearn.js

deeplearn.js is a a hardware-accelerated machine intelligence library for the web. You can build and train neural networks in your browser with it, or play color sequences, or detect objects in images.

Go beyond console.log with the Firefox Debugger – Mozilla Hacks – the Web developer blog

Dustin Driver explains on the basis of the Firefox Debugger how to use a browser’s debugger and go beyond console.log.

Dynamic import()  |  Web  |  Google Developers

Safari has dynamic JavaScript import() support already in the preview builds, and Chrome 63 will support it as well. Mathias Bynens explains what this means and how we can use it. import() basically is import on fire and lets you load entire JavaScript modules on the fly only when you really need them.

await vs return vs return await - JakeArchibald.com

Jake Archibald explains the subtle but vital difference between await vs return vs return await and gives advice when to use which one.

i is="the walrus"

Brian Kardell wrote an important post about how we soon can use Custom Elements as extension of a common native element. This is especially great as we then don’t need to build everything from scratch but can extend native elements with customizations and still have the full accessibility and usability inherited from the native element. Apart from that, this feature allows to build great progressively enhances Custom Elements.

Robust Client-Side JavaScript – A Developer’s Guide · molily

The JavaScript programming language is an essential tool of web developers today. Websites ship more and more JavaScript to the browser to be more interactive. The more complex client-side JavaScript gets, the more error-prone and fragile the user experience might get. Why do we need to talk about robust JavaScript and how do we achieve it? Here’s “Robust Client-Side JavaScript”, a developers guide by Mathias Schäfer.

Messaging Between Tabs Using Service Worker · loxodrome.io - James Milner's personal blog

James Milner shares how we can use a Service Worker to send messages between browser tabs that are in the same domain scope.

Loading Third-Party JavaScript  |  Web Fundamentals  |  Google Developers

Addy Osmani wrote up the fundamentals of loading third-party JavaScript in a proper guide, including privacy, security and performance problems.

schne324/dragon-drop: Accessible drag and drop list reorder module

If you need a drag and drop reorder module, there’s a good solution available now that is accessible and works smooth: dragon-drop.

Here are examples of everything new in ECMAScript 2016, 2017, and 2018

In the past years, we’ve gotten a lot of new features on the JavaScript platform. It’s hard to remember all the new stuff so Raja Rao DV summed up “Everything new in ECMAScript 2016, 2017, and 2018”.

↩️ Native Undo & Redo for the Web

Sam Thorogood shares how we can build a “native undo & redo for the web”, as used in many text editors, games, planning or graphical software and other occasions such as a drag and drop reordering. And while it’s not necessarily easy to build, the article explains the concepts, technical aspects so we can understand this complex matter relatively easily.

stowball/eqio: A simple, tiny alternative to element/container queries

There’s a new way to implement element/container queries into your application: eqio is a tiny library using IntersectionObserver.

pqina/filepond: 🌊 A flexible and fun JavaScript file upload library

filepond is a JavaScript library for uploading files that looks great and comes with a lot of adapters for React, vue, Angular or jQuery and has some nice built-in UX.

the frontendian — A Guide to CORS

Ryan Miller created a new publication called “the frontendian” and one of the articles there is probably one of the best explanations and guides to CORS I’ve came across so far.

A Bloatless Web – Andrea Giammarchi – Medium

Andrea Giammarchi about the problem of bundling JavaScript with Babel and why transpiling code isn’t the best solution anymore. Instead, we should think about how to serve different bundles depending on the browser support to decrease the bundle size and improve performance.

Extending Native DOM Elements with Web Components – RevillWeb

Leon Revill show us how we can extend existing native DOM elements with Web Components. This is extremely helpful and useful as we can not only save a lot of time by using prebuilt templates for custom elements but also get all the optimizations and defaults (semantics, accessibility, browser functionality) for free and still can build our own behaviour on top of it. At least, if we can use Custom Elements at all but that’s a different story.

The Cost Of JavaScript In 2018 – Addy Osmani – Medium

Addy Osmani researched the cost of JavaScript in 2018 and wrote a summary article, sharing evidence that every byte of JavaScript is still the most expensive resource we can send to mobile phones because it can delay interactivity in large ways. This is increasingly becoming a problem with not so capable phones that are widely used outside the tech industry.

A tour of JavaScript timers on the web | Read the Tea Leaves

Nolan Lawson checks out the different ways of using timers in JavaScript, compares them and tells us the differences and when to use which one.

Taming this In JavaScript With Bind Operator — Smashing Magazine

Willian Martins shares the secrets of JavaScript’s bind() function, a widely unknown operator that is so powerful and allows us to invoke this from somewhere else into named, non-anonymous functions. A different way to write JavaScript than using anonymous arrow-functions.

leonardomso/33-js-concepts: 📜 33 concepts every JavaScript developer should know.

Leonardo Maldonado provides a nice collection of JavaScript concepts that are very useful to know for developers. The list includes a couple of videos and useful articles around the topic so you can choose your preferred way of learning about it.

The Power of Web Components - Mozilla Hacks - the Web developer blog

The Power of Web Components shares the basic concepts, how to start using them and why it can give you so much relief using your own HTML elements instead of needing to glue HTML, the related CSS classes and a JavaScript trigger together.

How to: Back-to-top button without scroll events – Signal v. Noise

How do we provide a back to top button? Well… here’s a new one including a very performance-oriented, efficient way by using an Intersection Observer to show and hide the button in the interface.

Guide to Web Authentication

Why is Web Authentication such a hot topic you may ask? Well, most data breaches are based on weak and reused passwords. That’s why the new API impacts online security a lot. The new Guide to Web Authentication is a nice example of how beautiful a security implementation guide can be.

Maintaining large JavaScript applications | IO 9elements

More and more of us need to maintain large JavaScript applications. But we all struggle with it sometimes so Mathias Schäfer wrote a nice overview of their lessons learned from long-term projects for maintaining large JS codebases.

The cost of JavaScript in 2019 · V8

Addy Osmani on the cost of JavaScript in 2019. An article (or video, if you prefer) for everyone who builds JavaScript applications.

Dealing with Ads in 2020

Unconventional to read about that topic from a developer point of view but that makes it so great as resources on it are so rare: Christian Schäfer wrote a blog post on how to deal with ads in 2020. This is about what still sucks about ads, but as more than enough sites rely on them we need a solid concept to integrate it with the least impact on users possible. A lesson on the <xmp> element, lazy loading via Intersection Observer API, creating Contextual Fragments, combined with the connection information from the browser results in ads on sites that most of us would maybe even love but at least not be annoyed of.

Making a Better Custom Select Element ◆ 24 ways

We all use Custom Select elements. But most of them are less than optimal when it comes to UX or accessibility. Julie Grundy shares her approach of making a better custom select element.

Beautiful Scrolling Experiences – Without Libraries ◆ 24 ways

Michelle Barker shares how we can easily animate and create beautiful scrolling experiences with a few lines of JavaScript combined with CSS Scroll Snap Points.

andreruffert/progressive-image-element: 🦍 custom element

This is <progressive-image>, a custom element that progressively enhances image placeholders once they are in the viewport, made by André Ruffert. It lazy loads, has a dave data option, produces no reflow, and has no dependencies.

Smaller HTML Payloads with Service Workers — Philip Walton

Philip Walton shares how we can serve way smaller HTML payloads in applications by using Service Workers for them.

5 Best Practices to Write Quality Arrow Functions

Arrow functions are handy but they’re also not very great when we need to debug them. But Dmitri Pavlutin shares how to write better arrow functions.

Animating DOM Changes - Samsung Internet Developers - Medium

Ada Rose Cannon shares how we can animate DOM changes in JavaScript.

Fluor.js - Sprinkle interactivity on your design

Fluor.js is a cool small library that lets us animate a lot of details on websites. Quite nice!

fymmot/inclusive-dates: A human-friendly datepicker. Supports natural language manual input through Chrono.js. Fully accessible with keyboard and screen reader. Contributions welcome!

inclusive-dates is a really well made human-friendly datepicker that’s also fully accessible.

Back/forward cache

Philip Walton shares how to build a back/forward (“bfcache” cache for nearly instant loading of pages when a user uses the browser history buttons. To be honest, I didn’t know this exists until I read the article and it’s super interesting. It’s basically a different cache layer that keeps a live capture of the page including the JavaScript heap in a separate cache. But due to this, it’s not always easy to handle, especially if you have events running on the page so this article contains the answers how to observe the bfcache and add handlers to it. In summary it’s a super powerful feature that’s incredibly useful for web apps but a normal website doesn’t need this layer of complexity.

Meet Face ID and Touch ID for the Web | WebKit

Nice, Apple now lets us integrate Face ID and Touch ID on the web, building it on top of the Web Authentication API. Imagine how this can improve the logging in experience for a good part of your user base.

Operator Lookup - Search JavaScript operators · Josh W Comeau

Wonder which operator to use in JavaScript for a comparison? Or seen a code snippet and felt weird because you didn’t know what operator this was? Josh W Comeau has built an operator lookup.

Adactio: Journal—Saving forms

Jeremy Keith created a simple gist to save form input via localStorage to avoid content being lost when something happens to the client browser or the server resets the connection due to security.

Maintaining JavaScript applications in the long term

Mathias Schäfer with a new article on maintaining javascript applications in the long term, describing the approach for an app built in 2014. Describing why they still use Backbone.js instead of their agency standard React, how they moved from CoffeeScript to TypeScript, handle documentation and maintain a test suite, Mathias concludes why abstractions may bite you in future.

The future of layout with CSS: Grid Layouts — Medium

Patrick Brosset introduces the new CSS Grid layout technique from the beginning with great examples.

How To Do Knockout Text | CSS-Tricks

Chris Coyier wrote up the different possibilities to do knockout text. And while for a long time, Photoshop was the only way to achieve this effect, we now can do it with SVG, and even with CSS to some degree.

Using Quantity Queries to write content-aware CSS

I’ve always loved to use quantity selectors in CSS. That’s probably the reason why I also love articles that share neat selector tricks for writing content-aware CSS.

StickyState

StickyState is a high performance module making native position: sticky stateful and polyfilling the missing sticky browser feature.

A Complete Guide to Grid | CSS-Tricks

So, one of the best resources to refer to when looking up some Flexbox property, is the “Complete Guide to Flexbox” on CSS-Tricks. Now the same concept has been transfered to CSS Grids, making the “Complete Guide to CSS Grid” the resource to remember for the future when this technology is ready to be widely used.

CSS containment | justmarkup

Have you ever heard about the CSS contain property? I didn't. Well, until I read the article by Michael Scharnagl, explaining that this little property will be soon helping us to solve a lot of use-cases for container queries. The property will allow authors to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree.

HOW TO: Pure CSS masonry layouts

Using multi column properties and Flexbox together lets you achieve a so called ‘Masonry’ layout with only CSS.

Stylelint | CSS-Tricks

Do you use scss-lint? It’s a nice tool to ensure Scss coding conventions. One drawback of it though always was that it’s Ruby-based and has not very much granular options. But stylelint, a Node.js based alternative to it is much more powerful, giving you full, fast linting capacity for your CSS, Scss or Less code. And with stylefmt you can even auto-format code based on your rules.

You might not need a CSS framework ★ Mozilla Hacks – the Web developer blog

A lot of developers think about this differently, but a lot of others use frameworks for every project, even if it’s not the best decision to make. Read on why you might not need a CSS framework, about drawbacks and alternatives to the framework approach that won’t sacrifice efficiency when developing a project.

Truly Fluid Typography With vh And vw Units – Smashing Magazine

Michael Riethmuller shares how you can achieve responsive typography in your layouts with vh/vw units and the calc() function.

CSS Will Change Module Level 1

The will-change property is still widely unknown and people don’t know exactly when and how to use it properly. Fortunately, the W3C took the effort to write up how to use will-change well.

Form Validation Techniques

Client-side form validation is hard, we all know that. But thanks to the browsers’ internal validation API, we can display very clever messages telling the user what went wrong. This article shows how to do that effectively and even offers a boilerplate.

Form Validation UX in HTML and CSS | CSS-Tricks

Often we don’t use the full potential of CSS for form validation UX. Chris Coyier shares some CSS trickery to get it right.

Adactio: Journal — Sticky headers

Sticky headers are a common technique to use these days. But there are a few catches that most developers ignore. Jeremy Keith managed to implement sticky headers the right way and explains how you can do, too.

Another use for the `ch` unit: year fields

Another use for the ch unit: year fields: no more guessing at widths. width: 4ch; theoretically allows for four numbers to be entered.

Sara Soueidan on Twitter: "I’ve gotten some constructive, highly appreciated a11y feedback from my blog readers about using vw for font sizes. Basically, don’t.

If you’re using vw or other viewport units for element sizing, always bear in mind that viewport-unit sized elements are not user-zoomable. You can try on your own with this demo. An alternative could be to use calc(1em + 0.25vw) or similar calculations that don’t entirely depend on viewport units and therefore are scalable.

How do create full width containers in limited width parents

Chris Coyier wrote up solutions to create full-width child containers oof a limited-width parent, including Sven Wolfermann’s simple and clever approach.

CSS only scroll indicator

For long articles, a scroll indicator can be very useful to indicate the reading progress. Most people use some sort of JavaScript code to do this (which is calculation-expensive); some people, however, find clever tricks to do it with CSS. The CSS-only scroll indicator by Mike Riethmuller is an awesome show-off of using gradients, viewport units and a pseudo-element.

Continue Normalising Your CSS – CSS Wizardry

In the past months I’ve heard a lot of people question the need for normalize.css. But the truth is that normalize.css wasn’t only created to fix browser bugs but also to provide us developers with solid baseline styles. As Harry Roberts now points out, the latest normalize.css with 984 bytes after gzip doesn’t even add much to your existing codebase — in fact, it makes less than 1.3% of the average CSS project.

CSS Reference - A free visual guide to the most popular CSS properties.

cssreference.io is a new place to play around with and learn about CSS properties. It explains what the properties do and shows in demos how they affect a layout.

CSS Shorthand Syntax Considered an Anti-Pattern – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

Harry Roberts shares why you shouldn’t write background: black; but be explicit with background-color: black;. The shorthand syntax often unsets other properties that we never intended to modify and, thus, can cause unwanted side-effects.

In the detail: close button – Remy Sharp

Remy Sharp explains how to properly build a close icon when using system fonts. x is just wrong, so use × instead.

CSS Tip: Use :not to Save Time and Lines of Code :: The Bold Report

Sometimes it’s the small things that help you a lot. Did you know that you can save time and avoid confusion in CSS by using the :not(:last-of-type) selectors, for example? Timothy B. Smith explains how this little trick works.

A Complete Guide to CSS Grid | Codrops CSS Reference

Since this week, we’re able to play around with CSS Grids in a lot more public browsers (Chrome, Firefox, Edge with the old spec). When you do, this quite complete guide to CSS grid might come in handy.

Linting HTML using CSS

Did you know you can use CSS to lint your HTML markup? Ire Aderinokun shared a couple of use cases and some very neat tricks—how to check for unlabelled form elements or inaccessible viewport attributes, for example.

Building performant expand

Paul Lewis and Stephen McGruer summarized how you can build performant ‘expand’ and ‘collapse’ animations, for menus, for example.

Breaking Out With CSS Grid Layout - Cloud Four

Tyler Sticka shares a technique that uses CSS Grid to break out of a fixed width container. This simplifies the markup and styling of layouts that mix full width and limited width containers.

Methods for Contrasting Text Against Backgrounds | CSS-Tricks

Ana Tudor explores the various ways to use new CSS techniques to contrast text against backgrounds.

Grid layout, grid layout everywhere!

To help us better understand how Grid differs from Flexbox, Stefan Baumgartner wrote a concise introduction to Grid layouts.

Box alignment: justify-content: space-evenly

The CSS Flexbox Module specification now has a new value justify-content: space-evenly. This new setting places even space between and to the outer of the elements—a feature we all wanted to have very much in Flexbox. It already works in Firefox, and Safari Tech Preview and Chrome Canary have the support as well.

CSS Grid PlayGround | Terminology | Mozilla

Mozilla built a CSS Grid playground that helps you understand and build CSS Grid layouts.

Tabbed Interfaces

Heydon Pickering adds a new reference article to the Inclusive Components blog that explains how we can build tabbed interfaces in an inclusive, accessible way.

CSS element() function - Vincent De Oliveira

Vincent De Oliveira shares about the amazing CSS element() function, currently only available in Firefox but that might change. And it’s not even a new function, but it allows us to use images from the HTML DOM in our CSS e.g. for a background-image.

CSS Paint API  |  Web  |  Google Developers

We already heard a couple of times about Houdini in browsers, a way to add our own CSS functionality via JavaScript. Now Surma shares how the CSS Paint API works which will be available first in Chrome 65. Effectively, this brings us a lot of possibilities only available in graphics or SVG to CSS.

Scooped Corners in 2018 | CSS-Tricks

Ana Tudor is known for her special CSS skills. Now she explores and describes how we can achieve scooped corners in CSS with some clever tricks.

A Guide To The State Of Print Stylesheets In 2018 — Smashing Magazine

Rachel Andrew wrote an article about building and providing print stylesheets in 2018 and why it matters a lot for users even if they don’t own a printer anymore. But we all still want to store invoices and other content as PDF files.

Responsive tables, revisited | Lea Verou

Rarely talked about since the last decade, CSS tables are still used on most websites to show (and that’s totally the correct way to do so) data in tables. But as they’re not responsive by default, we always struggled when making them responsive and most of us used JavaScript to make them work on mobile screens. Lea Verou now found two new ways to achieve responsive tables by using CSS: One is to use text-shadow to copy text to other rows, the other one uses element() to copy the entire <thead> to other rows—I still try to understand how Lea found these solutions but this is amazing!

Dark theme in a day – Marcin Wichary – Medium

Marcin Wichary explains how with modern CSS Custom Properties we can create a dark theme in little time and shows this by going through the theme creation step by step with visual results alongside.

Implementing a variable font with fallback web fonts – Zeichenschatz

Oliver Schöndorfer shows how we can serve a Variable Font to modern browsers while others get a fallback web font. This is especially interesting as Oliver goes deep into optimizing the fallback font and adjusting it via CSS in order to match the variable font as closely as possible in case a font swap happens during page load.

Can I email… Support tables for HTML and CSS in emails

Can I email is a great resource to find out which elements and CSS properties and values you can use in email clients…

Smoother & sharper shadows with layered box-shadows | Tobias Ahlin

Tobias Ahlin shares how we can create smoother and sharper shadows with layered box-shadows. A very good solution!

The Ultimate Guide to Dark Mode for Email Marketers – Litmus Software, Inc.

Litmus has tipps on how to code your emails to respect Dark Mode theme for your OS. As usual with email, support is very wild and inconsistent but this article explains what’s the best thing to do until the situation improves.

Create a Responsive CSS Motion Path? Sure We Can! | CSS-Tricks

Jhey Tompkins shows us how we can create a responsive CSS Motion Path.

CSS Values and Units Module Level 4

Sometimes the specification is the best documentation. Inside the CSS Values and Units Module Level 4 you can learn about the min(), max() but more importantly about the clamp() function in CSS that allows you to e.g. force the font-size to stay between 12px and 100px by stating: font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px); All we ever wanted for fonts, right?

Custom Styling Form Inputs With Modern CSS Features | CSS-Tricks

Oh, what if we could style form inputs nicely and with simple CSS? Aaron Iker shares how we can do it.

A First Look at `aspect-ratio` | CSS-Tricks

Chris Coyier shares how we can use the new shiny CSS property aspect-ratio in our layouts and with that finally replace various hacks we used to use for over a decade now.

A Lightweight Masonry Solution | CSS-Tricks

Ana Tudor shows the future of CSS masonry solutions with CSS Grid. But as support is very limited and yet to be implemented by many browsers, we need a fallback which Ana shows as well in the tutorial.

CSS { In Real Life } | Drop-Shadow: The Underrated CSS Filter

While we all use box-shadow a lot, the lesser known drop-shadow property is a really cool one: it creates a shadow around the element’s clippings instead of their box-model. Maybe you remember how to create triangles with just some borders. Using drop-shadow let’s us define a shadow on such elements.

Linearly Scale font-size with CSS clamp() Based on the Viewport | CSS-Tricks

Linearly scale font-size with CSS clamp() based on the viewport. The solution we looked for since a long time is now available in browsers.

A centered CSS navigation with fit-content | Stefan Judis Web Development

Stefan Judis shares a nice approach of centering a container with sub-elements like a navigation with the fit-content property in CSS. Unfortunately, this still needs vendor prefixes at the moment to work in major browsers.

A Deep Dive Into CSS Grid minmax()

Ahmad Shadeed explains the CSS Grid minmax() function with some really good examples. Most tutorials explaining this function are very generic and not practical so this was a nice read when I found it. In case you don’t fully understand the minmax syntax yet, give it a read.

CSS Grid full-bleed layout tutorial · Josh W Comeau

Josh W. Cameau has a CSS Grid full-bleed layout tutorial that’s pretty complete and includes lots of nice throwbacks into the history of the web.

CSS Text Effects - Five Minimal Examples | Let's Build UI

CSS Text effects are rarely useful but sometimes for big teaser headlines it’s what we need. And if we need them, it’s sometimes not so easy to create a nice and really good effect so this article showing five CSS Text effects is great and includes split colored text, video text, and image background text.

CSS Variables + calc() + rgb() = Enforcing High Contrast Colors | CSS-Tricks

Talking about colors in CSS, we have Josh Bader sharing how we can use CSS variables calc() and rgb() to enforce high contrast colors in our CSS design system.

Native CSS Masonry Layout In CSS Grid — Smashing Magazine

Rachel Andrew shares how we can build a Masonry layout fully in CSS with CSS Grid Level 3.

A Calendar in Three Lines of CSS – Calendar Tricks

Ever tried to build a visual calendar with CSS? You may end up with tables and styling a lot of things. What’s much simpler is now that we have CSS Grid using this cool technology to build a basic calendar in three lines of CSS.

Back to Basics: Creating a clickable card interface in plain HTML, CSS and JavaScript | Christian Heilmann

If you want to have a clickable card interface, things can easily get tricky due to the fact that we can’t nest links in HTML. Christian Heilmann shares a way how to do it the right way but always keep in mind that UX and accessibility may still be impacted by this design pattern which is why nested links aren’t a native thing in HTML.

Sticky CSS Grid Items | Melanie Richards

Melanie Richards writes how we can integrate sticky elements into CSS Grid layouts without many hacks or side-effects.

What’s your legacy?

Marcy Sutton asks “How will people remember you when you’re gone?”

Raising The Bar: How To Be A Less Biased Interviewer — Medium

As an interviewer, it can be hard to not be influenced by certain factors. This guide gives a few tips how to be a less biased interviewer. Another article shares how to hire more diverse people.

Remote-First vs. Remote-Friendly

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.

Dealing With Loud And Silent Burnout – Smashing Magazine

This week is Geek Mental Health Week, and Alexander Charchar reflects on how we can detect and deal with silent burnout. Take care of yourself, and be selfish with your workload.

Dann Petty on living an inspiring life – Crew blog

Dann Petty, designer and founder of the Epicurrence conference, gives us some life guidance on how to stay creative, productive and to reflect on what really matters in your life.

Communal Momentum and Accountability - Ian Feather

“Why can I hit deadlines imposed by others, but not those imposed by myself?” — Ian Feather raises this question and tries to find an answer and an approach on how to fix this human behavior.

Remarks at the SASE Panel On The Moral Economy of Tech

Maciej Cegłowski’s gave a talk on ‘On The Moral Economy of Tech’ that is full of ideas and thoughts to reflect upon. I’ll quote him here with his most important statement about how we see our jobs — something we should bear in mind:

“Hop on BART after the conference and take a look at Oakland, or take a stroll through downtown San Francisco and try to persuade yourself you’re in the heart of a boom that has lasted for forty years. You’ll see a residential theme park for tech workers, surrounded by areas of poverty and misery that have seen no benefit and ample harm from our presence. We pretend that by maximizing our convenience and productivity, we're hastening the day when we finally make life better for all those other people.”

Change Your Location. Change Your Life. — Taylor Pearson

“When you change your location, it’s a lot easier to wash away a lot of bad habits. That’s not to say if you move somewhere, you’ll become a different person, but you have a greater opportunity to make dramatic changes in your identity. […] This process, done over and over, makes you a more robust person. You not only become more adaptable, you gain increasing confidence and self-assurance that who you are is congruent with who you want to be.”—Taylor Pearson in “Change your location, change your life”.

Why can’t designers solve more meaningful problems? — Andy Budd

Andy Budd analyzes the problem of the always recurring question on “Why can’t designers solve more meaningful problems?”. An essay on how to find the right work for yourself, and why it’s sometimes challenging to acknowledge that their vision differs from the type of job they want to work in. Andy concludes that we need to create an alternative success narrative to what we have now.

Always Improve, Never Stop, Never Pause, Never Appreciate

“Always improve, never stop, never pause, never appreciate” is something that developers, company leaders, and managers can easily apply to their work. Mathias Meyer points out the importance of properly appreciating work that has been done.

What Happened When I Gave Up Multitasking For A Week | Fast Company

We have some evidence already that multitasking isn’t beneficial for productivity. Lydia Dishman now wrote up what changed when she moved to monotasking for a week. The reason why I found this article particularly interesting, is realizing how much multitasking we do during a normal day without taking note of it.

Recalibrate Your Productivity Sensors - Tom Bartel

Tom Bartel shares some great thoughts on re-calibrating your productivity sensors as a developer. Reframe your work, whether it’s managing people, talking to others, or actual coding work whenever you think you’re not productive. Most of the time it’s simply untrue.

Why should employers care about families? | Rose Marcario | LinkedIn

Rose Marcario, CEO of Patagonia, has published an essay on why it’s important that employers support families. It’s not just about saying this but about taking meaningful, real action to make employees feel comfortable, have a good life, and enjoy working for their employer.

Top developers can have a life outside coding

As developers, do we really need to code all day? Is it necessary to have side projects and participate in open-source? Belén Albeza doesn’t think so. He shares why having a life away from coding matters and why you can be a passionate developer nonetheless. It’s important to have a balance between your computer time and other life activities (to help gathering data on this matter, please fill out this survey please) , and that’s also the message we have to send across to new developers. You can do great coding in a normal workday.

Vision vs. Leverage | Clearleft

Tea Ivanova wrote about the common misunderstanding that agile work methods are seen as operational and tactical rather than strategic. A good read for anyone working with agile methods.

On Deep Breaks - Study Hacks - Cal Newport

Cal Newport shares his thoughts on how deep breaks during work can help your mind recharge and, thus, improve your productivity.

Giving Feedback Without Much Context — Tom Bartel

Tom Bartel shares tips for giving feedback without much context in development teams and how you can express concerns without making accusations.

The Paradox of Life Balance | Thought Expansion Network

Jonathan MacDonald’s article “The Paradox of Life Balance” targets a social problem we all face: While our connected devices offer great things, they also make us neglect real life and social communication. A great piece on why innovation is important and why it’s equally important to balance our activity and prioritize the non-digital reality.

Let Us Now Praise Ordinary People – Mike Monteiro – btconfBER2016 on Vimeo

Mike Monteiro gave an impactful talk at this year’s Beyond Tellerrand conference in Berlin. “Let Us Now Praise Ordinary People” opens our eyes to how we can change the world and why we need to get over-hyped startups that only claim to change something to actually do meaningful work. If I can make you watch one thing this week, take 45 minutes, sit back and listen to Mike Monteiro.

selfcare.tech - developer resources for self-care

selfcare.tech wants to help developers take better care of their health. It shows some great methods for solving common problems every one of us will face at some point.

totes profesh: it's ada lovelace day: wish you would step back from that ledge my friend

Garann Means quit the web industry about two years ago. Now she shares what that really meant to her, why she did it, and why it’s important that we think very carefully about it before we take this step for real. It’s easy to joke about leaving the industry, but the consequences are real and might differ a lot from what we expect.

You Are Not Paid to Write Code – Brave New Geek

“You Are Not Paid to Write Code.” Tyler Treat wrote about our job as developers and why we introduce the possibility of failure into a system every time we write code or introduce third-party services. Our job is to find solutions that (if possible) don’t require a new system and to keep out everything else from a codebase unless it’s really necessary.

From Deep Tallies to Deep Schedules: A Recent Change To My Deep Work Habits - Study Hacks - Cal Newport

Cal Newport wrote about the concept of Deep Work and why it’s probably more efficient if you schedule your deep work in advance rather than just logging it on-the-go.

Work ethic — Jason Fried

Working long hours doesn’t mean someone has a good “work ethic”. Instead, it just means working too much. Jason Fried on what “work ethic” really is about.

Forget About Setting Goals. Focus on This Instead. | James Clear

New year’s resolutions — you know it, they’re hard to reach. James Clear on why it’s easier to use recurring systems instead of setting goals.

No, I have no side code projects to show you | Ezekiel Buchheit | LinkedIn

Ezekiel Buchheit’s “No, I have no side code projects to show you” is a great read for everyone interviewing folks for a job position.

7 tricks to have very successful conference calls | Christian Heilmann

When you work remotely with a team, you will have conference calls from time to time. To make them successful and enjoyable for everyone, make sure to follow Chris Heilmann’s tricks for conference calls: Be on time and stick to the duration, have a meeting agenda and stick to it, avoid unnecessary sounds and more.

The Human In The Machine — A project about Productivity

Alex Duloz, the head behind The Pastry Box project, has now started a new project. “The Human In The Machine” will be a 365 articles in one year project, about how humans define and deal with ‘productivity’.

On Better Meetings | Lara Hogan

Lara Hogan on how to hold better meetings. A concise list of tips and tricks to make your meetings a lot more efficient and interesting.

Productivity has a Personality

With tons of productivity articles out there, it’s easy to feel overwhelmed or even bad about how you get work done. But each one of us is an individual, and, thus, productivity is not only a subjective matter but also has a personality.

Depend less on each other — Jason Fried

Jason Fried wrote about depending less on each other in a company to ensure that team members don’t slow each other down.

It's not how many hours of sleep you get…

Lots of celebrities from presidents to actors and many others recommend getting only six hours of sleep, so you have 18 hours of the day to get things done. But Sara Soueidan disagrees and shares her experiences, including dealing with burnout.

Slow the fuck down

Eric Karjaluoto shares why we need to slow down, and why taking pride in how busy we are is one of the worst ideas we ever had. What if the best thing you can do for your career—and life—is to press pause, set your number one priority, and then rethink your way of working?

Remote Managing A Side-Project Across The Globe | Colloq

How can you successfully manage a side project in a distributed team across the globe? I wrote up how we did it at Colloq, my newest project, and share details on working remote, virtual office calls, and how to fix common Scrum issues.

What Makes Work Meaningful

Cassie Marketos shares her concerns and discoveries about “What Makes Work Meaningful.” In search of the answer to the common question if what we do matters at all, this article reveals some thoughts that set our sense of urgency right again.

Quit measuring employee engagement – Signal v. Noise

“If you can’t measure it, you can’t manage it.” Claire Lew explains why she thinks it’s time to break with that statement when it comes to assessing emplyee performance. Instead of measuring meaningless numbers, it should be all about getting insights. “You want truth, not graphs.”

Tobias T– | … that's what…

“[…] that’s what Continuance is all about: the perseverance and commitment between where we are and where we want to be.” The quote from Continuance, the film (via Tobias Tom) reminds us that we should pursue our dream projects and not give up. Because dream projects shape us and our personalities.

What’s that mystery in your inbox costing you? – Signal v. Noise

Jason Fried elaborates on the mystery of your inbox. For most of us, the inbox is the center of everything, the place we work from every day. And yet, most inboxes, most notifications, lack the most important bits of information. A good read on what an insufficient inbox can cost you.

How I Tricked Myself Into Meditating – Time Dorks – Medium

Jake Knapp shares how he tricked himself into meditating. An honest article on why it’s hard to convince yourself to try it out and why it probably is still worth it.

On Quiet Developers – Seán Hanson – Medium

Seán Hanson shares a great insight post on why not all people are extroverts, share their stories, their findings or contribute to open source. But this doesn’t mean they’re not good or aren’t interested in their job, it just means they focus on other things than sharing.

'Our minds can be hijacked': the tech insiders who fear a smartphone dystopia | Technology | The Guardian

More and more people working at Google, Twitter, Facebook and other tech giants disconnect themselves from smartphones. By radically limiting the featureset to a normal wireless phone, they want to gain back control over their lives. Paul Lewis spoke to some people and researched why tech insiders who actually build the apps and operating systems for smartphones and other smart devices fear a smartphone dystopia. A good read on mental health issues.

200 universities just launched 560 free online courses. Here’s the full list.

200 universities just launched 560 free online courses. And here’s the full list.

Against Productivity – The Message – Medium

“There was a time when you could write a few poems, die of TB, and call it a life well lived”. Quinn Norton published a thought “Against Productivity” about the weird strive in all of us for more productivity in life.

To Grow Talent, Don’t Move Fast and Break Things — Move Slow and Build Them

Alida Miranda-Wolff broaches the issue of why “move fast and break things” is a bad idea when it comes to people because then the “thing” being broken is a person. The issue of working hours, happiness at work, growing talent and why it’s tempting to follow hurtful patterns for our lives at work.

“How to Scope Work,” an article by Dan Mall

Dan Mall tells us some insights on how he learned to scope work. This is a very useful skill whether you’re a freelancer or employee in order to make an estimation of costs and time and afterwards being able to match it so I can only recommend to read this article.

Finding the Exhaust Ports | Jon Gold’s blog

Jon Gold on finding the exhaust ports, on how technology influences us.

Why am I unhappy? A new study explains Americas unhappiness epidemic — Quartz

There’s an important study about America’s rising unhappiness in the population since around the year 2000. And it reveals that while income inequality might play a role, the more important part is that young people who use a lot of digital media are unhappier than those who only use it a little (up to an hour a day). Interestingly, people not using digital media at all are unhappy, too, so the outcome of this is likely that we should try to use digital media only in moderation. This might be impossible if you’re like me working in a field of digital media but we can apply this at least to our private life and I bet it makes a big difference.

On Retirement – Studio D – Medium

If there’s one thing we don’t talk much about in the web industry it’s definitely retirement. Jan Chipchase now wrote a lot of interesting thoughts all about retirement in his article I recommend to read this week.

My #1 Piece of Advice to Freelancers: Lean Into The Moment

Arestia Rosenberg shares why her number one advice for freelancers is to ‘lean into the moment’. It’s about doing work when you can and using your chance to do something else when you don’t feel you can work productively. In the end, the summary results in a happy life and more productivity. I’d personally extend this to all people who can do that but of course it’s best applicable to freelancers indeed.

Productivity - Sam Altman

Sam Altman shares a couple of very useful productivity tips that are not just a ‘ten things to do’ list but actually really helpful thoughts about how to think about being productive.

print("Hello, World!")

Johannes Seitz on project management at the start of projects where we pretty much know nothing about it. He calls the method “Iteration Zero” and it’s certainly an interesting concept to understand the scope, risks of a project better when you still don’t have enough experience from the project itself but need to build a roadmap and build it.

The Moral Implications of our Apps — Anton Sten — UX-Lead

Anton Sten on the moral implications for our apps. On Code of Conducts for designers, comparisons with established professions such as lawyers, journalists and medical doctors, and an explanation why the times of “move fast and break things” are definitely over as we’re dealing with Artificial Intelligence, Social Networks that affect peoples’ lives and with privacy matters enforced by GDPR.

Built to Last — Anselm Hannemann

Why the concept of patience and the strive to build something to last should gain more atttention in business. Some thoughts that came into my mind when reading another article and it seems many people like the idea behind this.

Real Work vs. Imaginary Work – Signal v. Noise

Ryan Singer shares the difficulty of planning a project with ‘imaginary work’ and why it’s so important to first test out how hard for example integrating a specific API will be before planning it on the roadmap.

DHH on "The Basecamp Way": Anti-Competition, Working Less, & More - Atrium

We’ve all heared a lot about how David Heinemeier Hansson from Basecamp thinks differently about work, employment and goals for his company. This interview summarizes the challenges they faced and some of the differences in thinking as a company founder quite well. They’re successful in building a business that’s totally different from all the Silicon Valley startups out there and while their articles find great attraction, not many founders go into a similar direction but rather follow the quick money.

Profitable, difficult, or important? | Seth's Blog

Seth Godin ponders about Apple’s and Amazon’s net ‘value’ of a trillion dollars and why the profit of a company doesn’t matter but the importance of their work. The Wall Street usually doesn’t honor the importance of work but it’s wrong to focus on the Wall Street if you want to bring change to the world. Something we can think about each day, and decide for so many details again and again. It’s up to us what to choose.

What about ’my’ responsibilities? — Anton Sten — UX-Lead

“The tech industry is growing at an exponential rate influencing society to the point that we are seeing the biggest shift, perhaps ever, in man-kind. Some tech services actually have billions of users. You read that right, not thousands, not millions, but BILLIONS of human beings using them regularly. It would be arrogant not to say that these services are forming our society and shaping our norms while their only objective was to keep the growth curve… growing.”—Anton Sten in ‘What about my responsibilities?’

Avoiding burnout: lessons learned from a 19th century philosopher

You’re working hard to finish that project in expectation that it’ll feel so good and relaxing when it’s live. Itamar Turner-Trauring shares why this is wrong thinking and how we can avoid burning out our motivation for work.

The Feeling That You’re Always Behind on Work : zen habits

Leo Babauta on why we feel that we’re always behind on work and some strategies to avoid these feelings and instead work happily. This is certainly something I should keep in mind and try to do as I’m constantly feeling behind, and thus, lowering my performance and my happiness.

Opinion | In Praise of Mediocrity - The New York Times

Leisure. Do you have a hobby? When was the last time you enjoyed it and had enough time for it? Tim Wu about the problem of how the pursuit of excellence has infiltrated and corrupted the world of leisure.

Why do we work so hard? | 1843

Ryan Avent about why we work so hard. This essay is well researched and explains a lot of why we see work as crucial, why we fall in love with our work and why our lifestyle and society embraces to work harder all the time.

A how-to guide to ethical business leadership

Shana Lynch tells us what makes someone an ethical business leader, which values are important, how to stand upright when things get tough and how to prepare for uncomfortable situations upfront.

“I Will be Happy When I…,”; Why We Are Unhappy! – Ozoemena Nonso – Medium

Ozoemena Nonso tries to explain why we often are not happy. But the biggest thief of our happiness is not comparison by itself, it is that we never always get the model of comparison right. It’s an incredibly good piece of life advice if you compare yourself with others often and your happinness suffers from it.

How Millennials Became The Burnout Generation

This is the article I used for the introduction of this WDRL edition which I found highly interesting and important to read: How Millennials Became The Burnout Generation gives insights into how people today think, how society and politics changed and what we can do to make livings better in future.

Regret vs Celebration – Shawn Blanc

We all try to combine so many things in life all the time, being successful and productive at work, at home, with our children, in our relatioship, doing sports, have good finances, and some hobbies. But we blindly ignore that it’s impossible to manage all that on the same level at the same time. We feel regret over not having gotten everything done during a certain timeframe such as at the end of a calendar year. Shawn Blanc says we should rather celebrate that because in reality we just found something better, more worth doing instead of the work task or cleaning up the house.

Opinion | In Search of Lost Screen Time - The New York Times

Paul Greenberg is in search of Lost Screen Time and explores what our lifes could look like and how much more time we’d have if we escape the screens in our life. And there are some revealing numbers in the article: The average American spends $14,000 per decade on smartphones. That’s $70,000 over the course of an average working life. A reference to a study that says that more than 29 percent of Americans would rather give up sex for three months than give up their smartphone for a single week. Or you could plant 150 trees and buy half an acre of land for the average spending for a smartphone (and its apps) per year.

In Praise of Extreme Moderation

We allo know people working 100% in their job and many also do crazy things in their free time in addition. In praise of extreme moderation shares a view of why this is not possible for everyone, why the culture of over-committing, of over-working, of over-delivering in all areas of life isn’t healthy and how we can shift towards a more moderate, calmer path.

The 3 most effective ways to build trust as a leader - Signal v. Noise

How do we build trust as leaders? Claire Lew on why business retreats and team building activities, thanking the team and transparency are only small fractions and don’t matter much compared to the real points like showing vulnerability as leader, communicating intent behind actions, and finally following through on commitments.

Productivity and Promises – Shawn Blanc

How do Productivity and Promises correlate? In times of constant demands, too much work to do, blurry information about priorities and different senses of urgency you can hardly blame people for breaking with their promises anymore. If we’re constantly getting expectations by other people like “please get back to me by 1pm today”, how can we stick to our original schedule for the day and be productive. Should we ignore such external demands and say “we had better things to do” than replying to the non-urgent but urgency creating email ‘in time’? It definitely takes some courage to do so but in the end this is what productivity is about: Sticking to a schedule and dedicating focus time to one single task.

The Case for Doing Nothing - The New York Times

Stop being so busy, and just do nothing. Trust us. This claim in the New York Times has its reasons; in a world of stress and an environment where we embrace working all day, we need to remember to stop. To take time for ourselves.

The Complete Guide to Deep Work (including a step-by-step checklist)

Many of us are hunting down how to achieve some minutes or hours a day of ‘deep work’. Fadeke Adegbuyi from Doist wrote The Complete Guide to Deep Work, sort of an online book, including a step-by-step checklist.

Jono Smart: Reshaped - Lagom

Sometimes slower is better than faster. When I wrote last week’s introduction to the reading list, I got a lot of feedback from people struggling with their job in the tech industry. This interview with Jono Smart who traded his good paid job in advertising for being a potter and see things in a slow pace shows how our minds suffer from constant over-performing and working too fast on virtual things. I don’t think we all need to switch careers, but we can at least choose our leisure time activities accordingly to calm down.

Doing well while doing good

Ben Werdmüller on doing well while doing good: This is a personal story about struggling with revenue, investments, third party capital, trying to earn money on your own by selling your product while having free competitors and how to still produce good things while doing financially well.

SHAPE UP

Shape Up — Stop Running in Circles and Ship Work that Matters is a new, free online book by Ryan Singer about project management, leading a company and product. It’s amazing and while I only had time to flick through it quickly and read some individual chapters and sections, this will definitely become a resource to save and refer to regularly.

How to onboard a new hire - Signal v. Noise

So you hired someone for your company. That already was hard work in most cases but what’s even harder is how to onboard people so they feel comfortable at their new job, but also can work effectively and without doubts in their first weeks. Claire Lew shares a great article about it: How to onboard a new hire.

📰 - smcllw.me

Sam Clulow’s Our Planet, Our Problem is a great piece of writing that reminds us of who we are and what’s important for us and how to live in a city and switch to a better, more thoughtful and natural life.

This is what aviation's busiest air-travel day looks like

You know, climate change is a topic all around the world now and it seems that many people are concerned about it and want to act on it. But then, last week we had the busiest air-travel day ever in history. Airplanes are accountable for one of the biggest part of climate active emissions, so it’s key to reduce air travel as much as possible from today on. Coincidentally, this was also the hottest week measured in Europe ever. We as individuals need to cut down flights finally, regardless how tempting the next holiday flight for $50 is to a nice holiday destination, regardless if it’s an important business meeting. What do we have video conferencing solutions for? Why do people claim to work remotely if they then fly around the world dozens of times in their life? There are so many nice destinations nearby, reachable by train or if needed by car.

Giving unactionable advice - Signal v. Noise

Actionable advice is what we usually look for when reading any article. However, it’s not always possible or the best option to write actionable advice and certainly not always a good idea to follow actionable advice blindly. That’s because actionable advice most of the times is also opinionated, tailored, customized advice that doesn’t necessarily fit your purpose. Input as in not actionable advice but sharing experiences fosters creativity so we can find our own solution, our own advice.

For a long time I believed that a strong team is made of stars — Vitaly Friedman

“For a long time I believed that a strong team is made of stars — extraordinary world-class individuals who can generate and execute ideas at a level no one else can. These days, I feel that a strong team is the one that feels more like a close family than a constellation of stars. A family where everybody has a sense of predictability, trust and respect for each other. A family which deeply embodies the values the company carries and reflects these values throughout their work. But also a family where everybody feels genuinely valued, happy and ignited to create.” said Vitaly Friedman in an update thought recently and I couldn’t agree more.

Living in surplus | Seth's Blog

In our culture, it’s easy to choose to live in deficit. If this habit of becoming ‘behind’ is the fuel you need to do your best work, it’s difficult for an outsider to argue against. But consider that it’s also possible to choose to live in surplus and it has quite a couple of benefits. When you live in surplus, you can choose to produce because of generosity and wonder, not because you’re drowning.

Nadia Eghbal | Being basic as a virtue

Nadia Eghbal on externalizing all our thoughts, information, and why it’s not only a good thing. Embracing the basic in our lives is a virtue we should focus on more and this article is great food to foster thoughts (oh, the irony here) for all of us.

Why We Never Have Enough Time & What to Do About It : zen habits

Everyone I know has this problem: there never seems to be enough time in the day for everything we need or want to do. The secret is to work and act with appreciation and focus and this article gives suggestions and hints how we can implement that into our daily work.

The Complete Guide to Mastery

The path to mastery is available to all of us. With enough effort and persistence, achieving greatness in a chosen field is within reach. We can capture genius and direct our focus and attention to a singular aim that brings both intrinsic and extrinsic rewards. Today it’s just an uncommon, almost forgotten path to go inside our fast-paced, throw-away society but that doesn’t make it less worthy to follow, quite the contrary.

Frank Chimero · The Burnout List

Frank Chimero with a list of things that foster burnout: Our achievement culture, hyperactive comparison, isolation, the lack of work ethics, unnecessary self-improvement thoughts, and a couple more. It’s the first step to identify these points and then take care that not too many in parallel are true for our lives.

Mozilla Wants Young People to Consider ‘Ethical Issues’ Before Taking Jobs in Tech - VICE

A new guide 'With Great Tech Comes Great Responsibility' arrives during a period of backlash on campuses, where tech companies like Amazon and Palantir recruit. It’s by Mozilla and it wants young people to consider ‘Ethical Issues’ before taking jobs in tech. It’s on healthy work places, healthy company and startup culture, working on real problems in the world and not causing any harm with our work we do.

Children increasingly unable to eat or having nightmares over climate change - LBC News

This news made me very unhappy. It’s one of the main reasons I chose to change my profession, to do something actively against climate change, to become a climate farmer: “One in five children have had nightmares about climate change while more than half do not think they are being listened to on the subject, a survey has found”. It’s upon us, parents, uncles/aunts, and friends of parents to fix this problem, so that these kids don’t need to suffer from bad dreams.

The Heartbreaking Effects of Being Only Partly Committed to Most Things : zen habits

Leo Babauta on the heartbreaking effects of being only partly committed to most things.

Wasting it | Seth's Blog

“When you bought your first smartphone, did you know you would spend more than 1,000 hours a year looking at it? […] If we wasted money the way we waste time, we’d all be bankrupt.” — Seth Godin

Essential Meaningful Productivity : zen habits

Why it’s important to connect productivity with our purpose to make it essential and meaningful productivity. Because what doesn’t serve the mission is burning ourselves out which happens if we just strive for more productivity when it doesn’t serve our own deepest mission.

On Passion

Noah Stokes’ “On Passion” sheds new light on the overused term “passion”. Follow your passion, but do it wisely, and don’t turn everything into your passion — it wouldn’t work.

Who benefits the most from Open Source Software? – Baldur Bjarnason

“Who Benefits the Most From Open-Source Software?” Baldur Bjarnason asks this often avoided question and gives some answers you might not want to hear. The sad truth is that developers’ efforts are too often abused by companies that do not give back.

BBC - Future - The dystopian lake filled by the world’s tech lust

It’s nice to always have the latest gadget and I’m often not different here. We all like this but what this means to our environment is quite awful. Maybe we should step back a bit and reconsider if we really need the newest gadget from Kickstarter (that we usually don’t use anyway). The article shows where the resources of our electronic devices are from and how the environment looks like over there.

Dear Tech Industry

“Dear Tech Industry,” starts this excellent article by Jenn Downs on why companies and people in the tech industry shouldn’t think they’re smarter just because they know more on technology. Instead, it’s important that we give back and contribute to local charities and culture.

Death to Analytics

If you’re not an enterprise depending on it, you should not care about analytics. They only give you extra stress, more pressure, and subtly shape what you write.

Kickstarter on public good over private riches: ‘Don’t sell out your values’ | Technology | The Guardian

Kickstarter’s Yancey Strickler speaks about the recent move of the company to become a public benefit corporation. He talks about venture capital, the poisonous urge to profit maximisation, idealism and how important it is for a company and people to not out-sell its values.

The lost art of getting lost - BBC News

These days, having GPS devices, smartphones, geo trackers, interactive maps and guides, we can’t get lost anymore. While for many of us this is a thing of joy, Stephen Smith asks if we may be missing out. When I read that article, I immediately remembered about Vitaly Friedman sharing a similar experience just a few days earlier. It’s interesting to see that we as human beings try to get some uncertainty back to our lives that are so predictable nowadays due to intelligent technology.

Clearing your desk, clearing your mind

When Mike Ellis left his job at Waterstone's Online, his boss told him that it’s okay and that “Leaving a job lets you literally and metaphorically clear your desk, an absolutely vital part of moving through your working life.”. Still today, this sentence was left in Mike’s mind and he remembers of it periodically. Just removing stuff, ruthlessly, with no remorse, no looking back, no what-if's can sometimes be the best way to clear one's life and mind.

How to Want Very Little : zen habits

There’s a part of today’s consumerist world that drives us to want more, buy more, act on our impulses, hoard, spend to solve our problems, create comfort through shopping, seek thrills through travel, do more, be more. What would happen if we broke from our addiction to wanting and buying more? Now, I’m not saying we can free ourselves of all desire but we should try a little harder.

26 charts and maps that show the world is getting much, much better - Vox

These times we’re used to bad news. In fact, that’s the reason I gave up reading newspapers and general social media streams. But it’s not that things are getting so much worse, the problem is no one looks at the bigger numbers. Actually, the world is getting a better place — it just happens much slower than we’re used to in times of real-time media. We should acknowledge the good news more again this year. And to back this up, I recommend you to watch this short video.

From the gutter: How your litter ends up in the ocean - LA Times

I have written about plastic trash in our oceans over and over again here. I don’t know about you but I, even though informed about the issue, could not imagine how my trash ends up polluting the oceans even though I don’t live anywhere by the sea. The LA Times now shares an example of how this happens.

A Roadmap to Overcoming Insecurities

There isn’t a person amongst us who doesn’t have insecurities—some are just better at dealing with them, or perhaps hiding them. But if you make yourself aware of the obstacles, you can get onto the road to overcoming the feeling of insecurity.

Project Include

True diversity is inclusive, comprehensive, and measurable. Project Include is an open community working toward providing meaningful diversity and inclusion solutions for tech companies. The initiative wants to provide collected perspectives, recommendations, materials, and tools to help CEOs and their teams build meaningful inclusion.

We've forgotten how to take blame for our actions - Independent.ie

“Everything from fatness to school marks and career advancement must always be someone else’s fault. In fact, the concept of an accident is disappearing from our collective consciousness. If you fall over on a street made slippery by dead leaves, then someone should have swept them away. If you fall off a cliff, someone should have warned you by putting up a notice warning that it is too far to jump.” We’ve forgotten how to take blame for our own actions.

If You Want to be Understood - Listen - Tom Bartel

“If you want to be understood—listen.” Tom Bartel shares why it’s so important to listen to other people in order to be understood.

Panama Papers: John Doe's Manifesto

John Doe is the “name” of the source for the Panama Papers that reveal deceptive tax saving strategies. The source now shared the reasons for leaking the data: wide-spread income inequality which is supported by massive and pervasive corruption. This is a primer on ethics, corruption and being a whistleblower. There’s also an organization working for more transparency and against corruption since years now and you can support them.

Tech Companies Design Your Life, Here’s Why You Should Care | Tristan Harris

There’s evidence that new types of media consumption shape our society, yet we don’t see how it happens, because we tend to forget thinking about it. Currently, if at any moment reality gets dull or boring, our phones offer something more enjoyable, more productive, and even more educational than whatever reality gives us. But it also changes us on the inside. We grow less and less patient for reality as it is, especially when it’s boring or uncomfortable. What’s at stake is our Agency. Our ability to live the lives we want to live, choose the way we want to choose, and relate to others the way we want to relate to them – through technology. This is a design problem, not just a personal responsibility problem.

The self-fulfilling prophesy - SCHIRN MAG

“There are many reasons why we give away our iden­ti­ties so easily. As far as searching is concerned, we are not used to see ourselves as clus­ters of missing infor­ma­tion. And so we struggle to realise that we may easily be defined nega­tively, by all our wants. […] Our digital tech­nolo­gies are designed to make us feel relaxed about our lack of privacy.”—Luciano Floridi in his essay about “ME: The Limit­less Self”.

.generation on Vimeo

.generation is a short fictitious film about the Millenials generation in 2054 sharing their loss of all digital records and how they deal with losing their memories. It’s fictitious, but it reminded me to print some of my photos as a physical good from time to time.

A Mindful Shift of Focus : zen habits

“I don’t have the answers, and my heart goes out to all who are grieving, afraid, hurt, feeling helpless, fed up, frustrated or angry. My only hope is that in the middle of all this sorrow, we can appreciate the gift of life that we’ve been given, and find love for our fellow human beings despite all their flaws and messiness.”—Leo Babauta in A Mindful Shift of Focus

What Is a Constant Cycle of Violent News Doing to Us? - The New York Times

Katie Rogers asked experts what happens to our human brain when there’s a constant cycle of violent news. While it of course depends on the individual person, a higher frequency of such news increases fear and the sense of vulnerability and powerlessness. And I’m not saying you shouldn’t follow the news anymore but maybe limiting access to it for yourself is a good idea, as is filtering it on social media (use mute keywords or similar) so you don’t get flooded about violent, horrible news all the time. It’s enough to check it once per day or so and it’s unhealthy if you’re surrounded by anxiety everywhere, all the time.

How technology disrupted the truth | Katharine Viner | Media | The Guardian

Katharine Viner writes about how social media swallowed the news and how the consequences of this go far beyond journalism. An interesting essay on how well-done social marketing has an enormous influence on the decisions people make—no matter if it’s about buying a product or making a political decision.

This Is Your Life, Brought to You by Private Equity - The New York Times

Since the financial crisis, the private equity industry has become hugely influential. The New York Times curated a lovely, interactive story about how private equity plays out in your daily life.

The Moral Character of Cryptographic Work and Scientists

Phillip Rogaway shares a paper on “The Moral Character of Cryptographic Work” (PDF). An interesting read on the shift of power and why cryptography is often a political tool that demands high morals and ethical fundamentals of those who build it. Anyone who ever discussed the topic of morals and ethics in science should read this.

The code I’m still ashamed of — Bill Sourour

Bill Sourour’s article “The Code I’m Still Ashamed Of” points out an important aspect of our jobs as developers: responsibility. An incredibly important story.

How to ask good questions - Julia Evans

Julia Evans on how to ask good questions. Some great considerations we should follow before asking questions to make communication more effective and generally better.

NINETEEN EIGHTY-FOUR (1984) by George Orwell: PDF

If you haven’t read “Nineteen Eighty-Four (1984)” by George Orwell yet, here’s your chance: The entire book is available for free as PDF, eBook and Audio versions. I personally recommend it to everyone who is only slightly interested in just one of these topics: social change, politics, technology.

SustainableUX Conference 2017 - YouTube

The free Sustainable UX conference took place two weeks ago. To get some insights into how we can achieve sustainability in tech, you can now watch the conference talks for free

Shell took a good long look at climate change. And then went back to looking for oil

Jelmer Mommers recently stumbled across a video from the oil company Shell that shows that they were aware of the dangers that global warming brings along already more than 25 years ago. Unfortunately, they decided to focus on short-term solutions nevertheless, for financial reasons. This great article shows how money can make us ignore important facts. I really believe that you and me, we can do better than Shell.

Ethics can’t be a side hustle — Mike Monteiro

It’s interesting to see that a growing number of people now seem to ask themselves how to do good work, and I think it’s because we realize that current developments are so bad that we as individuals think about what we can do to improve our society again. Mike Monteiro is one of those people who care deeply about ethics, now he explains why ethics can’t be a side hustle and why you can’t shuffle yourself out of responsibility if you’re doing a non-ethical job as your main work. It’s true that you have to start somewhere, and doing simple things in your daily life can already help to improve our society, but, in the end, if you’re getting paid for non-ethical work, you’re actively helping and promoting this work. And nothing can make this undone.

Silicon Valley Would Rather Cure Death Than Make Life Worth Living | WIRED

Emily Dreyfuss from WIRED wrote an article about why Silicon Valley contributes to inequality by focusing on cool technological innovation instead of targeting real-world problems. The piece is titled “Silicon Valley Would Rather Cure Death Than Make Life Worth Living”—a provocative but probably accurate title. And while there sure are exceptions (as there are always exceptions), we should remember to not blindly glorify tech, especially if it doesn’t engage with real problems.

“Slower structural developments that shape society”: A Q

Ken Doctor wrote about “slower structural developments that shape society,” charting out what’s in between the extremes that we see in the news.

Sleep Country — Real Life

Linda Besner wrote about living in a globalized yet fragmented world, where sleep is one of the few bodily experiences we seem to share. A thoughtful piece about what the Internet achieved and where it struggles to connect people.

Systems Smart Enough To Know When They're Not Smart Enough | Big Medium

Josh Clark on why the smart algorithm systems that power Google, Siri, Alexa and other “intelligent” AI services should know when they’re not smart enough and indicate that to users.

Build a Better Monster: Morality, Machine Learning, and Mass Surveillance

Maciej Ceglowski published a transcript of his new talk “Build a Better Monster” in which he describes how the Internet’s economic basis is built upon surveillance. He shows who makes money with user data, how this influences people and politics, and why it’s so hard (but also so important) to face and change this practice of making money of other people.

Honesty is the Best Policy – Signal v. Noise

Nathan Kontny shares a nice story on why honesty is the best policy you can establish, both as an individual and as a company.

The Grip of Now

Ben Callahan’s essay on ‘Good things come to those who wait’ is a truly mindful writing that asks what we are preparing for in our work and a question to the ephemerality of things we build.

Is Social Media The New Tobacco? – NewCo Shift

John Battelle about our addiction to social media which he compares to tobacco. But this is not how we want to raise our children.

Stop Spending So Much Time In Your Head - Darius Foroux - Pocket

Darius Foroux on why you should spend less time in your head and exercise pragmatism. On mastering your mind and realizing that most of our thoughts cannot make it into practice.

Why Meaning Is A Competitive Advantage | The Story of Telling

Bernadette Jiwa on why meaning is a competitive advantage in which she tells us the story of an older generation to show how fortunate we are that we can pursue our passion in our work, and why we’re still often not able to appreciate this fact.

To Understand Rising Inequality, Consider the Janitors at Two Top Companies, Then and Now - The New York Times

Neil Irwin analyzed the janitors’ job conditions at two top companies, back in in the 80s and now—namely Kodak and Apple. The article tries to help you understand the rising inequality and how our system and company-culture helps growing the inequality. A sad story of how so called “successful” companies achieve their success, taken at one (probably even better) example.

The Intimidating Zero

Jason Fried’s “The Intimidating Zero” is an important reminder to all of you that numbers don’t matter if you have an idea for something to publish. Follow your ideas and don’t let your thoughts be dictated by statistics.

Where are the programmers who give a shit? – Hacker Noon

Jeremy Nagel scrutinizes the lack of initiative by programmers to solve real problems. He says that “right now, entrepreneurs are trying to fix things that aren’t broken” while at the same time so many things are that could be fixed with technology—health care, education, food waste, climate change, and much more.

Entropy: Why Life Always Seems to Get More Complicated

James Clear explains why life always seems to get more complicated and what we can do to not feel overwhelmed by this feeling.

100 Must-Read Books Of 2017. – Do Lectures – Medium

The people from the great Do Lectures series have shared 100 books of 2017 they recommend us to read. And while I won’t be able to read all the hundred books, there are some great tips in the list which qualify as a nice end-of-year read.

Ten years in, nobody has come up with a use for blockchain

In Kai Stinchcombe’s thought-provoking “Ten years in, nobody has come up with a use for blockchain” he analyzes the blockchain technology, its initial goals, what it achieved so far and why most of the available services and currencies based on the blockchain are purely made for profit of single persons or private companies.

You have to make sure that you’re focused on the thing that matters. — Anton Sten — Freelance UX-Lead

Anton Sten reminds us about wise words from Apple CEO Tim Cook: “You have to make sure that you’re focused on the thing that matters.” We can not only apply that as bussiness advice but also for our own life: Focus on things that really matter and embrace them.

Your smartphone is making you stupid, antisocial and unhealthy. So why can’t you put it down? - The Globe and Mail

A decade ago, smart devices promised to change the way we think and interact, and they have – but not by making us smarter. Eric Andrew-Gee explores the growing body of scientific evidence that digital distraction is damaging our minds.

Energy Hogs: Can World's Huge Data Centers Be Made More Efficient? - Yale E360

Fred Pearce wrote about how we can make the world’s largest data centers more efficient. If you wonder why this would be a desired goal, it’s important to know that these data centers by now are responsible for 3% of the overall global CO2 emissions—as much as the airline industry.

A World Built On Promises | The Story of Telling

Our world is actually built on promises and here’s why it’s so important to stick to your promises even if it’s hard sometimes.

Smartphones Are Killing The Planet Faster Than Anyone Expected

Researchers are sounding the alarm after an analysis showed that buying a new smartphone consumes as much energy as using an existing phone for an entire decade. Guess I’ll not replace my iPhone7 anytime soon. Also, it’s still an absolutely great device and way enough for what I do with it.

Kumiho. — Ethan Marcotte

Ethan Marcotte elaborates on the ethical issues with Google Duplex that is designed to imitate human voice so well that humans can’t know anymore if it’s a machine or a human being. While technically this sounds quite interesting, this will push the debate about fake news much further and cause more struggle to differentiate between something a human said or a machine imitated.

These Indian fishermen take plastic out of the sea and use it to build roads | World Economic Forum

India has a big plastic waste problem and until recently the fishing industry had a big problem. But since a couple of months, a couple of fishermen don’t ignore the plastic problem anymore but instead collect all the waste in their nets, bring it back to the shore where it’s used to build roads now. A great idea of making use of trash efficiently.

React and jQuery give people lung cancer – Jeremy Nagel – Medium

Jeremy Nagel lets us all think about the impact we do when we publish open source code: As developers we tend to think that this is an amazing move but then we make our source code available to bad players in the world as well — to coal miners, to pollution-contributing companies, to those who use humans to get rich while mistreating them, to those who rip you off indirectly, to people who make money and don’t give you anything back by using your free, open source code. It’s not that you can’t do anything about it but to do so, you have to be aware of these issues and apply a better license or add a dedicated statement to your code. Want an example? Philip Morris International’s website uses jQuery and Bootstrap, a company that contributes to people getting cancer. Do you want to be attributed this way with your software?

Major Open Source Project Revokes Access to Companies That Work with ICE - Motherboard

An interesting discussion was raised this week by a very well-known Open Source contributor who tried to change the license of one of their projects in order to prevent companies who support the U.S. ICE institution from using their software. The change was quickly reverted after it was revealed that the change wasn’t legally valid / enforcable. However, the whole topic that comes up way more often lately shows that more and more people think about the impact of their work. They don’t want it to be used for bad, but for good. And while the idea of open, non-restricted source is desirable it’s only if people use it to support human rights and for improving lives. I’m curious about new solutions to ensure this, maybe we’ll see more terms of service for open source projects soon (which would then be legally binding but may prevent free open source projects from using the project).

Technology can help us save the planet. But more than anything, we must learn to value nature | World Economic Forum

Marco Lambertini on how technology helps saving the planet but we still need to learn to value nature and its resources.

This Is How We Radicalized The World

Ryan Broderick reflects on what we did by inventing the internet. He concludes that all that radicalism in the world, that weird political views are all due to the invention of social media, chat software and the (not so sub-)culture of promoting and embracing all the bad things happening in our society. Remember about 4chan, reddit and similar services but also Facebook et al? They contribute and embrace not only good ideas but often stupid or even harmful ones. This is how we radicalized the world is a sad story to read but well written and with a lot of good thoughts about how we shape society with technology in it.

Design Ethics & the Truth About Who Designers Really Work For

Design Ethics & the Truth About Who Designers Really Work For is a masterpiece on responsibility as human being.

Greta Thunberg | Special Address, Annual Meeting of the World Economic Forum 2019 - YouTube

Watch this talk of Greta Thunberg, a sixteen year old woman who tells all the well-known, famous people out there that she doesn’t care about money and why we need to view climate change from a perspective like hers—her life is in danger and no money will be able to save it. This is great, we need more people like her who aren’t led by corporate or financial rules.

“It must be free” — Anselm Hannemann

“It must be free”—On services we obviously don’t need but still wanna have. My essay about the importance of seeing value in the things we really need and why it’s so easy to want more things but less is really more.

The Zen Habits Guide to Spending Your Time Intentionally : zen habits

Leo Babauta on the issue of thinking we have too less time in each day. Thoughts on spending our time intentionally and set the right expectations is very important for our hectic lives.

The Simple Joy of “No Phones Allowed”

What does a public event like a concert feel like if there are no phones allowed? David Cain experienced it at a Jack White concert and is sharing the emotions, the different atmosphere and why it’s important to think about how we experience our life with a smartphone and how without it.

Handover the best possible — Anselm Hannemann

Let’s handover the best possible. The best environment for the next generation. The best work for the employees that take over work from you. Keep it at heart for every aspect of life and you’ll see that it makes a difference. To other people and to you. It feels good to do good.

The Habit of Calm When You’re Feeling Frustrated : zen habits

When we feel overloaded, we tend to lash out at someone in frustration and anger. This comes from the hope that things will be calm, orderly, simple, solid, and under control. The world doesn’t comply with this hope, however, as it is chaotic, disorder, constantly changing, never fixed, groundless. So we get frustrated, angry at others, and feel anxiety. But we can create a habit of calm when feeling frustraded, and here’s how.

Visual Business Intelligence – Ethical Data Sensemaking

The ethical practices that can serve as a code of conduct for data sensemaking professionals are built upon a single fundamental principle. It is the same principle that medical doctors swear as an oath before becoming licensed: Do no harm. Here’s Ethical Data Sensemaking.

In its insatiable pursuit of power, Silicon Valley is fuelling the climate crisis | Rebecca Solnit | Opinion | The Guardian

Big tech isn’t interested in a better world, just a more profitable one. To beat it, we need to break its stranglehold on us. A very insightful piece of writing around how companies fuel and influence politics and our entire economy and world, not always to the better.

Sacha Baron Cohen: Facebook would have let Hitler buy ads for 'final solution' | Film | The Guardian

On ethics in our society by the one who played Ali G, Borat and Admiral General Aladeen. Sacha Baron Cohen with an important message on the social media giants, namely here Facebook: Facebook would have let Hitler buy ads for 'final solution'. And it’s not deniable but instead, totally reconstructable for each of us and we’ve seen the principle happening in the past years during elections.

Climate change impacts in Europe

How does climate change impact Europe? Because common news mostly include other areas in the world, we know little about it. But this great interactive maps model shows the change of weather in a simple way. Heavy rains, forest fires, agricultural issues, draughts will all become more serious and more frequent, it seems.

A small dot in evolution — Anselm Hannemann

If we frame our own life a little bit different, in evolutionary context, everything we do, everything we see as given or as inherited by our parents can be seen a bit different. We’re then only a small dot in evolution and yet, we are the only ones who can still decide whether the human species will continue to be part of evolution on our planet or not. Evolution is a quite simple concept.

grassroots climate plan

We are facing one of the biggest decisions of humankind — a decision on how to face the climate crisis. This is a huge responsibility and at the same time an opportunity. Our chance to work together to initiate a comprehensive change towards a more just society. Here’s the Grassroots Climate Plan with a solid plan what we need and can do to change the current state of burning down our own habitat.

How Sustainable is a Solar Powered Website? - LOW-TECH MAGAZINE

You remember I posted a link to a website that’s entirely powered by Solar? Here’s the follow-up that shares how sustainable the project is. Well, crazy how unsustainable technology most of the time is, right?

The Corporations Behind Climate Change

Who is responsible for climate change? The complexity of the problem makes a simple answer elusive. And yet, responsibility matters—not just for assigning blame, but for finding strategic levers for future change. Here’s insight, here’s evidence, here’s a good article to help us understand our biggest problem of humanity yet a bit better. And remember that most plastic is made out of oil.