Transcript: Ask the UXperts: The UX of Onboarding — with Dr Paul Sherman

Our Ask the UXperts series got off to a cracking start for the new year, with a fantastic session with Dr Paul Sherman. The topic was The UX of Onboarding and it was an highly entertaining and informative session.

Everyone was in fine form and the jokes flowed freely.

We examined some of the key principles of the onboarding process and broke down the common patterns to identify the bits that work, and the bits that aren’t so great.

If you work on products or services of any kind, I’d recommend having a read through this transcript.

If you didn’t make the session because you didn’t know about it, make sure you join our community to get updates of upcoming sessions.

If you’re interested in seeing what we discussed, or you want to revisit your own questions, here is a full transcript of the chat.

Transcript

hawk

2017-02-16 01:02

The serious stuff first:
Dr. Paul Sherman has worked in user experience since the days of dial-up.

He conducts user research and user experience design for mobile, web and desktop in many domains, including accounting; banking; e-commerce; financial planning and portfolio management; healthcare; mobile gaming; mobile device hardware and software; network, server and cloud application security; tax preparation; and travel, among others.

He also creates and teaches graduate courses in user experience research and design at Kent State University, where is he is an Assistant Professor and Program Coordinator for the User Experience Design Master’s program.

hawk

2017-02-16 01:03

@pjsherman Do you want to give us a bit of an intro to the topic?

pjsherman

2017-02-16 01:03

Sure thing. Basically,

pjsherman

2017-02-16 01:04

I would define onboarding as “The process of getting people to adopt your application or service.”

pjsherman

2017-02-16 01:04

It might be fully on-screen, but more likely it’s a blend of channels and modalities.

alex.lee

2017-02-16 01:04

How is onboarding process different from marketing and sales?

pjsherman

2017-02-16 01:05

Onboarding is post-conversion. Post-sale. It’s the stuff that happens after the customer/user has committed.

pjsherman

2017-02-16 01:05

*Or, committed an initial effort at least. Onboarding UX is the process of getting them from initial commitment to adoption.

pjsherman

2017-02-16 01:06

(I am thanking my 9th grade typing teacher right now for teaching me home row)

alex.lee

2017-02-16 01:07

:+1:

hawk

2017-02-16 01:07

And questions are go…

holliedoar

2017-02-16 01:07

I’m currently designing a basic onboarding process – and I’m wondering how to know what is best to include and not include. Obviously you don’t want to have to tell them every feature of the app – but how do you decide?

pjsherman

2017-02-16 01:07

woo!

zheng

2017-02-16 01:08

Paul, when does onboarding start and end (does it still apply to customers who have been with you for awhile but aren’t necessarily utilising your product well?)

pjsherman

2017-02-16 01:08

@holliedoar TESTING! And also focusing on the critical few things that solve a user’s problem.

ryanhoffman

2017-02-16 01:08

What have you found users respond to the most? re: copy, images, animations

pjsherman

2017-02-16 01:09

@zheng Actually I think it can continue almost indefinitely, and it definitely applies to new releases and features. If any of you use Trello…have

pjsherman

2017-02-16 01:09

you seen Taco pop his cute little head up to announce new features?

pjsherman

2017-02-16 01:09

That’s continuing onboarding.

holliedoar

2017-02-16 01:09

love taco

pjsherman

2017-02-16 01:09

By the way that’s a good pattern. Giant release notes belong in the dustbin of UX history.

davidbaird

2017-02-16 01:09

are we talking onboarding features or process?

hawk

2017-02-16 01:10

Taco is just like a modern day paperclip guy

pjsherman

2017-02-16 01:10

OK I think I have the rhythm down… go to @hawk DM with me, copy the entire q, then answer.

pjsherman

2017-02-16 01:11

@ryanhoffman : What have you found users respond to the most?
I can tell you what they DON’T respond to.. something like this:

pjsherman

2017-02-16 01:11

@pjsherman uploaded a file: http://ift.tt/2ljKq59

pjsherman

2017-02-16 01:12

That’s “modal stepped tutorial”

pjsherman

2017-02-16 01:12

Not many advantages.

pjsherman

2017-02-16 01:12

People won’t remember.

pjsherman

2017-02-16 01:12

And they just want to try the thing.

alex.lee

2017-02-16 01:12

Asking people to remember things in advance :-1:

pjsherman

2017-02-16 01:12

More on @ryanhoffman q: they respond to interaction, and learning while doing.

jakkii

2017-02-16 01:12

Ugh, as a user I hate those things

jorge

2017-02-16 01:13

What do you think about the one that “locks out” everything but the feature that the onboarding step is explaining? Do you think of those as some sort of modal as well?

pjsherman

2017-02-16 01:13

There are other patterns, like first-run callouts.

pjsherman

2017-02-16 01:14

But the problem with those is, how do you review them?

hawk

2017-02-16 01:14

If you’ve recently joined us, jump in with questions at any point – I’ll queue them for Paul

pjsherman

2017-02-16 01:14

If you want to see them again?

pjsherman

2017-02-16 01:14

Some products have solved that. Here’s a pic of http://proto.io’s main screen after first run….

pjsherman

2017-02-16 01:15

@pjsherman uploaded a file: http://ift.tt/2l9XJCs

pjsherman

2017-02-16 01:15

They’ve included nav to get back to the first-run content! Good pattern.

srvcook

2017-02-16 01:16

How do we create onboarding for a wider range of users— including those that want handholding and upfront instructions, without irritating the less patient digital natives?

pjsherman

2017-02-16 01:16

@jorge : What do you think about the one that “locks out” everything but the feature that the onboarding step is explaining? Do you think of those as some sort of modal as well?

They’re good b/c from a perception pov, they focus your attention. For a while at least.

pjsherman

2017-02-16 01:16

But if you’re going to do that, best keep it to the top 2-3 things.

pjsherman

2017-02-16 01:16

And like http://proto.io, let people take the lesson again.

pjsherman

2017-02-16 01:17

Here’s an onboarding blast from the past, for you old UX’ers like me…

pjsherman

2017-02-16 01:17

@pjsherman uploaded a file: http://ift.tt/2la10Ss

hawk

2017-02-16 01:17

That’s the paperclip guy I was talking about. I forgot his real name.

hawk

2017-02-16 01:17

Clippy?

srvcook

2017-02-16 01:18

Yes!

pjsherman

2017-02-16 01:18

Yes clippy

davidbaird

2017-02-16 01:18

Jeez clippy was annoying…lol

alex.lee

2017-02-16 01:18

I think there was a UX method/term for that… like discretionary information or something where you limit info so more advanced users can cruise through apps

hawk

2017-02-16 01:18

I’d like a “Write the whole letter for me” option

cystinosis

2017-02-16 01:18

Most did hate him.

srvcook

2017-02-16 01:18

such a debonair office product.

pjsherman

2017-02-16 01:18

@srvcook : How do we create onboarding for a wider range of users— including those that want handholding and upfront instructions, without irritating the less patient digital natives?

From the testing I’ve done, almost all people benefit from the learn while doing approach. DN’s will do one short one. Others will do more if you let them. So give them a choice.

pjsherman

2017-02-16 01:19

Like from Starship Troopers: “Would you like to learn more?”

jorge

2017-02-16 01:19

Clippy and his friends (like the Wizard or the red bouncing ball) were good for a bit, but mostly were irritating to -always- pop up in the middle of something.

davidbaird

2017-02-16 01:19

Slippy’s interpretation intelligence wasnt good…context intelligence is everything

felesiauxd

2017-02-16 01:19

Hi Paul I’m not stalking you I promise

davidbaird

2017-02-16 01:19

*Clippys, soz

alex.lee

2017-02-16 01:20

But for some reason chatbots are making a return… @pjsherman do you think chatbots can make a good case for improving UX in it’s current evolution?

pjsherman

2017-02-16 01:20

@felesiauxd Restraining order time! :stuck_out_tongue:

davidbaird

2017-02-16 01:21

can A chat bot record and learn cognitively..can a bot read what youve done so far an provide intelligent options for you..thats the question

davidbaird

2017-02-16 01:21

IMO

pjsherman

2017-02-16 01:21

@alex.lee It depends on the amount of AI horsepower they could provide. But your idea has me thinking… what if you could just invoke a help mode, point to an element, and while in that mode you could see what you could do from that point?

alex.lee

2017-02-16 01:21

AI and VR machines like Alexa and Watson are coming back with popularity

pjsherman

2017-02-16 01:21

It wouldn’t work with all workflows and UI’s, but definitely some.

jakkii

2017-02-16 01:21

Yeah agreed re: popping up in the middle of things. It’s the interruption that is challenging, begging the question how do you balance making notifications and help visible and accessible, with potential notification blindness and interruptions… ?

alex.lee

2017-02-16 01:22

@pjsherman: my thoughts exactly. I’m building an app right now with that in mind

pjsherman

2017-02-16 01:22

I’m going to look up the clippy from hell..brb

davidbaird

2017-02-16 01:22

User needs the option to invoke chat help..if needed

hawk

2017-02-16 01:22

Let’s talk about him while he’s gone

pjsherman

2017-02-16 01:22

Got it…

pjsherman

2017-02-16 01:22

@pjsherman uploaded a file: http://ift.tt/2ljJmy6

alex.lee

2017-02-16 01:22

What about Max Headroom from the 80s?

hawk

2017-02-16 01:23

Hahahaha. That’s unbelievable!

felesiauxd

2017-02-16 01:23

@hawk we can talk about him while he’s here :stuck_out_tongue_winking_eye:

pjsherman

2017-02-16 01:23

True that

pjsherman

2017-02-16 01:24

Is anybody thinking of using gamification or social comparison cues to facilitate onboarding?

davidbaird

2017-02-16 01:24

Simple processes, that can turn difficult, like Booking a flight, then changing can benefit from chatbot

jorge

2017-02-16 01:24

“what if you could just invoke a help mode, point to an element, and while in that mode you could see what you could do from that point?” <- Like InVision and such “pulses” for links and such, but for info?

pjsherman

2017-02-16 01:24

@davidbaird Agree. No need to cut over to call center. The problem scope is known at that point.

holliedoar

2017-02-16 01:25

social comparison cues?

pjsherman

2017-02-16 01:25

@jorge Oooh I want to see those examples. I haven’t installed InVision. Too busy learning Flinto

pjsherman

2017-02-16 01:25

@holliedoar Yes. Let me grab an example.

davidbaird

2017-02-16 01:25

@jorge a pulse link?

pjsherman

2017-02-16 01:26

OK so check out Stack UX’s screen when you join:

pjsherman

2017-02-16 01:26

@pjsherman uploaded a file: http://ift.tt/2la8c0S

pjsherman

2017-02-16 01:26

You do the things (the onboarding activities that are designed to get you engaged), and then you get a nice reward!

pjsherman

2017-02-16 01:27

@pjsherman uploaded a file: http://ift.tt/2ljAV5K

pjsherman

2017-02-16 01:27

And you are DA MAN (or DA WOMAN)

jorge

2017-02-16 01:27

@davidbaird @pjsherman most like a light flash to show points of interest. Trying to find a screenshot/video to demonstrate.

holliedoar

2017-02-16 01:27

love a good reward. i am a sucker for stars and rainbows.

pjsherman

2017-02-16 01:27

In psych we call them “pellets”.

zheng

2017-02-16 01:27

How can we cater to different user types ( when a single product might be used by a product manager, a developer, CTO or customer success etc) during onboarding? And they might all have a different use case.

amirasallam

2017-02-16 01:27

What are mobile apps that have the best on boarding experience in your opinion?

pjsherman

2017-02-16 01:27

As in the food reward you give the mouse in a lab experiment

alex.lee

2017-02-16 01:28

It helps people feel less stupid for asking obvious questions

alex.lee

2017-02-16 01:28

“There are no silly questions, except ones there are not asked”

davidbaird

2017-02-16 01:28

@ jorge thanks…Im wary of flashy thing in the UI..:)

pjsherman

2017-02-16 01:28

@amirasallam There are way too many! All I have is a few examples based on research I’ve done, but not thesis-level comprehensive.

jorge

2017-02-16 01:29

@zheng once I set different landing pages/first-load-screens depending on the “user role” they had. Where they had access to their different features.

alex.lee

2017-02-16 01:30

Which popular app has terrible on boarding experience?

pjsherman

2017-02-16 01:30

@zheng How can we cater to different user types ( when a single product might be used by a product manager, a developer, CTO or customer success etc) during onboarding?

– So, if you have personas, and you know what features these diff types are likely to use, you could ask them who they identify as.

pjsherman

2017-02-16 01:30

Then it’s a “choose your own adventure” type of onboarding.

pjsherman

2017-02-16 01:30

It’s more expensive in terms of design and dev time.

pjsherman

2017-02-16 01:30

But it’ll prob pay off in the long run.

pjsherman

2017-02-16 01:31

(I wish we had theme music for Slack. Somebody submit a feature request.)

pjsherman

2017-02-16 01:31

8:30]
@alex.lee Which popular app has terrible on boarding experience?

LINKEDIN – argggggghhhhhhh

holliedoar

2017-02-16 01:32

I reckon you could make a little ditty out of that sound it makes when you get a message

pjsherman

2017-02-16 01:32

First it asks you to be a viral vector and spam your friends.

hawk

2017-02-16 01:32

Then when you don’t, it just does it for you. Over and over again.

jellybean

2017-02-16 01:32

And then it keeps on annoying you.

pjsherman

2017-02-16 01:32

Then it starts – yes!

pjsherman

2017-02-16 01:32

@pjsherman uploaded a file: http://ift.tt/2la17NZ

jorge

2017-02-16 01:32

After you’re done with that, you set your mail and name… and then again spam your friends.

hawk

2017-02-16 01:33

hahahahaaha

holliedoar

2017-02-16 01:33

LinkedIn makes me so cross

hawk

2017-02-16 01:33

And then people that aren’t your friends but once emailed you.

pjsherman

2017-02-16 01:33

This is my continuing experience with LI. A bunch of badges and banners all fighting for attention.

hawk

2017-02-16 01:33

Same

jakkii

2017-02-16 01:33

Yes!

mel

2017-02-16 01:33

Q: How much do fun animations improve onboarding success? Does it keep peoples’ attention more?

pjsherman

2017-02-16 01:34

@mel Used with caution, I think it’s effective.

pjsherman

2017-02-16 01:34

Examples: Taco peeking his head up on Trello.

davidbaird

2017-02-16 01:34

@mel that idea has merit, done sparingly. A ‘wiggle’ on a icon

srvcook

2017-02-16 01:34

LI: And then you follow their prompts to update your profile, and it spams your friends for you (and tips off your colleagues of your attempts to look for a new gig)

pjsherman

2017-02-16 01:34

And Slack actually has a non-animated little “present with a bow” icon that announces new features.

pjsherman

2017-02-16 01:35

Here’s a dump of my gamification def:
Gamification and social comparison trigger people’s desire to complete a process and earn achievements.

Both can be effective, but also expensive to implement.

jellybean

2017-02-16 01:35

Badges can be annoying. I don’t care if you want to badge me, I want to do x,y,z.

pjsherman

2017-02-16 01:36

Here’s an example of social facilitation (diff than social comparison)

pjsherman

2017-02-16 01:36

@pjsherman uploaded a file: http://ift.tt/2l9XCa1

srvcook

2017-02-16 01:36

What is the line between providing too much information upfront and losing user interest because they aren’t yet invested and are learning while doing? How frequent should that interaction be?

jorge

2017-02-16 01:37

The issue with gamification that I’ve found is that everyone “outside” the environment (like sales/CTOs/etc) want to have it, and they believe that with PBL (Points, Badges and Leaderboards) splattered all over it’s enough.
So we end up with awful gamified experiences.

pjsherman

2017-02-16 01:37

In turbotax, they’ve looked at the data and surfaced top questions as a means of onboarding new users. (And they’ve provided easy access to live peer or expert help)

pjsherman

2017-02-16 01:38

@jorge Agree. Done sparingly and well, it harnesses people’s desire to complete a process.

jorge

2017-02-16 01:38

Achievement Unlocked *Get a 3 replies from the UXpert*

pjsherman

2017-02-16 01:39

Oh I just realized, one GREAT example of learn by doing is the InVision samples!

pjsherman

2017-02-16 01:39

@pjsherman uploaded a file: http://ift.tt/2ljUGdL

alex.lee

2017-02-16 01:39

Yep I agree

pjsherman

2017-02-16 01:39

They’ve got sample projects for you to play with. I grabbed this about 6-8 months ago.

pjsherman

2017-02-16 01:39

You can’t break anything, and if I remember correctly there’s some contextual help along the way.

alex.lee

2017-02-16 01:40

What would you say are your top 3 tips to improve UX onboarding process for your typical inhouse UXer?

pjsherman

2017-02-16 01:41

New q:
How important are micro-interactions to on-boarding? What are some good examples? I recently saw a demo for the FitBit app on-boarding, and liked it. It seemed engaging but not overdone. What are some bad examples?

– MI’s are very important.

pjsherman

2017-02-16 01:41

Here’s one from Gmail.

srvcook

2017-02-16 01:41

Is the concept of a “wizard” tool dead? (looking to get this on record)

pjsherman

2017-02-16 01:41

@pjsherman uploaded a file: http://ift.tt/2la4SCZ

pjsherman

2017-02-16 01:41

I started selecting multiple items.
It recognized this and offered information.

pjsherman

2017-02-16 01:42

You can’t see the MI, but there was definitely a transition.

pjsherman

2017-02-16 01:42

@srvcook What is the line between providing too much information upfront and losing user interest because they aren’t yet invested and are learning while doing? How frequent should that interaction be?

This is a question for testing and iteration.

rgirando

2017-02-16 01:42

So this is about on-boarding of any type, shape or form?

pjsherman

2017-02-16 01:43

Here’s an example of a too-long process that I would run away from:

pjsherman

2017-02-16 01:43

Medium on mobile..

hawk

2017-02-16 01:43

@rgirando Yup!

pjsherman

2017-02-16 01:43

@pjsherman uploaded a file: http://ift.tt/2la84OT

pjsherman

2017-02-16 01:43

OK, step one, not so bad…

pjsherman

2017-02-16 01:44

@pjsherman uploaded a file: http://ift.tt/2ljRO0f

pjsherman

2017-02-16 01:44

Uhhhh, okayyyy….

pjsherman

2017-02-16 01:44

@pjsherman uploaded a file: http://ift.tt/2la4aWc

pjsherman

2017-02-16 01:44

Fucking hell, Medium! Stop it!

davidbaird

2017-02-16 01:45

have to step out now…Ill check the transcript later. thx all.

pjsherman

2017-02-16 01:45

I need to refill this whisky glass… 30 secs

hawk

2017-02-16 01:45

@davidbaird Later. Thanks for joining us. :slightly_smiling_face:

pjsherman

2017-02-16 01:46

OK back.

pjsherman

2017-02-16 01:46

I lied I went for the scotch.

hawk

2017-02-16 01:46

it would be funny if we had all gone. wish we thought of it.

pjsherman

2017-02-16 01:47

I can’t find a good enough drink emoji but yes

jorge

2017-02-16 01:47

@jorge uploaded a file: http://ift.tt/2ljK8uV and commented: The “info mode” to tap and know what’s what. On some pattern libraries are called “Coach Marks”

cystinosis

2017-02-16 01:47

Good UX = Hard Liquor

pjsherman

2017-02-16 01:49

@jorge yes. Implementation-wise, you would get different outcomes I’m guessing if you forced-marched people through a series in order – which is basically a wizard – vs. presenting it the way it is in the screenshot and let people explore.

jgalpin

2017-02-16 01:49

where’s the info mode button/icon?

pjsherman

2017-02-16 01:49

Would love to test the implementation differences.

pjsherman

2017-02-16 01:50

I y’all want, I can drop my onboarding listicle into here. And I’ll provide a link to the onboarding talk I did at UX Singapore. I’m pulling a lot of the examples from there.

davidbacon

2017-02-16 01:50

has joined #ask-the-uxperts

jorge

2017-02-16 01:50

Oh yeah! If you ever do those tests let me know. It would be awesome.
I’ve always felt that if you force the tutorials some users would get annoyed.

pjsherman

2017-02-16 01:50

Here’s my “10 Onboarding Principles” listicle. In the preso I have examples for each.

pjsherman

2017-02-16 01:50

1. Present a clear value proposition.
2. Engage emotional and aspirational motivations.
3. Doing is better than showing or telling.
4. Minimize friction and barriers.
5. Stock the shelves. Avoid the empty store.
6. Don’t ask for a commitment before the user is ready.
7. Leverage social comparison and gamification. But don’t be cheesy.
8. Support learning and mastery at the point of need.
9. Share content via different channels to encourage engagement.
10. Measure and test!

pjsherman

2017-02-16 01:51

Both positive and negative

razel

2017-02-16 01:51

#6 forever

srvcook

2017-02-16 01:52

@srvcook pinned a message to this channel.

pjsherman

2017-02-16 01:52

BTW I should mention the alternate channel methods. Your marketing teams know all about this stuff…
– Welcome email
– Getting started email
– Here’s how others are successfully using it email
– Join our community email
– Etc etc.

felesiauxd

2017-02-16 01:53

What do you think of applications like “walk me?”

pjsherman

2017-02-16 01:53

And of course you point them to the Youtube / Vimeo channels

pjsherman

2017-02-16 01:53

@felesiauxd I actually haven’t played with it! You know what I’m doing tomorrow now.

pjsherman

2017-02-16 01:54

Hey here’s a great out-of-product example of lowering perceived cost of adoption…

felesiauxd

2017-02-16 01:54

@pjsherman: we lost that battle at work

hawk

2017-02-16 01:54

We have ~5 mins left in the session. Have we missed any questions?

pjsherman

2017-02-16 01:54

@pjsherman uploaded a file: http://ift.tt/2ljHplq

hawk

2017-02-16 01:55

Ok, last call for questions before we cut Paul and his scotch loose

jakkii

2017-02-16 01:55

Hahaha. I have to head out – thanks @pjsherman & @hawk, and everyone for the interesting questions

pjsherman

2017-02-16 01:56

All, here’s the onboarding preso. It’s Keynote, so the videos will play.

pjsherman

2017-02-16 01:56

http://bit.ly/2l9HWnf

pjsherman

2017-02-16 01:56

If you want the pdf, ping me and I’ll send.

The post Transcript: Ask the UXperts: The UX of Onboarding — with Dr Paul Sherman appeared first on UX Mastery.

by Sarah Hawk via UX Mastery

Editorial: Which Planet of the Apps Are We On?

If you haven’t heard that Apple is launching a TV show about app-making, then, I wonder… which planet you’re living on?

The trailer for the new show promises the following:

In every episode, app developers work to earn millions of dollars in venture capital investment. It begins with a pitch to four of the world’s most culturally influential entrepreneurs. […]. It all leads to a final pitch with one of the hottest venture capital firms on the planet.

The developer community’s reception, so far, has been negative. Rock Star Developer and maker of Instaper Marco Arment tweeted:

I’m sure Planet of the Apps will be a great show for all of those people who bug developers with their awful ideas.
But actual developers… Well, this likely has about as much relevance to reality as most “reality” shows.
Aside from the fact that judging a show purely by its trailer is, shall we say, unwordly, I say: Think different, content-creation is an avenue that Apple has much exploration to do in, and they have the resources required for it (visibility, money, domain knowledge, and talent). Consider this an experiment. Worst case scenario; mobile apps gain more visibility. Best case scenario? The perceived value of apps and your job becomes higher. You’d be automatically promoted from Rock Star to Rock Legend.

Continue reading %Editorial: Which Planet of the Apps Are We On?%

by Ariel Elkin via SitePoint

Web Maker, an Offline, Browser-based CodePen Alternative

In this article, Kushagra Gaur introduces Web Maker, a browser extension he created for front-end developers who want a blazing-fast, offline web playground.

If you're a front-end developer like me, you've probably tried one or more of the code playgrounds out there like CodePen, JSBin, JSFiddle etc. They're all great and do the job perfectly. I've mostly used them to figure out issues I'm facing, or to discuss code snippets with colleagues. But I've always felt a slight friction in them having to work over the internet --- with an inherent delay between starting them up and being able to use them.

I also wanted a quick way to hack stuff while traveling or waiting at the airport, where you're mostly offline. Of course, you can use an editor and see the results in the browser --- but in this fast-paced world, that's slow to set up!

I tried looking for something that could give me what I wanted, but couldn't find any. In fact, I found many people looking for the same thing:

https://twitter.com/armstrong/status/567403700713717763

So I decided to make something myself, and created Web Maker. Now I use it to do all my web experiments --- and even to develop Web Maker itself!

What is Web Maker?

Web Maker is a Chrome extension that converts your new tab (optional) into a web playground where you can write HTML, CSS and JavaScript and instantly see a preview right there. It has thousands of users and is available on the Chrome Web Store.

Features

Super fast and works offline

Being a chrome extension, Web Maker lives completely in your browser. There's no network involved (unless you're using a third-party JavaScript/CSS library). So it opens instantly. Not just initial startup, but every change you make in the code produces an instant refresh in the preview. And if there's just a CSS change, it doesn't even require a refresh --- it just shows up.

You also have the option to save and load your creations for later editing. They're saved in your browser's localStorage.

Web Maker is also recommended by Chris Coyier on CodePen blog, if an offline web playground is what you need:

We get asked fairly often about an offline version of CodePen. While we think that would be cool, in all honesty, we aren't particularly close to that. If you're looking for a CodePen-like offline editor, and use Chrome, check out Web-Maker by Kushagra Gour.

---

For more on the story behind CodePen, check out the Versioning Show episode with Chris Coyier…

---

Preprocessors

Preprocessors are an integral part of almost every developer's toolchain. Web Maker provides you with all the most-used preprocessors out there for HTML, CSS and JavaScript --- be it Markdown, Jade, SCSS, Less, JSX or TypeScript.

Adding libraries

If you need to use an external JavaScript or CSS library (like jQuery or Bootstrap) in your creation, you can simply hit the Add Library button, choose one of the popular libraries from the available list, or start typing the name of any library and select it from shown auto-suggestions.

Multiple layouts to choose from

In addition to having multiple editor layout options, each of your saved creations remembers the layout it last used, along with the code pane sizes. So, basically, whenever you load back any creation, you get the exact same editor configuration that you last saved the creation in.

Also, you get a full screen layout to see your work in actual browser window size.

Preview screenshot capture

Chrome extension APIs give Web Maker immense power to do stuff that normal web apps can't. One example is screenshot capture. Just click the Take Screenshot button anytime to take an instant screenshot of your preview.

Save as HTML or open in CodePen

When you've done your work inside Web Maker, you don't need to copy/paste it to some file to use somewhere else. You get a Save as HTML file option that embeds your HTML, CSS and JavaScript code inside an HTML file.

Or say you want to share your creation with the world: the Open on CodePen button opens your creation inside CodePen.

Open source everywhere!

I have made Web Maker open source on GitHub. I think it connects me more with the users, who can suggest features they want or log issues they face, all in one place.

There are many interesting logic pieces that go into making such a web playground. All those are open to see and learn from. I personally loved working on prevention of infinite loops using Esprima.

Web Maker heavily uses some awesome, open-source projects out there like CodeMirror, Esprima, Split.js, Escodegen, Inlet.js, Emmet etc. A big shout out to them! And as I mentioned, Web Maker also uses Web Maker. ;-)

Continue reading %Web Maker, an Offline, Browser-based CodePen Alternative%

by Kushagra Gour via SitePoint

Explore Shutterstock’s Global Creative Trends That Will Shape 2017 (Infographic)

With 1.5 million customers in more than 150 countries, Shutterstock’s 2017 Creative Trends Report is a one-of-a -kind look at the global creative trends taking place across the planet. The tech company took what their global customers have been downloading and searching for over the past year and...

[ This is a content summary only. Visit our website http://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Irfan Ahmad via Digital Information World

Quick Tip: User Sortable Lists with Flexbox and jQuery

In this article, we'll learn, step-by-step, how to build a simple jQuery plugin which sorts elements based on the values of their custom data attributes.

If you're curious about the end result, have a look at the corresponding CodePen demo:

See the Pen Simple jQuery Plugin for Sorting Elements by SitePoint (@SitePoint) on CodePen.

Note: This article assumes you have a basic understanding of flexbox, as well as how to develop jQuery plugins. If you aren't familiar with these topics, be sure to check out the links.

Accessibility Concerns

To build our plugin, we'll take advantage of flexbox's power.

By default, flex items are laid out according to their source order. But, by using the order property, we're able to change their order inside the parent flex container. Items with lower order values appear first. See an example below:

See the Pen Flexbox's "order" Property by George (@georgemarts) on CodePen.

If there are more than one items with same order values, the order for these items depends on their source order.

Although the order property allows us to easily reorder elements, it comes with an accessibility limitation: it creates a disconnection between the source order and the visual order. To better understand the problem, take a look at this article (especially at the "Source Order vs. Visual Order" section).

So, before moving on to examine how to build our plugin, please note that it won't be accessible.

The Markup

To begin with, we define an unordered list with twelve list items:

<ul class="boxes">
  <li>
    <a href="#">
      Box1
      <div class="details">
        <span class="length">13M</span>
        <span class="price">670€</span>
      </div>
    </a>
  </li>

  <!-- more list items here -->

</ul>

Notice that inside each of our list items there is the .details element, which displays some information about the corresponding item. As we'll see in a moment, we'll also add custom HTML attributes to store this information.

Note: The .details element isn't really necessary. We only use it so as to have a better understanding of how the target elements are being sorted.

Next, we identify the attributes we want to sort by. In our project, these are the price and length attributes. With that in mind, we use their names to apply custom attributes (data-price and data-length) to our list items. The values of these attributes match the text values (only the numbers) of the .length and .price elements which are part of the .details element.

For example, here are the attributes for the first list item:

<li data-length="13" data-price="670">
  <a href="#">
    Box1
    <div class="details">
      <span class="length">13M</span>
      <span class="price">670€</span>
    </div>
  </a>
</li>

At this point, we specify the elements that will be responsible for sorting the list items. We use a <select> element to do this:

<select class="b-select">
  <option disabled selected>Sort By</option>
  <option data-sort="price:asc">Price Ascending</option>
  <option data-sort="price:desc">Price Descending</option>
  <option data-sort="length:asc">Length Ascending</option>
  <option data-sort="length:desc">Length Descending</option>
</select>

As you can see, all <option> elements (except for the first one) contain the data-sort attribute. The value of this attribute uses the following convention:

<option data-sort="price:asc">

So, as the value we have the attribute we want to sort by, followed by a colon along with either the “asc” or “desc” indicator.

CSS Styles

With the markup ready, let's add a few basic styles to our page. Specifically, we define the unordered list as a flex container and give list items width: 25%. Here are the associated CSS rules:

Continue reading %Quick Tip: User Sortable Lists with Flexbox and jQuery%

by George Martsoukos via SitePoint

Image Mask Effect with CSS & jQuery

An immersive transition effect powered by image masks and CSS transforms using jQuery.

by via jQuery-Plugins.net RSS Feed

The Dangers of Race Conditions in Five Minutes

A race condition is an undesired property of multithreaded code. It expresses that the program's outcome depends on a particular order of operations but that the underlying platform (in the case of Java, the JVM) does not guarantee that order. As a consequence the outcome is often fluctuating across runs as it depends on how exactly operations from different threads interleave. In Java, race conditions occur most often when multiple threads share and mutate the same object.

The only prerequisite for this article is a basic knowledge of threads.

Race Conditions

A Simple Example

Let's start with an example. Here I've implemented a Runnable that increments a shared counter ten thousand times:

class IncrementingRunnable implements Runnable {

    private final MutableInteger mutableInteger;

    public IncrementingRunnable(MutableInteger mutableInteger) {
        this.mutableInteger = mutableInteger;
    }

    @Override
    public void run() {
        for (int i = 0; i < 10_000; i++) {
            mutableInteger.increment();
        }
    }

}

Since a value of a standard Java Integer cannot be updated after it was created, I've implemented a simple MutableInteger class that has two methods:

• increment to increment its value
• getValue to get the result value.

class MutableInteger {

    private int value = 0;

    public void increment() {
        value++;
    }

    public int getValue() {
        return value;
    }

}

With this, we can pass the same counter to multiple threads that will increment it in parallel:

List<Thread> threads = new ArrayList<>();

// Variable to increment from multiple threads
MutableInteger integer = new MutableInteger();
// Run 10 threads to increment the same variable
for (int i = 0; i < 10; i++) {
    Thread thread = new Thread(new IncrementingRunnable(integer));
    thread.start();
    threads.add(thread);
}

// Wait until all threads are finished
for (Thread thread : threads) {
    thread.join();
}

System.out.println("Result value: " + integer.getValue());

(If you're not sure how Thread::start or join work, read this five-minute intro to threads.)

Since we have ten threads and every thread performs 10,000 increments, we might expect the final value to be 100,000. But the actual result may surprise you:

Result value: 61505

What is more astonishing is that the total sum is different every time the application is executed, but it is always less than 100,000.

How Increment Creates a Race Condition

To understand what happens here we need to cover how the increment operation works. You may think that it is an indivisible operation and does not have any intermediate states, but in reality, a CPU executes several low-level instructions like these:

//i++
$tmp = i; // Store value to a temporary storage
$tmp = $tmp + 1; // Increment value in the temporary storage
i = $tmp; // Write result value back

This does not cause any issues when only one thread is updating a counter. But when there are multiple threads they can step on each other's toes and execute those low-level operations in any order:

// T1 is Thread 1; T2 is Thread 2
T1: $tmp_1 = i;
T1: $tmp_1 = $tmp_1 + 1;
T2: $tmp_2 = i;
T2: $tmp_2 = $tmp_2 + 1;
T2: i = $tmp_2;
T1: i = $tmp_1;

In this particular example, threads 1 and 2 both load the same i, let's say 5, into their respective temporary variable. Hence, after incrementing both write 6 back but the desired result for two increments would have been 7.

This is why when we run our application the final result is always less than 100,000. An individual thread is not aware that there are other threads that are also incrementing the same number. As a result, the final outcome depends on which thread accesses memory in which order.

A Not so Simple Example

Continue reading %The Dangers of Race Conditions in Five Minutes%

by Ivan Mushketyk via SitePoint