Yuri Mikhin and Travis Turner over at Evil Martians implore us: Don’t wait, let’s use the browser Contact Picker API now. As I write, it’s only available essentially on Chrome for Android. But the spec exists and iOS also has an experimental flag for it. I’m an iOS guy so I flipped it on. I actually didn’t even know you could do that! (Settings > Safari > Advanced > Experimental Features).
text-wrap. Now if you’re in a browser that supports it…
The
selectmethod will show users a modal UI to select contacts, and it will then return aPromise. If the promise resolves, it will return an array (even if only one contact was selected) filled withContactInfointerfaces.
I’m sure you can imagine it. You tap a button or something, and it launches a contact picker. You select a contact from your device’s contacts. It returns data from those contacts, like names, emails, and phone numbers.
Not every app needs it, but I imagine a lot could make use of it (particularly in a progressive enhancement style). Does your app have any kind of invite or sharing UI? You could use it there. I’m thinking of something like Figma’s share modal:
I’m just on my own to write in email addresses in there. If this was Google Docs, well, they have the distinct advantage that they already have a contact list for you thanks to the likelihood that you also use Gmail and keep some form of your contacts there. But very few of us are Google. The Contact Picker API levels that playing field!
I gave the Evil Martians demo a spin, and it works great.
If there were only some kind of easy-to-use web app that makes it really easy to play with new APIs like this and get a feel for them and save them for later reference. Some kind of playpen for code.
I think I was bitching about text-wrap: balance; the other day. Just like me, to be given such a glorious new property that helps makes headlines look better across the web and find something to not like about it. The balance value takes multi-line text and makes all those lines as roughly even as it can. I feel like that looks pretty good for headlines, generally. The kicker is that “balancing” isn’t always what people are looking to achieve, and what they really want is just to avoid an awkward orphan single word from wrapping down onto the next line.
Adam Argyle said to me: have you seen text-wrap: pretty;?
- No, I have not.
- Awww,
prettyis a great keyword value in CSS.
I googled it and found Amit Merchant’s quick coverage. Then I set about making a demo and trying it out (only works in Chrome Canary until 117 ships to stable).
See what I mean about balance above? There is just far too much space left over above when all I really wanted to do was prevent the single-word orphan. Now pretty can prevent that.
That’s so generically useful I might be tempted to do something like…
p, li, dt, dd, blockquote, .no-orphan {
text-wrap: pretty;
}… in a “reset” stylesheet.
People reflecting on formative moments in their lives usually makes for a good story. And especially relatable when they are like: “… and that’s how I became a nerd.” That’s what happened when Alexander Miller’s dad gave him some paper:
When I was a kid, my dad gave me a piece of paper with a grid printed on it. It consisted of larger squares than standard graph paper, about an inch in size. It was basically a blank chessboard.
GRID WORLD
I didn’t become an incredible code artist like Alexander, but I can still relate. My first really “successful” programs were grid-based. First, a Conways’ Game of Life thing (that I’m still a little obsessed with) and then a Battleship clone (like Alexander’s father). These were absolutely formative moments for me.
Do you know one of the major JavaScript frameworks better than another? I bet you do, don’t you? You’re a Svelte groupie, I can tell.
Component party is a website that shows you how to do the basic and important stuff in each major framework (React, Svelte, Vue2/3, Angular, Lit, Ember, and several more). Very clever, I think! It’s helpful to know one of the frameworks so you can verify that’s how you would have done it there, then see how it works in another framework. Like if you need to loop over data in React, you probably end up doing a .map() thing, but in Svelte there is #each, where in Vue it’s a v-for attribute. I don’t work across different frameworks enough to have all this memorized so a big 👍 from me for making a useful reference here.
“Sometime this fall (2023)” is all we know for the release date of macOS Sonoma. Normally operating system releases aren’t that big of a deal for web designs and developers, who are more interested in browser version releases. But Sonoma has a trick up it’s sleeve.
With macOS Sonoma, Apple goes all-in on the concept of installable web apps. They’re highly integrated in the overall macOS experience and don’t give away their web roots by not showing any Safari UI at all.
Thomas Steiner, Web Apps on macOS Sonoma 14 Beta
Installable web apps, you say? Like… PWAs? (Progressive Web Apps). The point of PWAs, at least in my mind, is that they are meant to be real competitors to native apps. After installation, they are clickable icons right there next to any other app. Level playing field. But to become installable, there was kind of a minimum checklist of requirements, starting with a manifest.json.
The word from Apple is that there are literally zero requirements for this. You can “Add to Dock” any website, and it’ll work. I guess that means it’s possible to have a docked app that just entirely doesn’t work offline, but 🤷♀️.
Sites installed this way do respect all the PWA mechanics like one would hope! Sites with a manifest won’t show any Safari UI at all. I don’t think there are install prompts offered yet, so users would have to know about this and/or find the menu item. There are prompts though in regular Safari if users go to a website that is already installed (to “Open” the “app”).
Overall, apps installed this way look pretty nicely integrated into the OS. But I also agree with Thomas’ wishlist, all of which seem like they would make things much better still.
The post Chris’ Corner: Hot New Web Features appeared first on CodePen Blog.