Every letter in this “font” by Davor Suljic is a single div and drawn only with border. That means employing some trickery like border-radius with exotic syntax like border-radius: 100% 100% 0 0 / 37.5% 37.5% 0 0; which rounds just the top of an element with a certain chillness that works here. Plus, using pseudo-elements. I love all the wacky variations with colors, shadows, and border styles, leaning into the limits of CSS.
Drawing things with CSS has long fascinated people. Icons are a popular choice (famously, Nicolas Gallagher’s Pure CSS GUI icons from 2010), since we can draw so many shapes with CSS without even needing to lean on the all-powerful clip-path.
But as Lynn Fisher has taught us, a single div is barely a limitation at all.
Direct Link to Article — Permalink
The post CSS Border Font appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
(This is a sponsored post.)
If you want to put Next.js on Netlify, here’s a 5 minute tutorial¹. One of the many strengths of Next.js is that it can do server-side rendering (SSR) with a Node server behind it. But Netlify does static hosting not Node hosting, right? Well Netlify has functions, and those functions can handle the SSR. But you don’t even really need to know that, you can just use the plugin.
Need a little bit more hand-holding than that? You got it, Cassidy is doing a free Webinar about all the next Thursday (March 4th, 2021) at 9am Pacific. That way you can watch live and ask questions and stuff. Netlify has a bunch of webinars they have now smartly archived on a new resources site.
Direct Link to Article — Permalink
The post Next.js on Netlify appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
In this week’s roundup, we highlight a proposal for a new <popup> element, check the use of prefers-reduced-motion on award-winning sites, learn how to opt into cross-origin isolation, see how WhiteHouse.gov approaches accessibility, and warn the dangers of 100vh.
Let’s get into the news!
<popup> element is in developmentOn January 21, Melanie Richards from the Microsoft Edge web platform team posted an explainer for a proposed HTML <popup> element (the name is not final). A few hours later, Mason Freed from Google announced an intent to prototype this element in the Blink browser engine. Work on the implementation is taking place in Chromium issue #1168738.
A popup is a temporary (transient) and “light-dismissable” UI element that is displayed on the the “top layer” of all other elements. The goal for the <popup> element is to be fully stylable and accessible by default. A <popup> can be anchored to an activating element, such as a button, but it can also be a standalone element that is displayed on page load (e.g., a teaching UI).
A <popup> is automatically hidden when the user presses the Esc key or moves focus to a different element (this is called a light dismissal). Unlike the <dialog> element, only one <popup> can be shown at a time, and unlike the deprecated <menu> element, a <popup> can contain arbitrary content, including interactive elements:
We imagine
<popup>as being useful for various different types of popover UI. We’ve chosen to use an action menu as a primary example, but folks use popup-esque patterns for many different types of content.
Earlier this week, AWWWARDS announced the winners of their annual awards for the best websites of 2020. The following websites were awarded:
All these websites are highly dynamic and show full-screen motion on load and during scroll. Unfortunately, such animations can cause dizziness and nausea in people with vestibular disorders. Websites are therefore advised to reduce or turn off non-essential animations via the prefers-reduced-motion media query, which evaluates to true for people who have expressed their preference for reduced motion (e.g., the “Reduce motion” option on Apple’s platforms). None of the winning websites do this.
/* (code from animal-crossing.com) */
@media (prefers-reduced-motion: reduce) {
.main-header__scene {
animation: none;
}
}An example of a website that does this correctly is the official site of last year’s Animal Crossing game. Not only does the website honor the user’s preference via prefers-reduced-motion, but it also provides its own “Reduce motion” toggle button at the very top of the page.
Cross-origin isolation is part of a “long-term security improvement.” Websites can opt into cross-origin isolation by adding the following two HTTP response headers, which are already supported in Chrome and Firefox:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-originA cross-origin-isolated page relinquishes its ability to load content from other origins without their explicit opt-in (via CORS headers), and in return, the page gains access to some powerful APIs, such as SharedArrayBuffer.
if (crossOriginIsolated) {
// post SharedArrayBuffer
} else {
// do something else
}The new WhiteHouse.gov website of the Biden administration was built from scratch in just six weeks with accessibility as a top priority (“accessibility was top of mind”). Microsoft’s chief accessibility officer reviewed the site and gave it the thumbs up.
The website’s accessibility statement (linked from the site’s footer) declares a “commitment to accessibility” and directly references the latest version of the Web Content Accessibility Guidelines, WCAG 2.1 (2018). This is notable because federal agencies in the USA are only required to comply with WCAG 2.0 (2008).
The Web Content Accessibility Guidelines are the most widely accepted standards for internet accessibility. … By referencing WCAG 2.1 (the latest version of the guidelines), the Biden administration may be indicating a broader acceptance of the WCAG model.
100vw value can cause a useless horizontal scrollbarOn Windows, when a web page has a vertical scrollbar, that scrollbar consumes space and reduces the width of the page’s <html> element; this is called a classic scrollbar. The same is not the case on macOS, which uses overlay scrollbars instead of classic scrollbars; a vertical overlay scrollbar does not affect the width of the <html> element.
macOS users can switch from overlay scrollbars to classic scrollbars by setting “Show scroll bars” to ”Always” in System preferences > General.
The CSS length value 100vw is equal to the width of the <html> element. However, if a classic vertical scrollbar is added to the page, the <html> element becomes narrower (as explained above), but 100vw stays the same. In other words, 100vw is wider than the page when a classic vertical scrollbar is present.
This can be a problem for web developers on macOS who use 100vw but are unaware of its peculiarity. For example, a website might set width: 100vw on its article header to make it full-width, but this will cause a useless horizontal scrollbar on Windows that some of the site’s visitors may find annoying.
Web developers on macOS can switch to classic scrollbars to make sure that overflow bugs caused by 100vw don’t slip under their radar. In the meantime, I have asked the CSS Working Group for comment.
The post Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
In every project where I use Tailwind CSS, I end up adding something to it. Some of these things I add in every single project. I’ll share these with you, but I’m also curious what y’all are adding to your tailwind.css files.
I’ll start with myself. In each project:
-webkit-tap-highlight-color.env(safe-area-inset-bottom).Allow me to elaborate on all three.
-webkit-tap-highlight-colorAndroid highlights taps on links. I’m not a fan because it obscures the element, so I turn it off for a nicer experience.
@layer base {
html {
-webkit-tap-highlight-color: transparent;
}
}@layer is a Tailwind directive. It helps avoid specificity issues by telling Tailwind which “bucket” contains a set of custom styles. It’s like pretending the cascade doesn’t exist, so there’s less to worry about when it comes to ordering CSS.
Simply removing the tap highlight color might trigger an accessibility issue since that hides an interactive cue. So, if you go this route, it’s probably a good idea (and I’m still looking for research on this if you have it) to enable :active to define provide some response to those actions. Chris has a snippet for that.
env(safe-area-inset-bottom)This utility class handles the bottom bar on newer iPhones without the “Home” button. Without it, some elements can fall under the bar, making them unreadable and tough to tap.
@layer utilities {
.pb-safe {
padding-bottom: env(safe-area-inset-bottom);
}
}I love using interpuncts with unordered lists. I won’t penalize you for looking that up. We’re basically talking about the bullet points in unordered lists. Tailwind removes them by default via Normalize. I smuggle interpuncts into each and every one of my projects.
Here’s how I go about it:
@layer utilities {
.list-interpunct > li::before {
content: '・';
display: inline-block;
float: left;
margin: 0 0 0 -0.9em;
width: 0.9em;
}
@media (min-width: 992px) {
.list-interpunct > li::before {
margin: 0 0 0 -1.5em;
width: 1.5em;
}
}
}We also now have ::marker to do the same thing and it’s a little easier to work with. Why am I not using it? I prefer to have control of the spacing between interpuncts and the text and I just don’t get that with ::marker. But that’s just me!
Alright, I shared what I add to all of my Tailwind projects, so now it’s your turn. What do you add to Tailwind in your projects? Is there something you can’t do without? Let me know in the comments! I’d love ideas to start incorporating into other projects.
The post The Things I Add to Tailwind CSS Right Out of the Box appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
A wonderful post by Josh that both introduces CSS transitions and covers the nuances for using them effectively. I like the advice about transitioning the position of an element, leaving the original space it occupied alone so it doesn’t result in what he calls “doom flicker.” Six hundred and fifty years ago I created CSS Jitter Man to attempt to explain that idea.
The interactive stuff is really neat and helps explain the concepts. I’m a little jealous that Josh writes in MDX — meaning he’s got Markdown and JSX at his disposal. That means these demos can be little one-off React components. Here’s a thread that Josh did showing off how valuable that can be.
Direct Link to Article — Permalink
The post An Interactive Guide to CSS Transitions appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Tobi Reif notes how the position of custom fonts set at very large font sizes can be super different, even in the same browser across operating systems. The solution? Well, you know how there are certain CSS properties that only work within @font-face blocks? They are called “descriptors” and font-display is a popular example. There are more that are less-supported, like ascent-override, descent-override, and line-gap-override. Chrome supports them, and lo-and-behold, they can be used to fix this issue.
I really like the idea that these can be used to override the “metrics” of local (fallback) fonts to match a custom font you will load, so that, when it does, there’s little-to-no-movement. I detest FOUT (I know it’s theoretically good for performance), but I can swallow it if the text swap doesn’t move crap around so much.
Direct Link to Article — Permalink
The post Ensuring the correct vertical position of large text appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Robotics took a small step into the wild world of SPACs this week, as Berkshire Grey announced its plan to go public by Q2. Setting aside some of the bigger issues with using the reverse merger route we’ve discussed plenty, BG is an ideal candidate for this next major step for a number of reasons.
First, the company’s got a track record and a ton of interest. I visited their HQ early last year, before the country shut down. Their plans were already fairly aggressive, with the wind of a recently raised $263 million Series B at their back. Retailers everywhere are already looking to automation as a way of staying competitive with the ominous monolith that is Amazon.
The mega-retailer has already acquired and deployed a ton of robots in fulfillment centers across the world. The latest number I’ve seen is 200,000. That comes from early 2020, so the number has no doubt increased since then. As Locus Robotics CEO Rick Faulk told me the other week, “There are investors that want to invest in helping everyone that’s not named ‘Amazon’ compete.” As with so many things these days, it’s Amazon versus the world.
Image Credits: Berkshire Grey
Beyond its knack for raising money by the boatload, Berkshire Grey is the company you go to when you’re looking to automate a factory from the ground, up. The company says current warehouse automation is somewhere in the neighborhood of 5%. It’s a figure I’ve seen tossed around before, and certainly points to a ton of opportunity. BG’s offering isn’t lights-out automation, but it’s a pretty full-feature solution.
Locus, which just raised a healthy $150M Series E, represents a different end of the spectrum. Similar to offerings from companies like Fetch, it offers a more plug-and-play approach to automation. The lowered barrier of entry means a far less costly on-ramp. It also means you don’t have to shut down your warehouses for an extended period to implement the tech. It’s a more workable solution for situations with contract-based clients or temporary seasonal needs.
The company uses a RaaS (robot-as-a-service) model to deploy its technology. That’s something you’re going to be hearing more and more of around the industry. Like the HaaS (the “h” being hardware) model, the company essentially rents out these super-pricey machines, rather than selling them outright. It’s another way to lower the barrier of entry, and it gives the robotics companies the opportunity to offer continuous service upgrades.
Image Credits: Future Acres
It’s a model Future Acres, a Southern Californian agtech startup, is exploring as it comes out of stealth. Things are still early days for the company, which spun out of Wavemaker Partners (which also developed food service robotics company Miso). Among other things, the company is looking toward a crowdfunded raise by way of SeedInvest. I’ve not seen a lot of robotics companies take that route, so it will be interesting to see how that plays out.
Like logistics, agtech is shaping up to be a pretty massive category for robotics investments. FarmWise was ahead of that curve, announcing a $14.5 million round back in 2019 (bringing its total to north of $20 million). This week the Bay Area startup added crop dusting functionality to its weed-pulling robot.
Image Credits: NASA/JPL-Caltech
NASA’s Perseverance understandably grabbed the biggest robotics headlines of the week. Landing with a parachute sporting the JPL motto, “Dare mighty things,” the rover sent back some of the best and most stunning images of Mars to date.
MSCHF’s livestream, on the other hand, was a bit more spotty. But aside from a fair number of interruptions with the feed, I suspect the company’s 40th drop went about as well as it could have hoped. Prior to announcing that it would mount a remote-control paintball gun to the back of Spot, Boston Dynamics issued a statement condemning the move:
Our mission is to create and deliver surprisingly capable robots that inspire, delight & positively impact society. We take great care to make sure our customers intend to use our robots for legal uses. We cross-check every purchase request against the U.S. Government’s denied persons and entities lists, prior to authorizing a sale.
Image Credits: MSCHF
MSCHF seemed to bask in the attention, even before its name was revealed to the public. At the very least, the stunt was a success from the standpoint of having ignited a conversation about the future of robotics. Boston Dynamics intrinsically understands that its robots sometimes freak people out — it’s a big part of the reason we get viral videos from the company, like the recent one featuring various robots dancing to The Contours.
Among other things, the company is pushing back against the dystopian optics of shows like Black Mirror. Of course, a paintball gun isn’t a weapon, per say. But for the moment, optics are also important. A rep from the company told me, “I turned down a customer that wanted to use Spot for a haunted house. Even putting it in that context of using our technology to scare people was not within our terms of use and not how we imagined the product being beneficial for people, and so we declined that initial sale.”
The ACLU notably raised concern last year after footage from one of our events featuring Spot being used in the field by the Massachusetts police made the rounds. This week, the NYPD deployed a Spot robot yet again — this time at the scene of a home invasion in the Bronx (not to mention a new paint job and the name “Digidog” for some reason). Your own interpretation of those particular optics will likely depend on, among other things, your feelings about cops.
Certainly police departments have utilized robotics for decades for bomb disposal. It’s true that Boston Dynamics (along with much of the robotics industry) got early funding from DARPA. Spot in its current form isn’t much as far as war machines go, but I think these are important conversations to have at this stage in robotic evolution. Certainly there are military drones in the world, and have been for more than a decade.
That’s an important ethical conversation. As is the responsibility of robotics manufacturers once their machines are out in the world. Boston Dynamics does due diligence when selling its robots, but does it continue to be responsible for them once it no longer owns them? That’s certainly not a question we’re going to answer this week.
I recently started working on a Progressive Web App (PWA) for a client with my team. We’re using React with client-side routing via React Router, and one of the first elements that we made was the main menu. Menus are a key component of any site or app. That’s really how folks get around, so making it accessible was a super high priority for the team.
But in the process, we learned that making an accessible main menu in a PWA isn’t as obvious as it might sound. I thought I’d share some of those lessons with you and how we overcame them.
As far as requirements go, we wanted a menu that users could not only navigate using a mouse, but using a keyboard as well, the acceptance criteria being that a user should be able to tab through the top-level menu items, and the sub-menu items that would otherwise only be visible if a user with a mouse hovered over a top-level menu item. And, of course, we wanted a focus ring to follow the elements that have focus.
The first thing we had to do was update the existing CSS that was set up to reveal a sub-menu when a top-level menu item is hovered. We were previously using the visibility property, changing between visible and hidden on the parent container’s hovered state. This works fine for mouse users, but for keyboard users, focus doesn’t automatically move to an element that is set to visibility: hidden (the same applies for elements that are given display: none). So we removed the visibility property, and instead used a very large negative position value:
.menu-item {
position: relative;
}
.sub-menu {
position: absolute
left: -100000px; /* Kicking off the page instead of hiding visiblity */
}
.menu-item:hover .sub-menu {
left: 0;
}This works perfectly fine for mouse users. But for keyboard users, the sub menu still wasn’t visible even though focus was within that sub menu! In order to make the sub-menu visible when an element within it has focus, we needed to make use of :focus and :focus-within on the parent container:
.menu-item {
position: relative;
}
.sub-menu {
position: absolute
left: -100000px;
}
.menu-item:hover .sub-menu,
.menu-item:focus .sub-menu,
.menu-item:focus-within .sub-menu {
left: 0;
}This updated code allows the the sub-menus to appear as each of the links within that menu gets focus. As soon as focus moves to the next sub menu, the first one hides, and the second becomes visible. Perfect! We considered this task complete, so a pull request was created and it was merged into the main branch.
But then we used the menu ourselves the next day in staging to create another page and ran into a problem. Upon selecting a menu item—regardless of whether it’s a click or a tab—the menu itself wouldn’t hide. Mouse users would have to click off to the side in some white space to clear the focus, and keyboard users were completely stuck! They couldn’t hit the esc key to clear focus, nor any other key combination. Instead, keyboard users would have to press the tab key enough times to move the focus through the menu and onto another element that didn’t cause a large drop down to obscure their view.
The reason the menu would stay visible is because the selected menu item retained focus. Client-side routing in a Single Page Application (SPA) means that only a part of the page will update; there isn’t a full page reload.
There was another issue we noticed: it was difficult for a keyboard user to use our “Jump to Content” link. Web users typically expect that pressing the tab key once will highlight a “Jump to Content” link, but our menu implementation broke that. We had to come up with a pattern to effectively replicate the “focus clearing” that browsers would otherwise give us for free on a full page reload.
The first option we tried was the easiest: Add an onClick prop to React Router’s Link component, calling document.activeElement.blur() when a link in the menu is selected:
const Menu = () => {
const clearFocus = () => {
document.activeElement.blur();
}
return (
<ul className="menu">
<li className="menu-item">
<Link to="/" onClick={clearFocus}>Home</Link>
</li>
<li className="menu-item">
<Link to="/products" onClick={clearFocus}>Products</Link>
<ul className="sub-menu">
<li>
<Link to="/products/tops" onClick={clearFocus}>Tops</Link>
</li>
<li>
<Link to="/products/bottoms" onClick={clearFocus}>Bottoms</Link>
</li>
<li>
<Link to="/products/accessories" onClick={clearFocus}>Accessories</Link>
</li>
</ul>
</li>
</ul>
);
}This approach worked well for “closing” the menu after an item is clicked. However, if a keyboard user pressed the tab key after selecting one of the menu links, then the next link would become focused. As mentioned earlier, pressing the tab key after a navigation event would ideally focus on the “Jump to Content” link first.
At this point, we knew we were going to have to programmatically force focus to another element, preferably one that’s high up in the DOM. That way, when a user starts tabbing after a navigation event, they’ll arrive at or near the top of the page, similiar to a full page reload, making it much easier to access the jump link.
We initially tried to force focus on the <body> element itself, but this didn’t work as the body isn’t something the user can interact with. There wasn’t a way for it to receive focus.
The next idea was to force focus on the logo in the header, as this itself is just a link back to the home page and can receive focus. However, in this particular case, the logo was below the “Jump To Content” link in the DOM, which means that a user would have to shift + tab to get to it. No good.
We finally decided that we had to render an interact-able element, for example, an anchor element, in the DOM, at a point that’s above than the “Jump to Content” link. This new anchor element would be styled so that it’s invisible and that users are unable to focus on it using “normal” web interactions (i.e. it’s taken out of the normal tab flow). When a user selects a menu item, focus would be programmatically forced to this new anchor element, which means that pressing tab again would focus directly on the “Jump to Content” link. It also meant that the sub-menu would immediately hide itself once a menu item is selected.
const App = () => {
const focusResetRef = React.useRef();
const handleResetFocus = () => {
focusResetRef.current.focus();
};
return (
<Fragment>
<a
ref={focusResetRef}
href="javascript:void(0)"
tabIndex="-1"
style=
aria-hidden
>Focus Reset</a>
<a href="#main" className="jump-to-content-a11y-styles">Jump To Content</a>
<Menu onSelectMenuItem={handleResetFocus} />
...
</Fragment>
)
}Some notes of this new “Focus Reset” anchor element:
href is set to javascript:void(0) so that if a user manages to interact with the element, nothing actually happens. For example, if a user presses the return key immediately after selecting a menu item, that will trigger the interaction. In that instance, we don’t want the page to do anything, or the URL to change.tabIndex is set to -1 so that a user can’t “normally” move focus to this element. It also means that the first time a user presses the tab key upon loading a page, this element won’t be focused, but the “Jump To Content” link instead.style simply moves the element out of the viewport. Setting to position: fixed ensures it’s taken out of the document flow, so there isn’t any vertical space allocated to the elementaria-hidden tells screen readers that this element isn’t important, so don’t announce it to usersBut we figured we could improve this even further! Let’s imagine we have a mega menu, and the menu doesn’t hide automatically when a mouse user clicks a link. That’s going to cause frustration. A user will have to precisely move their mouse to a section of the page that doesn’t contain the menu in order to clear the :hover state, and therefore allow the menu to close.
What we need is to “force clear” the hover state. We can do that with the help of React and a clearHover class:
// Menu.jsx
const Menu = (props) => {
const { onSelectMenuItem } = props;
const [clearHover, setClearHover] = React.useState(false);
const closeMenu= () => {
onSelectMenuItem();
setClearHover(true);
}
React.useEffect(() => {
let timeout;
if (clearHover) {
timeout = setTimeout(() => {
setClearHover(false);
}, 0); // Adjust this timeout to suit the applications' needs
}
return () => clearTimeout(timeout);
}, [clearHover]);
return (
<ul className={`menu ${clearHover ? "clearHover" : ""}`}>
<li className="menu-item">
<Link to="/" onClick={closeMenu}>Home</Link>
</li>
<li className="menu-item">
<Link to="/products" onClick={closeMenu}>Products</Link>
<ul className="sub-menu">
{/* Sub Menu Items */}
</ul>
</li>
</ul>
);
}This updated code hides the menu immediately when a menu item is clicked. It also hides immediately when a keyboard user selects a menu item. Pressing the tab key after selecting a navigation link moves the focus to the “Jump to Content” link.
At this point, our team had updated the menu component to a point where we were super happy. Both keyboard and mouse users get a consistent experience, and that experience follows what a browser does by default for a full page reload.
Our actual implementation is slightly different than the example here so we could use the pattern on other projects. We put it into a React Context, with the Provider set to wrap the Header component, and the Focus Reset element being automatically added just before the Provider’s children. That way, the element is placed before the “Jump to Content” link in the DOM hierarchy. It also allows us to access the focus reset function with a simple hook, instead of having to prop drill it.
We have created a Code Sandbox that allows you to play with the three different solutions we covered here. You’ll definitely see the pain points of the earlier implementation, and then see how much better the end result feels!
We would love to hear feedback on this implementation! We think it’s going to work well, but it hasn’t been released to in the wild yet, so we don’t have definitive data or user feedback. We’re certainly not a11y experts, just doing our best with what we do know, and are very open and willing to learn more on the topic.
The post How We Improved the Accessibility of Our Single Page App Menu appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Sendbird is a service for helping you add social features to your app. Wanna add in-app chat? Sendbird does that. Wanna add in-app voice or video calls? Sendbird does that.
Here’s how I always think about stuff like this. Whatever the thing you are building is, you should specialize in the core of it, and not get bogged down in building essentially another product as you’re doing it. Say you want to build an app for dentists to do bookings and customer management. Please do, by the way, my dentist could really use it. You’ve got a lot of work ahead of you, the core of which is building a thing that is perfect for actual dentists and getting the UX right. In-app chat might be an important part of that, but you aren’t specifically building chat software, you’re building dentist software. Lean on Sendbird for the chat (and everything else).
To elaborate on the dentist software example for a bit, I can tell you more about my dentist. They are so eager to text me, email me, call me, even use social media, to remind me about everything constantly. But for me to communicate with them, I have to call. It’s the only way to talk to them about anything—and it’s obnoxious. If there was a dentist in town where I knew I could fire up a quick digital chat with them to book things, I’d literally switch dentists. Even better if I could click a button in a browser to call them or do a video consult. That’s just good business.
You know what else? Your new app for dentists (seriously, you should do this) is going to have to be compliant on a million standards for any dentist to buy it. This means any software you buy will need to be too. Good thing Sendbird is all set with HIPPA/HITECH, SOC 2, GDPR, and more, not to mention being hugely security-focused.
Sendbird aren’t spring chickens either, they are already trusted by Reddit, Virgin UAE, Yahoo, Meetup, and tons more.
Chat is tricky stuff, too. It’s not just a simple as shuffling a message off to another user and displaying it. Modern chat offers things like reactions, replies, and notifications. Chat needs to be friendly to poor networks and offline situations. Harder still, moderating chat activity and social control like blocking and reporting. Not only does Sendbird help with all that, their UIKit will help you build the interface as well.
Build it with Sendbird, and it’ll scale forever.
Sendbird’s client base gave us confidence that they would be able to handle our traffic and projected growth. ”
Ben Celibicic, CTO
Modern apps have modern users that expect these sort of features.
The post Boost app engagement with chat, voice, and video APIs appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
We check out Amazon’s new smart home device, Airbnb adds flexible search and Hopin is raising even more money. This is your Daily Crunch for February 24, 2021.
The big story: We review the Amazon Echo Show 10
Brian Heater spent some time with Amazon’s new smart home device, paying particular attention to the screen that rotates based on the user’s location. He reports that the screen works smoothly and silently, but also feels “unnecessary,” and in some cases “downright unnerving” (especially from a privacy perspective).
Ultimately, Brian concludes that the $249 device is “a well-constructed, nice addition to the Show family and one I don’t mind moving around the old-fashioned way.”
The tech giants
Airbnb plans for a new kind of travel post-COVID with flexible search — The feature will allow users to forgo putting in exact dates when they look to book lodging on the platform.
YouTube to launch parental control features for families with tweens and teens — YouTube announced a new experience for teens and tweens who are now too old for the schoolager-focused YouTube Kids app, but who may not be ready to explore all of YouTube.
Google Cloud puts its Kubernetes Engine on autopilot — This new mode turns over the management of much of the day-to-day operations of a container cluster to Google’s own engineers and automated tools.
Startups, funding and venture capital
VCs are chasing Hopin upwards of $5-6B valuation — According to multiple sources who spoke with TechCrunch, the company may be nearing the end of a fundraise in which it’s seeking to raise roughly $400 million.
Primary Venture Partners raises $150M third fund to back NYC startups — The firm’s portfolio includes Jet.com (acquired by Walmart for $3.3 billion), Mirror (acquired by Lululemon for $500 million) and Latch (which is planning to go public via SPAC).
Joby Aviation takes flight into the public markets via a SPAC merger — Joby has spent more than a decade developing an all-electric, vertical take-off and landing passenger aircraft.
Advice and analysis from Extra Crunch
Four essential truths about venture investing — Observations from Alex Iskold of 2048 Ventures.
Dear Sophie: Which immigration options are the fastest? — The latest edition of “Dear Sophie,” the advice column that answers immigration-related questions about working at technology companies.
Can solid state batteries power up for the next generation of EVs? — For the last decade, developers of solid state battery systems have promised products that are vastly safer, lighter and more powerful.
(Extra Crunch is our membership program, which helps founders and startup teams get ahead. You can sign up here.)
Everything else
Europe kicks off bid to find a route to ‘better’ gig work — The European Union has kicked off the first stage of a consultation process involving gig platforms and workers.
The Equity podcast is growing — More Equity!
Techstars’ Neal Sáles-Griffin will join us at TechCrunch Early Stage 2021 to talk accelerators — Neal has seen this industry from just about every angle — as a teacher, advisor, investor and repeat co-founder.
The Daily Crunch is TechCrunch’s roundup of our biggest and most important stories. If you’d like to get this delivered to your inbox every day at around 3pm Pacific, you can subscribe here.
It feels like a trend (and a smart one) for tech platforms to invest in really high-quality learning material for their platform. Let’s have a gander.
Surely Webflow is thinking: if people invest in learning Webflow, they’ll be able to build what they need for themselves and their clients in Weblow, and they’ll stick around and be a good customer.
Surely Netlify is thinking: if people really grok Jamstack, they’ll build their existing and future sites using it. They’ll get comfortable using Netlify’s features to solve their problems, and they’ll stick around and be a good customer.
Surely Salesforce is thinking: if we train people to learn Salesforce and build Salesforce-specific software, not only will they be a good customer, but they’ll bring more customers to us and help big companies stay good customers.
This is not created by Figma themselves, but by Pablo Stanley, who must be thinking: I can teach people to use Figma, and along the way show them how cool and powerful Blush is, which will gain Blush good customers.
Surely Apollo is thinking: if y’all know GraphQL, and learned it in the context of Apollo, you probably continue using Apollo and bring it to the teams you’re on, which might make for great customers.
This one is an outlier because these are paid courses, but my guess is that Automattic is thinking: there is already a ton of WordPress learning material out there, why not leverage our brand and deep expertise to make content people are willing to pay for.
Surely Atlassian is thinking: if we are the place where people literally learned Git, we can sprinkle in our tooling into those lessons, and you’ll use those tools for your Git workflow, which will follow you through your entire developer career. Not to mention this is good SEO juice.
GitHub does the same thing.
Helping your customers learn your platform is certainly not a new concept. The word “webinar” exists after all. It’s a funny word, but effective. For example, AWS Marketplace sponsors CodePen emails sometimes with the idea of getting people to attend webinars about certain technologies. Wanna learn about Apache Kafka? You can do that for free coming up Thursday, February 25th. Surely AWS is thinking if people learn how this technology works, they’ll use AWS and AWS Marketplace partners to spin it up when they get to using it.
Cypress publishes their webinars. Appcues publishes their webinars. It’s not rare.
What feels a new here is the idea of packaging up learning material on a microsite with a fancy design and making it feel in-line with modern learning platforms. Like you are going to some expensive code school, except you’re getting it for free.
I’m a fan of all this. It’s good marketing for companies. It’s a good learning opportunity for everyone else. It’s also very biased. Learning materials you get directly from companies is going to tell you all about how great the technology of that company is. You should know that going in, if it’s isn’t obvious.
I’m also a fan—perhaps an even bigger fan—of paying for high-quality learning material. Our learning partner, Frontend Masters, has no particular bias to technology because you’re their customer. If they help you, they succeed and you succeed as well.
The post Teaching Web Dev for Free is Good Business appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I had run into this issue in the past but hadn’t come up with a proper solution.
What we want is to avoid redefining—and thus repeating—custom properties when switching between light and dark modes. That’s the goal of DRY (Don’t Repeat Yourself) programming, but the typical pattern for switching themes is usually something like this:
:root {
--background: #fff;
--text-color: #0f1031;
/* etc. */
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0f1031;
--text-color: #fff;
/* etc. */
}
}See what I mean? Sure, it might not seem like a big deal in an abbreviated example like this, but imagine juggling dozens of custom properties at a time—that’s a lot of duplication!
Then I remembered Lea Verou’s trick using --var: ;, and while it didn’t hit me at first, I found a way to make it work: not with var(--light-value, var(--dark-value)) or some nested combination like that, but by using both side by side!
Certainly, someone smarter must have discovered this before me, but I haven‘t heard of leveraging (or rather abusing) CSS custom properties to achieve this. Without further ado, here’s the idea:
--color: var(--light, orchid) var(--dark, rebeccapurple);If the --light value is set to initial, the fallback will be used (orchid), which means --dark should be set to a whitespace character (which is a valid value), making the final computed value look like this:
--color: orchid ; /* Note the additional whitespace */Conversely, if --light is set to a whitespace and --dark to initial, we end up with a computed value of:
--color: rebeccapurple; /* Again, note the whitespace */Now, this is great but we do need to define the --light and --dark custom properties, based on the context. The user can have a system preference in place (either light or dark), or can have toggled the website‘s theme with some UI element. Just like Florens‘s example, we’ll define these three cases, with some minor readability enhancement that Lea proposed using “on” and “off” constants to make it easier to understand at a glance:
:root {
/* Thanks Lea Verou! */
--ON: initial;
--OFF: ;
}
/* Light theme is on by default */
.theme-default,
.theme-light {
--light: var(--ON);
--dark: var(--OFF);
}
/* Dark theme is off by default */
.theme-dark {
--light: var(--OFF);
--dark: var(--ON);
}
/* If user prefers dark, then that's what they'll get */
@media (prefers-color-scheme: dark) {
.theme-default {
--light: var(--OFF);
--dark: var(--ON);
}
}We can then set up all of our theme variables in a single declaration, without repetition. In this example, the theme-* classes are set to the html element, so we can use :root as a selector, as many people like to do, but you could set them on the body, if the cascading nature of the custom properties makes more sense that way:
:root {
--text: var(--light, black) var(--dark, white);
--bg: var(--light, orchid) var(--dark, rebeccapurple);
}And to use them, we use var() with built-in fallbacks, because we like being careful:
body {
color: var(--text, navy);
background-color: var(--bg, lightgray);
}Hopefully you’re already starting to see the benefit here. Instead of defining and switching armloads of custom properties, we’re dealing with two and setting all the others just once on :root. That’s a huge improvement from where we started.
If you were to show me this following line of code out of context, I’d certainly be confused because a color is a single value, not two!
--text: var(--light, black) var(--dark, white);That’s why I prefer to abstract things a bit. We can set up a function with our favorite pre-processor, which is Sass in my case. If we keep our code above defining our --light and --dark values in various contexts, we need to make a change only on the actual custom property declaration. Let’s create a light-dark function that returns the CSS syntax for us:
@function light-dark($light, $dark) {
@return var(--light, #{ $light }) var(--dark, #{ $dark });
}And we’d use it like this:
:root {
--text: #{ light-dark(black, white) };
--bg: #{ light-dark(orchid, rebeccapurple) };
--accent: #{ light-dark(#6d386b, #b399cc) };
}You’ll notice there are interpolation delimiters #{ … } around the function call. Without these, Sass would output the code as is (like a vanilla CSS function). You can play around with various implementations of this but the syntax complexity is up to your tastes.
How’s that for a much DRYer codebase?
You could potentially do this with more than two modes. The more themes you add, the more complex it becomes to manage, but the point is that it is possible! We add another theme set of ON or OFF variables, and set an extra variable in the list of values.
.theme-pride {
--light: var(--OFF);
--dark: var(--OFF);
--pride: var(--ON);
}
:root {
--text:
var(--light, black)
var(--dark, white)
var(--pride, #ff8c00)
; /* Line breaks are absolutely valid */
/* Other variables to declare… */
}Is this hacky? Yes, it absolutely is. Is this a great use case for potential, not-yet-existing CSS booleans? Well, that’s the dream.
How about you? Is this something you’ve figured out with a different approach? Share it in the comments!
The post A DRY Approach to Color Themes in CSS appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
A wonderful collection of little layout-related CSS snippets from Stephanie Eckles that serves both as a quick reference and a reminder of how straightforward and powerful CSS has become.
Random things to note!
<div>s with resize: horizontal; and overflow: auto; (although there is a nice little lib for that that displays current width output).Direct Link to Article — Permalink
The post SmolCSS appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Every new smart home device invites new questions. Questions of privacy, security and what we’re willing to give up for the sake of convenience. It’s not an anti-technology stance to welcome these conversations and assess new products as we invite them into our homes.
For my part, my apartment is fairly limited when it comes to smart home tech. I own two large smart speakers and a third smaller one, mostly for the convenience of networking streaming music across different rooms. My smoke detector is connected, for the peace of mind that comes with knowing that my home wasn’t on fire back when I used to leave it for extended stretches. Oh, and a couple of connected lightbulbs, mostly because why not?
Back when Google announced its first-party smart screen, the Home (now Nest) Hub, I thought it was a savvy decision to leave the camera off. Of course, the company included one on its larger Max device, so the option is there, if you want it. Of course, for most of these products, video cameras are a given — and understandably so, with smart screens like the new Echo Show 10 edging into the teleconferencing space as the line between work and home has become far more fuzzy for many.
Image Credits: Brian Heater
Amazon’s gotten the message here, with the addition of a large physical shutter button on the top of the device. When slid to the right, the camera on the top right is covered by a white lens cap, contrasted against the black bezel, so it’s easy to spot across the room. Doing so will pop up a notification: “Camera off. Disabling motion.”
The “motion” here refers to the rotating screen — the headline feature of Amazon’s latest take on the Echo Show format. The company is positioning the new tech as a game changer for the category, and while I will say it’s done a good job implementing the feature in a way that works well and quietly, it’s precisely this new addition that reignites the privacy question.
Image Credits: Brian Heater
The notion of creating a home device that fades into its surroundings is really out the window with that feature. The Echo uses figure tracking to make sure the display is facing you at all times when using it, drawing attention to itself in the process. One can inherently know and passively understand that a device is using imaging and AI for tracking, but largely effectively ignore it. After all, we’ve got cameras on pretty much everything now. These things are a part of the social media and services we regularly use. When the device physically follows you around the room, however, this stuff is top of mind.
Having used the product for several days, I would say the feature feels unnecessary in most cases — and downright unnerving in some. I’ve placed the Show on my desk next to the computer where I’m typing this, and I’ve mostly disabled the feature. It’s probably something I could get used to over time, but with the relatively limited amount I’m going to spend with it, I prefer to use the product in a stationary manner, manually swiveling the display and flipping the screen angle up and down as needed. I adjust screens all of the time. It’s fine.
Amazon will walk you through the feature during setup, including which direction you want the screen facing as a default and how much rotation it offers on either side. Keep in mind, the system really has no notion of what constitutes “straight ahead, until you adjust the setting sliders accordingly. You can adjust these later in settings, as well. There’s also a “Motion Preferences” option. Here you can limit the applications it will use to follow you, require voice to use the feature or disable it entirely.
Of course, I’m also someone who prefers to keep the camera shutter on while not in use, so that works out just fine. You can’t shutter the camera and have the device continue to move, since it needs to know what it’s seeing to move along with it. I will say that the moving screen has the unexpectedly nice side effect of reminding me when I’ve forgotten to disable the camera.
Amazon’s understandably — and thankfully — been talking up the privacy aspects since the Echo Show 10 was announced. There are eight mentions of “privacy” on the product page, but here’s the key graf:
Built with multiple layers of privacy controls, including a mic/camera off button and a built-in shutter to cover the camera. Easily turn on/off motion at any time by voice, on-device, or in the Alexa app. The processing that powers screen motion happens on device – no images or videos are sent to the cloud to provide the motion feature.
Image Credits: Brian Heater
Notably, the tracking feature uses a vague outline of a person, rather than any sort of facial tracking. The image it processes looks more like a blotchy heat map than anything recognizable as an individual or even, generally, a human (though it’s able to distinguish human figures from pets). That, in particular, has been a hot button topic for the company.
The rotating feature is primarily a way to reduce user friction. Amazon notes that existing Echo Show owners will swivel their devices around when they’re, say, using it in the kitchen to cook. The front-firing audio also moves as the screen does. That’s in keeping with the company’s move away from 360-degree audio in recent Echo models. This is either a plus or a minus, depending on how you use the device, and how many people are around. It can also be used to follow you as you move around while video calling (a feature the competition has offered through zooming and cropping).
Amazon’s taken pains in recent generations to improve the audio on these device, prioritizing the “speaker” part of smart speaker, and the new Show certainly benefits from that. I wouldn’t use it as my primary sound system, but sitting here on my desk, it delivers a nice, full sound for its size, even with the screen obscuring a big portion of the front.
The 10.1-inch screen is a nice size, as well. Again, I wouldn’t use it to replace a TV or even a good laptop, but it’s good size for quick videos. It’s a shame Amazon and Google haven’t been able to play nice here, because YouTube has the market cornered on short-form videos that are perfect for this form factor. (If you’re so inclined, you can still access YouTube via the built-in browser, though it’s not exactly an elegant solution.)
Image Credits: Brian Heater
Amazon Prime Video certainly has its share of good long-form content and series (it has a ton of trash, as well, but sometimes that’s fun, too), but Amazon’s best play is partnering with third-parties to bolster its offerings. And that’s another spot where Amazon has been improving the Echo experience. Netflix and Hulu are now available on the device for video, and Apple Music and Spotify have been added on the music side.
There are still a number of third-party apps that would be nice additions, but that’s a pretty solid starting point. Not to mention that services like Spotify can be set as the default for music playback. That’s one of those additions that genuinely reduces friction (and honestly, Amazon Music is a far less compelling service than Prime Video at the moment).
Zoom — arguably the most compelling addition from a software standpoint — is coming later. For now, calls are limited to other Alexa devices. Zoom and other third-party teleconference software has the opportunity to create an entire new dimension for these products, especially with the aforementioned blurring of home and work life.
Honestly, where the Show is currently sitting on my desk is really the perfect placement to use it for calls while working on my computer. I’m cautiously optimistic about the implementation. At the very least, it would give me a compelling reason to get more use out of that 13-megapixel camera on a regular basis.
Image Credits: Brian Heater
For the time being, I think the most compelling case to be made for both the camera and automatic screen swiveling is as a makeshift security camera. This is another “Coming Soon” feature that requires a Guard Plus subscription. With it, you can set a geofence, with the Show doubling as a smart security camera when you leave home. The system will send an alert if a person is detected in your home while you’re out.
This month has seen rumors that Amazon is working on a wall-mounted smart home hub. The form factor certainly makes sense, essentially serving as an Alexa-enabled touchscreen control for your various connected devices. For the time being, between Show and the Alexa mobile app, I think the bases are covered pretty well — though such a device could certainly lend a more premium experience to the space.
A well-placed Show will address that need for many. Certainly it does the job for my one-bedroom apartment. You can use voice or touch to control lighting, and the screen can monitor feeds from security cameras, including, naturally, Amazon-owned Ring. Additions like these have really made the smart screen category a much more compelling and capable one.
At $249, it’s $20 pricier than the 2018 Show. It’s hard to say how much of the increase is due to the new mechanical turning mechanism, but Amazon offered up a cheaper model without the functionality that’s almost certainly the one I would go for, for reasons outlined above. Again, not everyone will have the same misgivings.
And all told, it’s a well-constructed, nice addition to the Show family and one I don’t mind moving around the old-fashioned way.
With a high of F and a low of 15F. Currently, it's 14F and Clear outside. Current wind speeds: 13 from the Southwest Pollen: 0 S...
