Tuesday, January 30, 2018

Smashing Newsletter #198: Laws of UX, Linting, 3rd-Party Content

The past years have been remarkable for accessibility and performance. However, there's something that seems to be dismissed for the sake of business goals.
Smashing Membership

Dear Friend,

The past years have been remarkable for web technologies. Accessibility and performance have finally become established, well-recognized pillars of user experience. However, there's still something that seems to be too often forgotten or ignored or even dismissed for the sake of business goals. It's respect.

We've all faced a flashy pop-up over here, an annoying notification nagger over there, a third-party email blast every other month. There are so many shady practices and dirty little tricks that scream to keep customers' attention or drive them to decisions that they don't want to make. Even though we're good at protecting ourselves against some of them with content blockers (rightfully so!), there still isn't much one can do beyond that.

While I sincerely appreciate the efforts that go into performance and accessibility work, I'd love to see a stronger push towards respect in 2018 — towards privacy, security, inclusivity, authenticity, personality and ethics. They might not sound particularly enticing at first, but I strongly believe that they produce something that people can connect to — and hopefully will.

Arrrr! Let's keep those nasty dark patterns out of the way!
Arrrr! Let's keep those nasty dark patterns out of the way!

It's not OK when a service manipulates its customers, abusing their psychology, so that they would please-oh-please waste more time with it. It's not OK when it's painfully difficult to delete an account. It's not OK when a service abuses privacy and customer's data and happily sends them over to third-parties.

So, here's a start-up idea: If you want to "disrupt" anything, make sure to bring the focus to privacy, inclusivity and ethics of your product. Design your principles, stick to them and make them noticeable. Don't try to outperform with features. Outperform by being authentic in your small niche, and have values that people can genuinely connect to. Think about offboarding and the data you collect. Think about third-party scripts, and contain them.

And share. Share what you've learned. Share case studies on how this focus has helped your company get better. I would love to see more websites demonstrate the impact of ethics and privacy on user experience metrics and business metrics (like WPO Stats does). It's about time to take a strong stand against all the shady and dark practices that have found their way into our interfaces over the years — at least that's the mission I'm strongly committed to.

Stay on the bright side of things!
— Vitaly (@smashingmag)


Table of Contents

1. The Laws Of UX
2. Improve Your Webpack Build Performance
3. Get To Grips With The Tough Parts Of JavaScript
4. An Open-Source, Community-Driven Linting Tool
5. Source Code Made Beautiful
6. Tips For Dealing With Third-Party Scripts
7. No, You Go
8. Public Workshops with Vitaly Friedman
9. New On Smashing Job Board
10. Our Most Popular Articles This Month
11. Most Recent Articles On Smashing

1. The Laws Of UX

Fitt's Law, Miller's Law, the Serial Position Effect. Do you know what's lies behind those names? If not, Laws Of UX will shed more light on their meaning. This lovely website explains the ten key maxims that designers can consider when building user interfaces.(cm)

Laws Of UX


SmashingConf San Francisco (Apr 17-18)

"Coming to Smashing Conferences fundamentally changed how I develop websites." — Ryan Chittenden

With our third SmashingConf San Francisco taking place on April 17 & 18, we want to explore strategies for making outstanding and fast experiences, and what we all need to know today, to be more productive and make smarter decisions tomorrow.

SmashingConf SF 2018

One track, two conference days, 14 brilliant speakers, and just 500 available seats. Make your experience even more memorable by attending one of our workshops.

Friendly reminder: Only 1 day left to save up to $200 on the regular price, so get your early-bird ticket → while you can! 😎


2. Improve Your Webpack Build Performance

Webpack is a fantastic, versatile tool, but it can be difficult to optimize. If you want to tackle the challenge of giving your Webpack setup a power boost, Rowan Oulton has prepared just the right read for you: A "Field Guide For Better Build Performance" that shares what the Slack engineering team learned on their optimization endeavour.

Keep Webpack Fast

The efforts were worth it: The techniques helped reduce the median build from 170 to 17 seconds and, thus, improved the experience for the team's engineers by far. (cm)


Our sponsor:

Test & Preview Your Websites Without Servers

Buddy gets you a working website for every branch in your Git repository without the pains of managing your own dev hosting infrastructure. This means you no longer need servers for client previews, QA tests or feedback sessions. Just push the code and launch your application with a single click. Node.js, Angular, PHP, Ruby, Python – whatever it is, it just works.

Ad

Builds, tests, deployments, custom scripts, website monitoring — a typical delivery process may include a lot of time-consuming steps. Buddy's here to make things more efficient: Powered by Docker, it lets you define and automate your deployment process literally in a couple of minutes, so you have more time left to care for things that really matter in your project.

Sounds good? Get up and running with their free account and give Buddy's mighty powers a try. No strings attached.


3. Get To Grips With The Tough Parts Of JavaScript

You think you know JavaScript? Kyle Simpson claims you don't. Or, well, that's at least the title of his book series "You Don't Know JavaScript", and the reason why he offers the books about the core mechanisms of the language for free online reading.

You Don't Know JavaScript

The series consists of six books which are still in draft mode but which will be edited, produced and published with the support of O'Reilly. (cm)


4. An Open-Source, Community-Driven Linting Tool

Narwhals have one of the best sonars in the animal kingdom, and now they are also name givers for a new linting tool that wants to help you build better websites: Sonarwhal. Just like its animal brother, the tool is a master when it comes to detecting things that easily stay unseen: accessibility burdens, interoperability, performance or security pitfalls.

Sonarwhal

To lint your code for best practices and common errors, Sonarwhal relies on existing tools and services instead of trying to reinvent the wheel. aXe is built in for accessibility, for example, SSL Server Test to check certificate configuration. To get the most out of the whale's mighty powers, you can adapt the linter to your needs and customize which aspects you want to get feedback on. (cm)


Our sponsor:

Audit Your Site Using Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

The Lighthouse logo, showing a lighthouse in the middle of the night

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Find more details on Google's Developer site.


5. Source Code Made Beautiful

Let's say you've coded an impressive workaround or another piece of code you're proud of and want to share it on Twitter or in a blog post. You might want to use an image with it, but feel that a screenshot of your code editor window isn't, well, aesthetically pleasing enough? That's exactly what the folks at design and development studio Dawn Labs had in mind when they created Carbon.

Carbon

Carbon provides a way to create beautiful images of your source code. Just drop a file into the browser-based editor, paste your code directly, or append a GitHub gist to the URL, and Carbon turns your source code into an image that looks a lot sleeker than a simple screenshot. To customize the image, you can change the syntax theme, background color, window theme and even padding. No more ugly screenshots to back up a brilliant code snippet. (cm)


6. Tips For Dealing With Third-Party Scripts

"There's nothing quite so crushing as building a beautifully performant website only to have it infested with a plague of third-party scripts that add to the weight of each page and reduce the responsiveness, making a mockery of your well-considered performance budget." The statement comes from Jeremy Keith. But what can you do to keep invisible performance costs low?

Itemizing Third-Party Scripts

Trent Walton also has a precious tip to share on dealing with third-party scripts. To see all the third-party requests included with a webpage, we have several options, but if we want to itemize that information and make it portable, the process, unfortunately, isn't as straightforward. The solution: From inside your browser's inspector, save the requests in a HAR file, and open it with a tool that can parse JSON. Now you have all requests in one place, ready to be examined further. (cm)


Our friends:

Design, Code, Create, Think Differently

You care about your craft and want to know what your peers are creating? Since 2006, the design and code conference Reasons to gathers the best minds in art, design and code to deliver awe-inspiring talks.

Reasons London

And, well, the next opportunity to re-charge your creative batteries is right ahead: Reasons is heading back to London on Friday, March 9th. Be sure to mark your calendars, because the line-up is more than promising. Tickets are now on sale.


7. No, You Go

A CEO, an engineer, and an author walk into a bar. Sounds good? Well, replace the bar with a couch, add some wine, and you've got the basis for a brand-new podcast which is definitely worth tuning into: "No, You Go".

No, You Go

Every week, Katel LeDû (CEO of A Book Apart), front-end developer Jenn Lukas, and author and content specialist Sara Wachter-Boettcher invite a guest to talk about being ambitious, building a career and navigating life's uncertainties.(cm)


8. Public Workshops with Vitaly Friedman

Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the costs — we'll find a fair price for sure. Get in touch — it's that easy!


9. New On Smashing Job Board

Here are some of the most recent job openings on Smashing Jobs:

  • Frontend Developer at Berlin Phil Media GmbH (Berlin, Germany)
    "As a Frontend Developer you join our growing product team of creative Developers, Product and UX/UI Designers. You work on the Digital Concert Hall user interface and build new tools for the service, beginning with a focus on the currently running rewrite for the majority of our web applications. "
  • Sr. Interactive Designer at Constructive (NYC)
    "Constructive, a leading social impact design firm is searching for an experienced Senior Interactive Designer to join our team of strategic and creative thinkers to design dynamic digital experiences that help make the world a better place."
  • Lead UX Designer at Shelter (London, UK)
    "Shelter is looking for a User Experience professional with an in-depth understanding of Lean and Agile methodologies, in particular how they relate to UX, to join us as Lead UX Designer and head up our expanding UX team."

10. Most Popular Articles This Month


11. Most Recent Articles On Smashing

  • Offboarding In The Online World
    Offboarding is something users come into contact with every time they complete an online transaction. Learn about the benefits offboarding can bring to your company and how to apply it in such a way that it is a good experience for all users.
  • Be Watchful: PHP And WordPress Functions That Can Make Your Site Insecure
    Before deploying a new plugin in WordPress, it's a good idea to keep a list of easy-to-misuse functions by your side. Let's take a closer look at some functions which you can and should use as part of a broader security strategy.
  • Using Gradients In User Experience Design
    What are gradients, and why are they so valuable to designers? One thing is for sure: Gradients are making a comeback, and we can already see this trend on many websites.

The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Markus Seyfferth (ms).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.
Follow us on Twitter Join us on Facebook



No comments:

Post a Comment