Subscribe: Snook.ca
http://www.snook.ca/jonathan/index.rdf
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
curation  day  devices  don’t  event  events  experience  experts  good  grid  homekit  hub  new  people  there’s  week  wink  work 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Snook.ca

Snook.ca



Tips, Tricks and Bookmarks on Web Development.



 



Curation

Wed, 13 Dec 2017 18:39:27 +0000

Personal curation is one way in which we create good experiences. We choose how to use our time, choose the friends we have, and choose the things we collect.

Feeling dispassionate about my experiences on Twitter, I decided to spend some time curating it. Like an overgrown garden, I needed to cut back the branches and pull out some weeds.

I mute keywords. I mute some people. I turn off retweets. (People often retweet different content than they produce.) I switched to Tweetbot from the native Twitter experience to help facilitate some of these changes.

On Facebook, I realized that I don’t have the same ability to curate. All I can do is tell it to show me less of “posts like this” and hope it figures out what I meant by that.

In the name of holy engagement, the native experience of products like Twitter, Facebook, and Instagram are moving away from giving people the ability to curate. They do this by taking control away from you, the user. By showing what other people liked, or by showing recommendations, without any way to turn it off, they prevent people from creating a better experience for themselves.

Curation as Expertise

I think curation, in and of itself, is something that experts do. Beginners need time to acclimate and learn what they do and don’t like about a particular thing. With art, for example, we need to sample a wide variety of works before we know what we prefer and can curate for ourselves. The same applies for wine, whisky, or whatever wonderful object you wish to collect.

For beginners, services push the act of curation as a way to educate, build interest, and create engagement. Like getting a flight of beers every time you go to a restaurant. It’s an important process to learn what your preferences are.

For experts, though, this forced act of curation is intrusive. When I order my Rochefort 8, I don’t want the waiter to keep dropping IPAs at my table. Curation is an active task that is often treated as (and seen as) an act of intrusion to those that have already gone through a lot of curation. It sours the experience.

And to that end, many services are geared towards the beginner. Getting new people onto a platform and getting them engaged is how they make their money. An advertising revenue-driven platform rarely caters their experience to the experts. A platform, however, can create an ecosystem that is friendly to experts.

Twitter does this (both well and poorly) via their API. Third-party apps like Tweetbot and Twitterrific give experts the tools for curation.

Midnight in the Garden of Good and Evil

Many services, with their walled gardens, don’t let you pull out the pruning sheers. As a result, people are leaving these services. Maybe not in droves yet and maybe not enough to offset the new users coming in but enough.

I believe it is important that platforms consider people at all points in their journey—from onboarding all the way to being experts.




Calendar with CSS Grid

Fri, 08 Dec 2017 20:59:34 +0000

Laying out events on a calendar can be somewhat tricky. Many years ago, I had a client project where I needed to do a calendar similar to Google Calendar. I ended up using bitwise operators to figure out if there was room to put an event on a particular line. If there’s no room, it placed the event on the next available line. There’s a lot of looping involved just to place an event on the calendar. With CSS Grids, I wondered if I could take advantage of its auto-placement to accomplish the same thing. width="560" height="315" src="https://www.youtube.com/embed/GD1IKgrWTgU?rel=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen> The HTML Of course, the first thing to worry about is the HTML. How should I mark up my events? Here’s what I ended up going with:

1

Class
Interview
Each week has its own container and each day has its own container. Within each day, we have a heading and then a list of events. Why not use an actual list? A definite possibility. I tend to only go with a list if I think I’m going to normally have more than a couple items. I don’t want to overload people with too much information. (But this is conjecture. I should probably ask a bunch of people who use screen-readers.) The CSS I make each week a grid with each day taking an equal amount of space. .week { display:grid; grid-template-columns: repeat(7, 1fr); grid-auto-flow: dense; grid-gap: 2px 10px; } Each week is its own grid because I need all the events to naturally flow into new rows. If the entire month was one big grid, it’d be difficult to flow events within a single week. With Grid, we have a parent element that declares the grid and the child elements that are part of the grid. In this case, that would be the .day. We don’t want that part of the grid. We want its contents to be part of the grid. Therefore, I set the day to display:contents. Unfortunately, display:contents only works in Chrome (with experimental features turned on) and Firefox. Womp womp. If we wanted to broaden support, we’d have to remove our day wrappers. (This would work fine since they don’t really do anything anyways.) Getting Days on the First Row The day numbers should all be on the first row, so we specify that with grid-row-start. .day-label { grid-row-start: 1; } Now, because we specified grid-auto-flow: dense; on our grid, all of the events will just find a spot where it can fit. Without that, each event is placed after the one before it, regardless of whether there’s room somewhere earlier in the grid. And not a lick of JavaScript to do this! Spanning Days The next piece to this is having an event span over multiple days. I opted to use a parameter to do this. Thus, anytime an event needs to span more than a day, a data-span attribute is added to the element. The CSS then uses the span # syntax to span over a number of grid cells. [data-span="1"] { grid-column-end: span 1; } Keep in mind that if an event spans beyond the bounds of your 7 column grid, it’ll create new columns to fit in. (This’ll likely create some display side effects that you don’t want.) James Finley went further and used CSS Custom Properties in his version. .event { --span: 1; background-color: #CCC; grid-column-end: span var(--span); } Doing this, there’s less code in the CSS. In the HTML, you now need to specify an inline style instead of the data attribute.
Start Day Now that we have the events spanning the correct number of days, we also need the events to display as starting on the right day. The grid auto-placement will try to just find the first available box [...]



Quiet Time

Wed, 22 Nov 2017 00:30:39 +0000

Unbelievably—at least, to me—I’ve been speaking at conferences for over 11 years now.

I’m finding it difficult not to be self-congratulatory in recognizing that I’ve been doing it so long.

I still remember my first talk at Webvisions. I had a full slide deck of JavaScript tidbits to cover. I don’t think I looked up from my computer once as I delivered my talk. I was nervous and wholly unsure of what I was doing.

All these years later, I still get nervous but I learned to look up from the computer and talk to the audience.

I’m not sure that I ever became a great speaker but I think I managed to become a good speaker. I enjoyed sharing my experiences with whatever it was that I had been working on in hopes that it might spark an idea in someone else.

I’ve seen our industry fill with highly qualified, passionate, and excited people clambering for a chance to speak. There’s nothing I have to say that someone else isn’t already saying and they’re probably saying it better than I am.

For that reason among others, I’ve decided to take an extended break from public speaking. I’m in need of some quiet time.




Smart Home

Wed, 30 Aug 2017 20:33:18 +0000

A couple months ago, I bought a new car. However, I realized after the purchase that the car didn’t have a built-in garage door opener like my old car had. The new car has Apple CarPlay. I tried to use Siri in the car to open the garage door but to no avail. To which, I thought, maybe I should by a HomeKit powered garage door opener! This idea opened the floodgates of research into the world of having a “smart home”. I started buying smart switches and smart lights and smart thermostats and, wow, is this stuff complicated. Constraints I’m a fan of being able to easily move between ecosystems. I have Windows and macOS. I have Android and iOS. There’s voice control on the desktop, on mobile, and as a standalone device. Can I build a system that works across all of these? The short answer is: no. Long answer: we can come pretty damn close and maybe that’s okay. The other requirement I had was that anybody in the house shouldn’t necessarily need something complex to work the lights. I shouldn’t have to get them to install an app to be able to interact with the house. Not a terribly difficult requirement, per se, but there are some considerations here. How does it work? In the most vaguest terms, you have a device (light bulb, light switch, outlet, or whatever) that can communicate and be controlled by another device (hub, phone, voice device, or whatever). The trick is to get all the devices talking together. Communication The first thing to consider is how everything will communicate with each other. Here are just a few of the more popular ways: Z-wave Zigbee TCP/IP Bluetooth HomeKit Insteon Pick the wrong one and you might find yourself limited. I bought some Hue lights at first. They worked with HomeKit but I could also hook them up to Google Home. And as it turns out, a bunch of other stuff, too. Then I bought a switch that was HomeKit-enabled. Sadly, it only worked with HomeKit and nothing else. I had to pull it out and put something else in its place. Z-wave is probably the most popular with multiple hubs and devices that work on it. I decided to go that route since it had the best support. Again, with some caveats. Z-wave hubs like Wink and SmartThings don't work with HomeKit. They work with Alexa and Google Home, though. To fix the HomeKit integration, there’s an open source project called Homebridge that acts like an accessory that will sync all your devices to Homekit. You can run it on a Raspberry Pi, too, which is fantastic. Hubs Once you've figured out what protocol things will communicate with, you may need a hub. I say "may" because if you pick HomeKit, for example, then there's no hub. For pretty much everything else, there is. If you go the Hue lights route, there's a Hue hub. If you go Z-wave or Zigbee or Insteon, there's a hub that'll work for each of those. Since I went Z-wave, the two most popular hubs are Wink and SmartThings. I've heard good things about SmartThings, including how good the API is (if you're interested in programming). I went with Wink out of convenience; my local HomeDepot had them in stock. The Wink hub has an API, too. Hubs don't have a user interface. You'll need your phone or tablet to connect to the hub to make any changes to your configuration, such as adding or removing devices. The Wink app is pretty good for adding new devices from many different manufacturers with step-by-step instructions. Wink and SmartThings also support devices that use Zigbee or TCP/IP. With either of those hubs, you're pretty much golden. Devices Once you have a hub, now you need devices! Having decided on a hub, picking devices might seem like the easy part. Does it communicate with the hub? Yes? Great! But not so fast. Devices are a big part of the user experience. When somebody wants to turn on a light, how do they do it? How does it feel? Hue Hue lights, for example, sound fantastic. Great integration with pretty much everything. Ability to chang[...]