Labnotes

Published on

Redditors design worst volume sliders possible.

Design Objective

Writing for UX: some practical tips A few simple writing tips to keep in mind when writing for user experience.

Cultural Blind Spots in UX Designing for international markets is about understanding the nuances, starting with how cultures look at web pages in different ways.

@MegDraws 💺

Is there a support group somewhere for designers who worked on a redesign & then read the comments? I’ll save you a seat, @design

Tools of the Trade

8 habits to become a better software engineer Forget fancy frameworks and tools, and follow the basic principles, for example, repetition:

Each repetition will yield minor improvements, and it will be easier to find errors early on that could lead to larger problems later, he says.

Make Your Pull Requests Visual. How to make PRs for front-end changes easier to review.

Browserslist is a Good Idea Auto-prefixing your CSS, Babel presets for your JavaScript, all you have to maintain is the list of supported browsers.

Charts Charts as a service, meaning they're rendered as PNG/GIF, so you can easily embed them on any website, in emails, SMS, etc.

Our dirty little secret: Cross-platform email client with nothing but HTML "That’s just an example of what comes for free when using the same build for all platforms and going 100% web." We're doing the same thing, so maybe I'll write about it in a future post.

Mirr.io Sketch plugin for developing prototypes and sharing them.

Cross-browser extensions, available now in Firefox If you can't beat them, then … Firefox, Microsoft and Opera planning on supporting Chrome extensions in their browsers.

@brittanystoroz Easter egg:

TIL: If you turn on Chrome DevTools experiments and press the SHIFT key six times you will get even more experiments 😈

Feathers "Simply beautiful open source icons."

Jaiden Mispy

Static sites are great for performance but they're also important for longevity. Not having to maintain server-side code is a *huge* deal

Tim Berglund "Emacs...is there anything it *can't* do?"

Web-end

Leveraging the Performance Metrics that Most Affect User Experience Will teach you how to use the new Paint Timing API.

HTTP/2 push is tougher than I thought Some of the gotchas you might come across, on the road to HTTP/2.

Estelle Weyl 📆

CSS Reminder: media query "device-aspect-ratio" is deprecated. It was a -webkit- thing only.

Lines of Code

Developers Who Use Spaces Make More Money Than Those Who Use Tabs Presented here for entertainment value only.

Assaf "When you forget to remove debugging code and deploy to production"

Architectural

Eberhard Wolff 👍

Software architecture:
Finding the least disastrous option among many bad ones based on incomplete and constantly changing information.

rogue dmb 😭

Murphy's law 2017: all that can go wrong has already gone wrong, you just don't know it yet because your alerting system has also gone wrong

Machines are Learning

gwern When you know some startup is using this as their VC pitch:

'Cruelty-free non-batch-trained neural nets online methods ensure that our results are sustainably harvested from incoming data.'

This is What Happens When You Teach an AI to Name Guinea Pigs “Splanky,” “Gooper,” and “Spockers.”

Andrew Edman Ideal vs reality:

You: "Machine Learning & Big Data will make our cities smart, our lives easier"

Me: I just had to tell Google our office is not a restaurant

Locked Doors

MacSpy: OS X RAT as a Service Analysis of the MacSpy malware, which claims to be "most sophisticated Mac spyware ever."

None of the Above

Nutella 'Hired' an Algorithm to Design New Jars. And It Was a Sell-Out Success. These designs are fantastic. And if you don't fancy one, just get another jar.

The secret origin story of the iPhone Excerpt from the forthcoming book The One Device. Also, What Apple Thought the iPhone Might Look Like in 1995.

How I took my first step in tech Every person has their own journey; do what's right for you.

The Museum of Failure A collection of products and services that didn't quite make it, including such legends as the Apple Newton, Sony Betamax, Bic for Her, and Harley-Davidson Perfume.

Emergency Kittens "to understand the pillow, one must become the pillow"

Download your data PSA reminder that you can download and keep a backup of all your Google data.

Obvious Plant "I installed a ‘Relationship Saving Station’ at Ikea to help keep couples from fighting."

Published on

Alta. man mowing lawn during tornado was 'keeping an eye on it' 😮

Design Objective

In the future, design principles won’t be about design Leveling up:

But as the industry evolves and concepts such as simplicity, consistency and accessibility become unquestionably valuable, design principles will be more about users, and less about design.

Luke Wroblewski "designing for one-handed use"

Just Keep Scrolling! How To Design Lengthy, Lengthy Pages How different web sites deal with the challenge of long or even infinite scrolling experience.

Jon Cowie "we did a thing combining color & position here that’s worked really well for colorblind folks"

Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions The checklist that keeps getting longer every year — now includes conversational interface forms (aka chatbots.)

@adampowers "Today's UX lesson: don't just design around variables. Stay mindful of how a value range might change the meaning and impact of your copy."

Tools of the Trade

Debugging Tips and Tricks Sarah Drasner's excellent introduction to debugging JavaScript, including latest tools, language features, and don't forget the fundamentals!

Isolation is possibly the strongest core tenets in all of debugging. Our codebases can be sprawling, with different libraries, frameworks, and they can include many contributors, even people who aren't working on the project anymore. Isolating the problem helps us slowly whittle away non-essential parts of the problem so that we can singularly focus on a solution.

The Future of MDN: A Focus on Web Docs MDN about to become much better: "Now we’re looking to double-down on that work, and solidify MDN as the single best resource for Web docs."

New in Chrome 59 Headless Chrome is here, finally using native notifications on macOS, and Image Capture API.

Kelly Shuster

Things you find yourself telling the new intern: "I promise Android Development is more than just waiting for gradle." 😬 😭 #AndroidDev

Yarn determinism On the difference between Yarn and npm 5:

npm 5 has stronger guarantees across versions and has a stronger deterministic lockfile, but Yarn only has those guarantees when you’re on the same version in favor of a lighter lockfile that is better for review.

Magnus Hult 📧

You're talking about inbox zero, but have you achieved npm outdated zero?

Ben Porter "Good life advice from the c++ specification."

Web-end

70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization The lowest common denominator keeps being — not developers — but CSS.

Safari 11.0 No Progressive Web Apps, no ES2017, lots of web APIs are still missing. But we do get WebRTC, drag & drop on iOS, and WebAssembly.

Una Kravets Retweeting:

RT if you casually browse the web w/dev tools open (probably left open by accident) 70% of the time

Lingua Scripta

Delivering untranspiled source code via npm Using esnext to include untranspiled source code in npm packages.

JavaScript's new #private class fields Literally #.

WebAssembly cut Figma’s load time by 3x What is WebAssembly, and what are the performance gains compared to asm.js/JavaScript:

The biggest benefit we saw from using WebAssembly at Figma was faster load time. … As you can see, our load time improved by more than 3x after we switched to WebAssembly regardless of document size.

Axel Rauschmayer ⁉️

Don’t use parseInt to convert to int:

parseInt(0.0000008,10) => 8

Why? Coerces to str:

String(0.0000008) => '8e-7'

Lines of Code

James Iry 🎓

Every CS degree covers fancy data structures. But what trips up more programmers? Times. Dates. Floats. Non-English text. Currencies.

Eric Elliott 💯

Good code is simple. Code reviews are a great way to train teams to write simple code. Don't be afraid to say "this is hard to understand".

@partytimeHXLNT "If learning to cook was like learning to code:"

Peopleware

Other than algorithms, what are the most important concepts to know in computer programming? In a nutshell (but read the entire post, absolutely worth it):

Software engineering is about so much more than the technology you can harness. Its about harnessing people, also. At the end of the day, it’s about solving problems that people have.

The Single Most Important Driver Of Software Quality TL;DR "developers having skin in the game is the main driver of software quality."

Locked Doors

Intelligent Tracking Prevention Safari 11 uses machine learning to prevent machines from learning all the details of your browsing history:

A machine learning model is used to classify which top privately-controlled domains have the ability to track the user cross-site, based on the collected statistics.

HomePod, Echo, Google Home: How secure are your speakers? Whereby "speaker" means an "always-on listening device that uploads to the Internet". So if you want some measure of privacy:

With anonymized IDs, Apple's speakers have a much more compelling argument for not handing over data: They can't find it.

In the game of hide and seek with your voice data, the advantage -- for now -- goes to Apple.

You’ll never guess where Russian spies are hiding their control servers Crafty:

a recently discovered backdoor Trojan used comments posted to Britney Spears's official Instagram account to locate the control server that sends instructions and offloads stolen data to and from infected computers

How to Make $80,000 Per Month on the Apple App Store Scammers abusing App Store Search Ads, in-app subscriptions, and does anyone even review these apps?

None of the Above

Sal Partovi "can i get a version of this that deletes meetings instead?"

Fakespot Browser extension and mobile apps for spotting fake reviews on Amazon/Yelp.

iOS 11 Tidbits Customizable Control Center, one-handed keyboard, type to Siri, and more. Some of these new features may be familiar to Android users. Either way, eagerly waiting for the beta to drop.

Mike Taylor 🗓

life hack: the quickest way to make 3 months pass is to write “i’ll get to this later this week” in a public bug tracker.

@CGdrawing

Published on

Christoph Niemann "Summer's back!" (more fun 2.5D art on his Twitter)

Design Objective

Product Design Exercises We Use At WeWork Interviews The "Dribbblisation of Design" gets us pretty, but useless products. Here are 17 exercises you can do to hone your product thinking skills, and become a better product designer.

Designing for Forgiveness Help users make fewer errors through design.

Tools of the Trade

A better way to view & analyze data A desktop application for viewing and analyzing tabular data.

Web Developer Security Checklist "I’ve been developing secure web applications for over 14 years and this list contains some of the more important issues that I’ve painfully learned over this period."

ForbesLindesay/taxi-rank JSDom-based Selenium Webdriver API.

Exploring Relay Modern Looks like React's attempt at LINQ for GraphQL queries. Full of good ideas, but that syntax …

/dev/null "How to exit this bus?"

Web-end

fantasai

PSA: Use font-kerning/font-variant-* instead of font-feature-settings. They cascade better & do more correct things. https://www.w3.org/TR/css-fonts-3/

Lingua Scripta

Node v8.0.0 (Current) Node 8.0 just landed and it's full of goodness: npm 5.0, async/await and util.promisify(), upgraded V8 with TurboFan & Ingnition, new native API, V8 Inspector, and more.

The Important Features and Fixes of Node.js Version 8 Reviews some of the new features and what they mean for developers.

Lines of Code

Microdecisions In code, even small — seemingly inconsequential — decisions matter:

If there are no reasons to choose one version over another, take the time to find a reason to pick one. There are a couple benefits to this.

First, if anyone comes to you questioning your code, you'll have answers ready and will be able to defend your decisions.

Second, the process of reasoning through each of your decisions will help you to catch mistakes.

Lastly, if you have a reason for everything you choose, it will minimize the WTF moments of the next person to look at your code.

Good comments explain WHY, not WHAT, and 3 more rules on writing good comments If you have a habit of documenting decisions in Github issues/PR, not good enough:

The "next developer taking over" is almost a myth.

Usually the "next developer" is just "quickly passing by" has her own thing she wants to get done and your code got in the way.

Imagine the next person landing in your code to have no context whatsoever and VERY limited time to change it.

Syntax, Predicates, Idioms — What Really Affects Code Complexity? 222 subjects, so small study caveat and all, some interesting conclusions:

  • for loops are harder than ifs
  • 3 predicates is harder than 2; 3 vs. 4 not significant
  • flat structures appear to be slightly easier [than nested]
  • some but not all uses of negation are harder
  • loops counting up are easier [than counting down]

Test Sizes Still relevant after all these years: some call them unit, integration, and end-to-end tests; this article quantifies them more precisely as small, medium, and large tests.

@SwiftOnSecurity And eternally grateful:

We stand on the shoulders of giants who bothered to login to StackOverflow and explain their problem in words easily indexed by Google.

Architectural

How to Set the Technical Direction for Your Team "Having a clear long-term and short-term technical direction is critical to leadership in software development."

Cleaning up your codebase with a clean architecture I love articles that illustrate difficult concepts with simple to understand code:

A clean architecture is a guide to splitting up your code, giving direction on where certain concepts belong.

  • Separate your code by layers
  • Put abstractions in the inner layers
  • Put implementation details in the outer layers
  • Dependencies can only point inward, never outward.

@noahsussman The entire thread is a gem:

the idea behind Continuous Delivery is that you write code and someone else reviews it and you deploy it and you see its impact if any

the maximum value is derived from Continuous Delivery when writing, reviewing, deploying and watching all occur ON THE SAME DAY

Devoops

@DanielMorsing 😭

I'm naming my cats-to-be kafka, cassandra and pagerduty so that I will be less surprised when they wake me up in the middle of the night

Locked Doors

Sun Tzu

"Your enemy cares not that the maintainer of an Internet-connected server left 10 years ago." - Sun Tzu

Khalil Sehnaoui "When you don't want your enemies to track your moves. #Opsec"

None of the Above

Toby Price "What #legos do when we aren't looking."

Hasan Minhaj 'Homecoming King' now streaming on NetFlix. Incredible.

Mikko Hypponen "Nowadays we do Voice-over-IP, but we used to do IP-over-Voice."

Internet Trends 2017 Mary Meeker's deck — 355 slides packed with important research — covers global internet trends, digital media, cloud computing, the Chinese and Indian markets, healthcare records, and more.

samim "Silicon Valley (1950)"

Published on

Stack Overflow: Helping One Million Developers Exit Vim

Design Objective

Better Form Design: One Thing Per Page A case study in improving UX by focusing on one task per page. And 16 reasons why you'd want to do that:

16) When we’re designing a complex flow, breaking it down into atomic screens and components makes it easier to understand the problem.

This reduces the design effort — which is a nice byproduct of a pattern that benefits users so greatly.

Style Guide Guide Brad Frost's (of Atomic Design) boilerplate for creating style guides. Clone the repo, add your own styles, and publish to Github Pages.

9 tips to get bare minimum of web accessibility From which I learned about the inert attribute:

When a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as "find in page"), and may prevent the user from selecting text in that node.

A Year Of Google & Apple Maps That's some detailed and interesting analysis of these two map services, and how they evolve with time (or don't).

Tools of the Trade

DevTools: State of the Union 2017 Paul Irish goes over the new features coming to DevTools: smarter auto complete, support for async/await, improved performance measurements, PWAs, and fancy new Node.js debugger.

Documents 6 Documents 6 is the closest thing to Finder for iOS. It works with iCloud, Google Drive, and Dropbox, you can download files, zip/unzip, preview and annotate PDFs, play audio/video offline, and on the iPad, run two apps side by side, and drag & drop files between them.

Workbox JavaScript library for Progressive Web Apps: handles offline caching, and background sync.

Birdview.js Get a glance of the whole web page with an aerial view. Also available as a Chrome extension.

Malaised Machine "the garbage collector attempts to reclaim space occupied by objects which are no longer in use"

Fidget Loader Because of course.

A brief history of the CSV file From The Annals of the Elders of Interoperability Formats:

This was largely to do with the fact that it’s easier to type CSV lists on punched cards (which is how the Fortran was coded) than it was field-column-aligned data.

Manuel Aristarán "Think about this person before you complain that D3 is hard."

Web-end

CSS and the First Meaningful Paint Patrick Hamann speaking at London CSS, takes us on a journey of current, past, and future best-practices for loading CSS, and how to achieve a first meaningful paint within 1000ms.

Monitoring Jank: How we found the slowest parts of our UI New use for requestAnimationFrame:

If one measures how long it takes for a requestAnimationFrame callback to be invoked, one can quantify how much jank occurred using the difference between the time measured and the expected time under smooth conditions (which is approximately 16.67ms). If a requestAnimationFrame callback is invoked after 116.67ms, then the jankAmount for that frame is approximately 100ms.

Responsive Design for Motion Using the prefers-reduced-motion media query to serve alternate animations that avoid the motion sickness triggers experienced by some people.

Dave Rupert "Y'all. This CSS Grid stuff is gettin' ridiculous. 2-col form with occasional full-width field in 4 lines of CSS!"

form.account-settings {  
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2vw;
}

.input--wide {
  grid-column: 1 / 3;
}

Thomas Fuchs "Fixing cross-browser CSS issues"

Lingua Scripta

npm 5.0 Is here.

utilise/emitterify An event emitter that supports callbacks, promises, and observables

Lines of Code

Sarah Mei "How I test-drive code, a.k.a. TDD: THE FLOWCHART (by me & @rypacl)"

C J Silverio The best things in life …

This particular codebase is 100% mine and 90% unimplemented, which means it is possible to like.

Patrick Thomas

I got 99 problems, but one of them is multithreading so honestly I'm not sure how many problems I actually have right now.

Architectural

“Why We Didn’t Use A Framework” (Case Study) "Could using less code (from others and including our own) and implementing from scratch result in less total work?"

Pinboard Related, a long thread with varied and interesting opinions:

From the outside, front end development in 2017 looks pathologically overcomplicated. Is this a fair perception? If so, why is it happening?

My favorite soundbite: "Ambitions have outpaced tooling.”

Kelsey Hightower Always be separating:

Clean separation between infrastructure, software, and configuration makes upgrades and troubleshooting much easier.

MicroservicesCity Cool idea. A notation for representing microservices as “message abstraction layers.”

Peopleware

Managing Product Teams for Success The power of managing product teams by outcomes.

We Aren’t Built to Live in the Moment "A more apt name for our species would be Homo prospectus, because we thrive by considering our prospects."

Locked Doors

Introducing Travel Mode: Protect your data when crossing borders Kodus to 1Password for tackling this thorny issue.

Chris Plummer Half prank, half training exercise in infosec:

Coworker left machine unlocked all weekend so I changed his wallpaper. He's not in yet. Whole department in on it. Hilarity in 10 minutes.

Techtopia

facebook files The Guardian digs into content moderation at Facebook, and … yeah. In the image below, green checkmarks next to statements of violence that Facebook moderators are instructed to approve.

Watch People With Accents Confuse the Hell Out of AI Assistants "Mostly, the assistants did a pretty good job. Mostly."

None of the Above

yarrow "idk what this meme is but i love it"

The Cut Off — List Of Impostor Craft Beer Brands For those who like their craft beer small, independent, and not made by a subsidiary of AB InBev.

Farhad Manjoo 🐣 "Software really is eating the world"

pilot "This is how to measure wind speed by the windsocks 🤓."

ABC7 News "Adorable! Watch what happens when zookeepers introduce this 6-day-old rhino calf to a scrub brush."

Published on

Ⓒⓐⓡⓞ "the best laptop stickers 😂"

Design Objective

Craft by InVision Build prototypes directly inside Sketch.

Ben Schwarz: Real world connectivity: Beyond the bubble "We need to stop optimizing for $3000 computers on a fast connection."

Josh Clark

Q: Where's the fold in web design?
A: Whatever the CEO's screen size is.
—@zeldman #aeabos

Tools of the Trade

Git and GitHub Integration comes to Atom Slick.

Things 3.0 All new design, all new features, and if you have to ask about the price …

Filip W

the most dreaded words you can hear in software world: "...and you can create all of this, without writing a single line of code!"

Leandro Pereira

Web-end

Flexbox Defense A defense game that teaches you how to flexbox.

CSS Grid Fair:

Either let the auto-placement algorithm place items — in which case you don’t need breakpoints. Or explicitly place items — and then you do.

Guillermo Esteves "Figured out how to put my photoblog on Apple News and add sections to it. Totally worth it."

Lingua Scripta

return true to win Fun little game to test your knowledge of JavaScript equality, type coercion, and other obscure corners.

Chris Dickinson "You can mark promises that you intend to catch later by doing the following:"

a = getPromise()  
a.catch(() => {})  
// later..
await a

Lines of Code

SLAP Your Functions! Yeah, so I'm not sure how I feel about this acronym (I hate it), but the concept of each function dealing with a single level of abstraction, that's spot on.

Architectural

Yoz Grahame This story, of a Second Life deployment gone wrong:

So, during the rollback, several dedicated QA engineers stayed up much of the night, saving virtual horses from starving to death.

Chris Puttick "What are clouds made of?"

Peopleware

Parkinson’s Law: Why Constraints Are The Best Thing You Can Work With TL;DR "Parkinson’s law is an observation that we unnecessarily complicate things."

Mike McQuaid

As an OSS maintainer: as a user you are not my customer. You're trying to motivate me to spend time on you: if anything, I'm the customer.

The Machines Are Learning

Physiognomy’s New Clothes It's not just that machine learning perpetuates existing biases, they also lends legitimacy to racism:

Whether intentional or not, this “laundering” of human prejudice through computer algorithms can make those biases appear to be justified objectively.

Locked Doors

The hacking group that leaked NSA secrets claims it has data on foreign nuclear programs This analogy though:

“Is being like wine of month club,” read the blog post, which is written in broken English. "Each month peoples can be paying membership fee, then getting members only data dump each month."

Hospital Ransomware To patch or not to patch?

I did some math for Timing the Application of Security Patches for Optimal Uptime, and estimated that likelihood of attack starts to exceed likelihood of damage from the patch at around 10 days

Faizal. "When ransomware guys provide better customer support than most companies 😂#WannaCry"

deech

Wife: I'm bummed, I thought global variables meant every computer on Earth could see/change them.

Me: Your career in InfoSec awaits, madame.

Techtopia

Spencer Chen "I just laid the audio from the Blade Runner 2049 trailer to the new Google Assistant ad. I'm scared. Literally no extra editing involved 😳"

Simone Giertz But more demanding:

mail inboxes are like adult-life versions of tamagotchis

Logan "When you don't need to interface with your illuminated rectangle on your commute because of your rich inner life"

None of the Above

Kotaku "The top iOS game is a fidget spinner app, because of course it is"

Stabmaster Arson This thread is epic: "Good morning millennials. Let's take a look at all the things you murderous pricks have killed in the last two years, somehow."

Bim Adewunmi "repeat after me: 'you're a proud, fearless peacock, and you're gonna do great today.' now go out there and be somebody!"

Gabrielle Bluestone "a message to my enemies"

Machine Pix Amazing 3D illusions.

Notes From An Emergency Maciej Cegłowski's talk at the re:publica conference in Berlin.

Molee✷ "ชอบอันนี้งานปักรูปคนที่มีลูกเล่นตรงเส้นผม, ผลงานของ Sheena Liam 💘"