Liked this visual vocabulary chart by FT a lot. PDF version is at Github. MIT licensed.
Category: Technical
Search Blogs
While thinking about search functionality aspect of WordPress Atlas, I was reminded of Search Hat and MSN SearchPoint ideas which I blogged about in 2004. MSN team seemed receptive but Google implemented it first then dropped it for various reasons.
In context of the Atlas, the idea is best described as as Search Blog. But, ironically, this term is difficult to search for obvious reasons. John Battelle even uses it in his blog’s name. Maybe someone will come up with a better name.
Search Blog is a blog about other blogs/websites. It’s primary function is to provide a search context. Simple, seemingly familiar yet distinct in usage. Don’t remember if Yahoo directories allowed each directory to be used as search context. It’s an obvious idea in hindsight. Jury is out on whether it’ll be popular however.
Atlas needs to be a Search Blog as well.
WordPress Atlas
Disclaimer: This is a personal side-project, not an official Automattic project, and in no way reflects official plans.
In Beyond Future of WordPress Platform, I wrote:
WordPress Atlas – uses data-science to pull blogs and websites into neighborhoods, towns, and cities based on topics, interests, and relations. Intention is to use real world metaphors to make discovery and sense of community more natural and explicit than, say, blogroll or news aggregators.
I now think the Atlas without data-science. How?
Using what we already have: blogs, bloggers, blogging tools, and WP community.
So WordPress Atlas is just a loosely-coupled network of blogs using a new class of themes, themes that displays blog contents in a way that looks map-like. Atlas blog contents are information about other blogs. Yes, Atlas blogs are like Linklogs but more visual-centric.
What does it look like? Rather what does this reminds you of?
Pinterest! It’s a place where people collect bookmarks presented as cards, through which people can chat with others, etc. Those cards are place-like when laid out.
But Pinterest layout is not static so they change which is not at all map like. Value of maps is in stable visual memory. Buildings and streets may come and go over time but not overnight or by mere window resize.
So Pinterest-like but layed-out in a virtual page over which visitors will zoom and pan over like Google Map.
Who will build Atlas blogs and will they come? I’ll answer this with another question: who builds and maintains those Awsome-xxxx lists on Github and do people use them?
Visual layout is an essential differentiator. Other-wise textual awesome-list is better. It’s a difference that gets emphasized each time user navigates from a blog to a map it links to: destination map will knows where, in its layout, the referring blog is and display the neighborhood around that blog, maybe with some fancy transition animation.
Atlas pages contain cards laid out in visually memorable, relatively compact patterns. These cards could not only be about individual blogs but blog pages, people (like designers and developers relevant to the neighborhood) and plugins.
Notion of neighborhood helps with discovery and creates a sense of community.
Destinations, what cards are about, can be in multiple maps, and maps of same neighborhoods can exist at different depth and filtering (like tourist maps) as well as languages.
Atlas layout style is dictated by theme designer with vary capabilities. Some would allow streets to be named, like Fashion street, on which cards for major vendors could be placed and backstreets for boutique shops. Maybe specialty shops will form their own specialized clusters, like Latex Cave. When a neighborhood gets too crowded, they can be broken out to their own map linked from original neighborhood. Expansion is no problem. Real Estate value may or may not be controlled. Depends on map creator’s revenue model.
Experiments to do: Build a prototype Atlas theme then use it to create an aggregation blog using the theme. Use existing standards like Image Map. Search should include all the blogs on a page as user would expect. This adds value beyond mere link directory role. Get feedback.
Pragmatic Redux: Connecting to React
There is a lot to like or dislike about Redux but let’s say the decision to use it has been made and now you need to understand Redux for professional reasons. This post is a good place to start because you first question is most likely how does my component get its data and react to changes in the data?
Redux connects to React by wrapping it – hype-word is higher-order component but, in the end, what you get after calling react-redux function connect is a React component placed inside another to enhance or encapsulate.
Redux data is provided as properties by the wrapper component. So called mapStateToProps, first function you pass to connect, decides which part of Redux store should be passed as properties to the wrapped component.
Changes to are detected by the wrapper component which listens to Redux store. When changes occurs, wrapper component re-renders the wrapped component. Concerns over irrelevant changes and redundant renders should be ignored in the beginning as React itself can soak up a lot of inefficiencies and Redux provides plumbings you can use to reduce unnecessary updates. There are limits, however, and it’s not that hard to run into them as your application grows.
At this point, two obvious and related questions arise which are:
- How does the wrapper component discover Redux store?
- How does the wrapped component dispatch actions?
Redux store is provided via context – use react-redux‘s Provider component to set that up. Wrapped component, however, don’t usually need direct access to Redux store as data is passed as properties and actions are dispatched via functions which are also passed as properties.
Use mapDispatchToProps, second function you pass to connect, to add functions that create and dispatch actions without having to declare contextTypes. It’s a minor yet useful feature.
Keeping Redux out of React is harder than it looks. To dispatch actions, component has to know about dispatching methods it received as props. If actions change, dispatching methods and reducers need to change. Changes to component, Redux state, actions or reducers will often require changes to others. It’s possible but the cost of creating reusable Redux connected React component is much higher than advertised in my opinion.
Beyond Future of WordPress Platform
This is how I envision WordPress platform evolving beyond what I outlined in Future of WordPress Platform. The vision is essentially a projection of what I had in mind with Teleport Network venture but did not get a chance to realize (old chicken and egg problem). As to why I’m doing this, it’s because WordPress has the scale and unrealized ideas are like orphans.
the vision starts with:
WordPress Studio – is the client-side application I outlined in the previous post on the subject. It’s not unlike VSCode in that much of its functionalities are derived from plugins. Plugins should be stackable so the platform itself can be extended to support key features like theming and financial transactions. Theme support, for example, needs HTML and PHP generators which in turn may need digital signature support to secure assets pushed to server. End goals are to a) reduce dependence on server-side changes to add features (a la serverless mindset), and b) create a vehicle to drive richer user experiences.
followed by:
WordPress Market – is a collection of studio plugins working in conjunction with backend services and UX-level plugins to provide rich mix of communication tools and integrated financial services. Intention is to bridge the difference between a collection of webpages and a retail store in RL. It must offer much more than in-page chatbox, even beyond what Slack offers today.
then ends with:
WordPress Atlas – uses data-science to pull blogs and websites into neighborhoods, towns, and cities based on topics, interests, and relations. Intention is to use real world metaphors to make discovery and sense of community more natural and explicit than, say, blogroll or news aggregators.
To me, Facebook is a mega-city of people just talking and exchanging photos, funnies, and insults all day everyday. I don’t care if Facebook is federated but I do care how drab everything is because you have to use what they offer and no more. I think WordPress can offer a way out of current conundrum without restarting from scratch.
Future of WordPress Platform
While restoring my old blog post, I started thinking about WordPress as a platform. WYSIWYG web site creation services like Wix, Weebly, Squarespace and others are gaining attention and growing fast but they are more services than platforms. WordPress on the other hand has an immense collection of plugins and healthy community of developers and designers behind it.
Main problem I see with WordPress as a platform is that its plugins run on the server-side, creating a compelling long-term incentive to host your own WordPress server to take advantage of features offered by those plugins instead of using WordPress.com. Allowing user-chosen plugins to be installed on WordPress.com creates a gaping security risk and management headaches.
I think the answer lay with WordPress.com desktop app which currently doesn’t do much beyond what browser version offers and seemingly neglected. Key idea is to add client-side plugins support to the app, plugins that leverage WP REST-API to add features to WordPress-based websites.
There could be several types of client-side WordPress plugins:
- Interfaces – WYSIWYG editors, media libraries, assistants, etc
- Generators – generates and updates static assets to be added to the website or injected into webpages.
- Augmenters – marks, corrects, suggests, and injects.
- Monitors – tracks changes and stats.
- Mediators – monitors, controls, and routes posts, comments, transactions, etc.
- Services – client-side workers
- Bridges – integrates with third-party services and platforms
And adding Docker support will allow servers to run in client-side sandboxes for use by the desktop.
Result would be a host-neutral platform, one that can address needs of both WordPress.com sites as well as self-hosted sites although it will significantly reduce the need to host your own.
What is JWT?
This post explains what JWT is, without getting into technical details you don’t need to know. Intention of the post is to dispel some harmful misconceptions.
In short, JWT is just a piece of data signed by someone. It doesn’t do much as-is but it’s a key building block useful in many applications.
What JWT Looks Like
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ
If you look carefully, it’s basically three gibberish text separated by a period. Th role each part plays are:
Header.Payload.Signature
They look gibberish because they are encoded. Important part is the payload. Rest is there to describe (header) and protect (signature) the payload.
What Each Part Does
Header primarily describes (using JSON) how the Payload was signed so the Signature can be verified.
{
"alg": "HS256",
"typ": "JWT"
}
Payload is a collection of name-value pairs presented as JSON like this:
{
"sub": "1234567890",
"name": "John Doe",
"admin": true
}
Signature protects both the Header and the Payload so that neither can be changed without detection.
Key Points About JWT
- JWT doesn’t say anything meaningful about its sender, recipient nor signer as-is.
- JWT is not encrypted as-is.
This is not to say JWT can’t but they have to be added. Allow me to go into a bit more detail on each points.
JWT doesn’t say anything meaningful about its sender, recipient nor signer as-is.
JWT typically includes some info on its signer so the signature can be verified but that only proves it was signed by someone who can prove they signed it. Unless the signer is known that is. How one know calls for relationship and/or infrastructure.
Same goes for sender and recipient. To verify sender or recipient, more has to be built-on top of JWT.
JWT is not encrypted as-is.
JWT is typically sent unencrypted over a secure channel of communication to a recipient but it may even be printed plainly using QR-code in newspapers. If you need to protect the token, encrypt it whole in way that only the recipient can decrypt it. If only part of the payload needs to be protected, then encrypt just the value.
Follow up series of posts will discuss how to build with JWT to solve some common problems like protecting APIs or delegated authorization in a mobile app without issues OAuth has. Stay tuned.
Cinemetrics
Cinemetrics is a promising example of Identicon IMO. Similar efforts have been made audio clips.
Cinemetrics aims to create a visual “fingerprint” for film using the editing structure, color, speech and motion.
Design challenge in generating interesting ‘fingerprint’ depends largely on the target audience. Multimedia production is a very iterative process resulting in many variations and combinations so, if the target audience are film editors, challenge is in finding ways to emphasize difference without sacrificing similarity.
Identicon and Robohash
This post is a dump [for archival purpose] of exchange between Colin Davis, creator of Robohash, and I that took place in context of a Hacker News about Robohash.
Colin:
Identicons are a great idea, I really love them.. They’re a good solution to a gut-check “Something is wrong here..”
Sort of like a SSH-fingerprint.
The problem I’ve had with them is that they’re generate not all that memorable. Was that triangles pointing left, then up, or up then left?
This is my attempt at addressing that problem for my own new project, but I’d love to see what you build! If you want to use these images, feel free. They’re CC-BY, so they’re open to the world now 😉
Don:
Re ‘not all that memorable’, that’s because identicons were originally designed for ‘distinguishing’ and ‘matching’ data, not ‘memorizing’.
Abstract geometric identicons like my original implementation as well as variations used at WordPress and StackOverflow are, while nearly impossible to remember, distinguishable in a pile which comes in handy when distinguishing the ‘voice’ of individuals in a long thread of comments.
To use identicons as permanent identity, one has to ‘identify’ with their identicon. We can identify faces of our friends because we shared memories with them, stories if you will.
So robotic identicons like yours can be made more memorable if users had some ways to create a story they can associate with it like ‘blue viking with left arm missing’, etc.
Colin:
That makes a lot of sense. I wasn’t trying to be disparing. It’s a great idea, and very helpful, I just felt like it could go in a slightly different direction for this specific use-case (Public Keys).
Don:
I think an interesting way to apply identicon to certs is to map each cert attributes to an ‘attribute’ of identicon, visualizing attributes.
What is Identicon?
Word identify has two meaning:
- Establish or indicate who or what (someone or something) is.
- Recognize or distinguish.
I chose the name Identicon with second meaning in mind to convey that Identicons’ intended applications are in helping users recognize or distinguish textual information units in context of many.
Textual Data Problem
Human eyes have evolved to recognize individual objects out of a group by noticing visual differences. Unfortunately, textual data are visually similar.
While many different typographic features and techniques have been invented since writing was invented, most of them are for free-form text. Additionally, list and table text layout lack the irregular features free-form text have, like line ends and paragraphs, to use as landmarks.
Icon Solution
Icons do add the necessary visual differences to textual data. Only problem is that icons are typically designed by hand or, in case of avatars, photos or pictures have to uploaded.
Identicon = Generated Icon?
One might say Identicons are simply generated icons. The first implementation of Identicon used salted hash of IP address to generate 9-block colored icon for each blog commenter. Most popular use of Identicon today remains generated iconic avatars.
I think it’s a bit more. Certainly, generated part is required. But the icon part is unnecessarily restrictive unless colored circle or box can be called an icon.
Don Park's Weekly Habit 