Get that desk more cuter, fam. Amy (@sailorhg) has this perfectly cute minisite with assorted desktop backgrounds, fonts, editor themes, keyboard stuff, and other accessories. These rainbow cables are great.
And speaking of fonts, we’re still plucking away at this microsite for coding fonts and it’s ripe for contribution if anyone is into it.
Direct Link to Article — Permalink
The post compute cuter appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
“5G is a once-in-a-decade kind of opportunity,” Tim Cook told the media during the Q&A portion of Apple’s Q3 earnings call. “And we could not be more excited to hit the market exactly when we did.”
The truth of the matter is its timing was a mixed bag. Apple was, by some accounts, late to 5G. By the time the company finally announced that it was adding the technology across its lineup of iPhone 12 variants, much of its competition had already beat the company to the punch. Of course, that’s not a huge surprise. Apple’s strategy is rarely a rush to be first.
5G networks are only really starting to come into their own now. Even today, there are still wide swaths of users who will have to default to an LTE connection the majority of the time they use their handsets. The arrival of 5G on the iPhone was really as much about future-proofing this year’s models as anything. Consumers are holding onto phones longer, and in the three or four years before it’s time for another upgrade, the 5G maps will look very different.
Clearly, the new iPhone didn’t hit the market exactly when Apple had hoped; the pandemic saw to that. Manufacturing bottlenecks in Asia delayed the iPhone 12’s launch by a month. That’s going to have an impact on the bottom line of your quarterly earnings. The company saw a 20% drop for the quarter, year-over-year. That’s hugely significant, causing the company’s stock to drop more than 4% in extended trading.
Apple’s diverse portfolio helped curb some of those revenue slides. While the pandemic has generally had a profound impact on consumer spending on “non-essentials,” changing where and how we work has helped bolster Mac and iPad sales, which were up 28% and 46%, respectively, year-over-year. It wasn’t enough to completely stop the iPhone stumble, but it certainly brings the importance of a diverse hardware portfolio into sharp relief.
China was a big issue for the company this time around — and the lack of a new, 5G-enabled iPhone was a big contributor. In greater China (including Taiwan and Hong Kong), the company saw a 28% drop in sales. There are a number of reasons to be hopeful about iPhone sales in Q4, however.
As I noted this morning, smartphone shipments were down almost across the board in China for Q3, per new figures from Canalys. Much of that can be chalked up to Huawei’s ongoing issues with the U.S. government. Long the dominant manufacturer in mainland China, the company has been hamstrung by, among other things, a ban on access to Android and other U.S.-made technologies. Apple’s numbers remained relatively steady compared to the competition and Huawei’s issues could present a big hole in the market. With 5G on its side, this next quarter could prove a banner year for the company.
I updated my personal website the other day. Always a fun project since it’s one of the few where it’s 100% just me. It’s my own personal playground with no other goal than making the site represent me to have a little fun. It’s not a complete re-write, just some new paint.
I thought I’d document little bits of it here just to hone in on some of the bits of trickery in the spirit of learning through sharing.
I think the Inkwell family is super cool. I like mix and matching not just the weights but the serif and sans-serif and caps vs not.
I used Inkwell in the last design as well, but I was worried that it was a little too jokey for blog post body copy. My writing is extremely casual, but not always, and Inkwell is way too jovial for serious topics. I went with Ideal Sans for body copy last time, but the pairing with Inkwell felt a little off.
This time I went with Whitney for general body copy, which is still pretty lighthearted, but works when the copy is more straight toned.
If you’re going to zebra-stripe a table, you’d do something like…
tr:nth-child(even) {
background-color: var(--color-1);
}
tr:nth-child(odd) {
background-color: var(--color-2);
}What if you wanted to rotate four colors though? It’s still :nth-child trickery, selecting every four, and then offsetting. Here, I’ll do it with list items in Sass (the nesting is nice, not having to repeat the selector):
li {
&:nth-child(4n) a {
color: $blue;
}
&:nth-child(4n + 1) a {
color: $yellow;
}
&:nth-child(4n + 2) a {
color: $red;
}
&:nth-child(4n + 3) a {
color: $purple;
}
}That’s what I did to build the colorized blogroll:
Note the Sass used above… I used Sass because it was already in use on the project. All I had to do was open CodeKit and the processing was ready-to-go.
Oh, and blogrolls are cool again.
I used this click-to-load-YouTube-(at all) technique which is still extremely clever. Having an <iframe> that behaves just like a YouTube embed would but only loading a simple static image (rather than heaps and heaps of resources) is great for performance and behaves essentially the same as a normal YouTube embed does.
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>
I’m a big fan of giving myself structured data to work with. In WordPress-land, that often means Custom Post Types paired with something like the Advanced Custom Fields plugin for just the right data needed for the job.
Then I can loop over stuff and output it however I want. This isn’t that fancy, but it opens up whatever future doors I want to a lot easier.
There is nothing fancy about how this works:
I literally made 18 <div> elements (3 lengths * 2 styles * 3 code types = 18) and swap between with a bit of JavaScript that calculates a class string based on the current choices, selects that class, and unhides it while hiding the rest.
$(".bio-choices input").on("change", function () {
var lengthClass = ".bio-" + $("input[name=length]:checked").attr("id");
var styleClass = ".bio-" + $("input[name=style]:checked").attr("id");
var codeClass = ".bio-" + $("input[name=code]:checked").attr("id");
var selector = lengthClass + styleClass + codeClass;
$(".bio").hide();
$(selector).show();
});jQuery! That’s what was already on the site, and the site also uses the jQuery version of FitVids for responsive videos — so I figured I’d just leave it all be.
If I was going to re-write these bits of the site, I’d probably rip out jQuery and use this for FitVids. Then I’d find a way to only have three bios (maybe six if I can’t find a nice way to handle first vs. third person with word swaps) and then get the rest by automatically converting the formats somehow (maybe some cloud function if I had to).
I used ztext for the header! It’s this kinda stuff that makes the web feel extra webby to me. I’m not sure I’d do something with quite so much movement on a site like CSS-Tricks (because people visit it more often and the time-on-site is higher). But for a site that people might land on once in a blue moon, it has the right amount of cheerful levity, I think.
I was stoked to see the SVG Backgrounds site get an upgrade lately. I was playing around in there and was like YES, I’m doing this.
I went with a background-attachment: fixed look, which I think I like. I also added the slideout footer effect on desktop, but I’m less sold that it’s working here. It’s more fun when the background changes, and that doesn’t happen here. I’ll probably either change the background of the footer, or rip the effect out.
Some of the different sections on the site use a different primary highlight color, and I’m having the links in those sections follow that color. That might be questionable (perhaps all links should be blue) but, so far, I think it makes decent sense (they still have hover and focus styles). When you have a variety of colors and styles for interactive elements though, it often means that you have to create special alternate styles for hover and focus. That could mean crafting bespoke color alterations for each color. Not the end of the world, but I really like this little trick for interactive styles that ends up with a consistent look across all colors:
a:focus, .button:focus,
a:hover, .button:hover {
filter: brightness(120%);
}Anyway! This was just a couple hours of paint on this site. Mostly because blogrolls were the CodePen Challenge that week. But I can never touch a site I haven’t in a while and just do one thing. I get sucked in and gotta do more!
The post Little Things on My Personal Site appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
The cloud infrastructure market kept growing at a brisk pace last quarter, as the pandemic continued to push more companies to the cloud with offices shut down in much of the world. This week the big three — Amazon, Microsoft and Google — all reported their numbers and as expected the news was good with Synergy Research reporting revenue growth of 33% year over year, up to almost $33 billion for the quarter.
Still, John Dinsdale, chief analyst at Synergy was a bit taken aback that the market continued to grow as much as it did. “While we were fully expecting continued strong growth in the market, the scale of the growth in Q3 was a little surprising,” he said in a statement.
He added, “Total revenues were up by $2.5 billion from the previous quarter causing the year-on-year growth rate to nudge upwards, which is unusual for such a large market. It is quite clear that COVID-19 has provided an added boost to a market that was already developing rapidly.”
Per usual Amazon led the way with $11.6 billion in revenue, up from $10.8 billion last quarter. That’s up 29% year over year. Amazon continues to exhibit slowing growth in the cloud market, but because of its market share lead of 33%, a rate that has held fairly steady for some time, the growth is less important than the eye-popping revenue it continues to generate, almost double its closest rival Microsoft.
Speaking of Microsoft, Azure revenue was up 48% year over year, also slowing some, but good enough for a strong second place with 18% market share. Using Synergy’s total quarterly number of $33 billion, Microsoft came in at $5.9 billion in revenue for the quarter, up from $5.2 billion last quarter.
Finally Google announced cloud revenue of $3.4 billion, but that number includes all of its cloud revenue including G Suite and other software. Synergy reported that this was good for 9% or $2.98 billion, up from $2.7 billion last quarter, good for third place.
Alibaba and IBM were tied for fourth with 5% or around $1.65 billion each.
It’s worth noting that Canalys had similar numbers to Synergy with growth of 33% to $36.5 billion. They had the same market order with slightly different numbers with Amazon at 32%, Microsoft at 19% and Google at 7% and Alibaba in 4th place at 6%.
Canalys sees continued growth ahead, especially as hybrid cloud begins to merge with newer technologies like 5G and edge computing. “All three [providers] are collaborating with mobile operators to deploy their cloud stacks at the edge in the operators’ data centers. These are part of holistic initiatives to profit from 5G services among business customers, as well as transform the mobile operators’ IT infrastructure,” Canalysis analyst Blake Murray said in a statement.
While the pure growth continues to move steadily downward over time, this is expected in a market that’s maturing like cloud infrastructure, but as companies continue to shift workloads more rapidly to the cloud during the pandemic, and find new use cases like 5G and edge computing, the market could continue to generate substantial revenue well into the future.
Twenty-plus years ago, tables were the main way web pages were created in HTML. It gave web builders consistent control of constructing pages with some “design.” No longer did sites only have to be top-to-bottom in a linear manner — they could be set up with columns that align left-to-right and top-to-bottom. Back then, it was seen as a huge breakthrough.
Tables, however, were never designed to lay out pages and, in fact, have all sorts of problems when used that way today. It was a convenient hack, but at the time, a very welcome one, particularly for those trying to achieve a super-specific layout that previous ways couldn’t handle.
Fast-forward to modern days and it’s now obvious that were tons of issues with the table layout approach. Accessibility is a big one.<table>, <th>, <tr> and <td> elements aren’t exactly accessible, especially when they’re nested several levels deep. Screen readers — the devices that read web content and serve as a measure of accessibility compliance — struggle to parse them into cohesive blocks of content. That’s not to say tables are bad; they simply were never intended as a layout mechanism.
Check out this table layout. Feel free to run it through VoiceOver or whatever screen reading software you have access to.
Yes, that example looks very much like a typical website layout, but it’s crafted solely with a table. You can see how quickly it becomes bloated and inaccessible the very moment we start using it for anything other than tabular data.
So after more than 20 years of being put through the ringer, you might think we should avoid tables altogether. If you’ve never shipped a table-based layout, you’ve undoubtedly heard war stories from those of us who have, and those stories are never kind. It’s like we’ve sort of made tables the “Internet Explorer of HTML elements.”
But that’s not totally fair because tables do indeed fill a purpose on the web and they are indeed accessible when they are used correctly.
Tables are designed to handle data that is semantically related and is best presented in a linear-like format. So, yes, we can use tables today in the year 2020, and that will likely continue to be true many years from now.
Here’s a table being used to display exactly what it’s intended to: tabular data!
With the push toward web standards in the early 2000s, tables were pushed aside as a layout solution in favor of other approaches, most notably the CSS float property. Designers and developers alike rejoiced because, for the first time, we had a true separation of concerns that let markup do the markup-y things it needs to do, and CSS to do the visual stuff it needs to do. That made code both cleaner and way easier to maintain and, as a result, we could actually focus on true standards, like accessibility, and even other practices, like SEO.
See (or rather hear) the difference in this example?
Many of us have worked with floats in the past. They were originally designed to allow content to flow around images that are floated either to the left or right, and still be in the document flow. Now that we’ve gotten newer layout features — again, like grid and flexbox — floats, too, have sort of fallen by the wayside, perhaps either because there are better ways to accomplish what they do, or because they also got the same bad rap as tables after being (ab)used for a long time.
But floats are still useful and relevant! In fact, we have to use them for the shape-outside property to work.
A legitimate float use case could be for wrapping content around a styled <blockquote>.
CSS features like grid, flexbox, and multicolumn layouts are among the wonderful tools we have to work with these days. With even more layout possibilities, cleaner and more accessible code, they will remain our go-to layout approaches for many years to come.
No hacks or extra code in this flexbox example of the same layout we’ve looked at throughout this article:
So, next time you find yourself considering tables or floats, reach for them with confidence! Well, when you know the situation aligns with their intended use. It’s not like I’m expecting you to walk away from this with a reinvigorated enthusiasm for tables and floats; only that, when used correctly, they are perfectly valid techniques, and even continue to be indispensable parts of our overall toolset.
The post In Defense of Tables and Floats in Modern Day Development appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Amazon expects to incur $4 billion in COVID-related costs next quarter, an estimate that provides a bellwether for other businesses, large and small, trying to stay operational and control expenses amid the pandemic.
The upshot: Amazon is planning for COVID to remain an unwelcome companion through the end of the year with costs higher than the previous quarter.
The company said Thursday in its third-quarter earnings call that it logged $7.5 billion in COVID-related costs since the disease took root earlier this year. Amazon previously said its COVID costs were about $600 million in the first quarter and more than $4 billion in the second. The company’s COVID costs in the third quarter were about $2.5 billion, CFO Brian Olsavsky told an analyst during an earnings call. While Amazon was able to lower its costs in the third quarter due to efficiencies that number is on rise for next quarter.
Olsavsky said the majority of the increase in costs is due to the expansion of its operations. Amazon has hired 100,000 new workers in October.
COVID-19 along with other uncertainties related to the economy, holiday sales and even weather patterns weighed on its guidance for operating income in the fourth quarter. Amazon provided a wide-ranging guidance of between $1 billion and $4.5 billion in operating income in the fourth quarter compared with $3.9 billion in the same period last year. This guidance assumes about $4 billion of costs related to COVID-19.
But what is most telling is that even after providing a lengthy list of possible uncertainties in the fourth quarter, Olsavsky noted that COVID still trumps them all.
“So there’s a whole host of issues that generally come to bear in Q4,” Olsavsky said. “I think the fact that COVID is dwarfing all of those is causing us a lot of uncertainty on our top line range.”
Olsavsky said costs were related to productivity losses caused by changing how it operates as well as expenses related to personal protective equipment and other upfront costs.
“The largest portion of these costs relate to continuing productivity headwinds in our facilities, including process revisions to allow for social distancing and incremental costs to ramp up new facilities, and the large influx of new employees hired to support strong customer demand also includes investments in PPE for employees and enhanced cleaning of our facilities,” Olsavsky said during Thursday’s earnings call.
Amazon said Thursday it also continues to ramp up its in-house COVID-19 testing program with capacity reaching 50,000 tests a day across 650 sites by November.
Maybe you’ve already heard of (or even worked with!) KendoReact. It’s popped up in some of my day-to-day conversations, especially those about working with design systems and React. You could think of it as a component library like Bootstrap or Material Design, except the components in KendoReact are far more robust. These are interactive, state-driven components ready to start building full-blown UI’s right out of the gate (not to mention, if you want to use Bootstrap as the theme, you absolutely can).
Whenever you’re thinking about using a UI library, you need to think about the styling capabilities. Are you able to really express your brand with these? Were they meant to be styled? What is the styling experience going to be like?
Fortunately, KendoReact really makes styling a citizen of the entire UI library.
KendoReact is a collection of UI components for building sites. It’s a pretty massive one. Over 80 by my count, and that doesn’t include the child components of heavy lifters like the <Grid /> family.
Here’s one, the <DropDownList />, and just using the default theme (even that is optional):
If I want to style this, I don’t need any special proprietary skills, I can just use CSS. Here’s me forcing a whole new look onto it with different colors and fonts, with just some simple CSS:
But hey, maybe you want to do something a bit more systematized than cowboying some random override CSS. I don’t blame you. Good news: KendoReact themes are Sass-powered. So you can control a lot of the colorization and styling just by changing a few Sass variables.
They have a whole theme builder you can use right on their site that spits out exactly what you need. Say you want to start from their base theme and go from there, select the Default theme:
Then you can play with all the colors in the UI to your liking. Here’s me poking at a theme with some CSS-Tricks colors.
I can download that from the site which will give me the variables as a SCSS file that I can apply before the default theme in my build (there is a great tutorial covering how to do that over on the Telerik blog). Plus, it gives me the whole dang CSS file of the theme if I want to use it that way, which is simple and quick. Here’s me using their conversational chat widget with that theme:
Again, I can start with Bootstrap, I can start with Material, I can start with their default theme, or I can start from scratch. Styling is totally up to me. Each theme has its perks and, as you might expect, are super flexible as far as configuring colors, fonts, and other design elements.
If you really get into this, of course you’ll be consulting their docs and finding your way around there (it’s nice to know they have really comprehensive docs). It’s all pretty straightforward though, you’ll do great! If you need to get going building out a state-driven interactive interface quickly without sacrificing any customizability or power, you’ll find KendoReact is your friend.
The post Using Your Own Design System with KendoReact Components appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
In its latest quarterly financial report, Spotify announced that it had crossed 320 million active monthly users. That marks a 29% growth for the quarter, coming on the heels of what seems to be a rather successful launch into the Russian market. Of that number, it now counts 144 million paid users — a 27% jump.
Spotify continues to be the largest music streaming service globally by a rather wide margin. Apple comes in at number two, with around 60 million paid subscribers, as of last year. Amazon Music, meanwhile, is not too far behind at 55 million — though the company doesn’t break out paid subscriber figures (Apple’s is premium only, following a three-month free trial).
In spite of solid growth, Spotify reported a quarterly loss of around $118 million — a big shift since making a quarterly profit in Q3. Among the key drivers the company cited are its on-going decision to offer discounted plans in order to attract new users to the service.
“We can grow that by either adding more users or raising the price of existing users,” the company said on this morning’s call. “We still think there are billions more to go after in this ecosystem, and we’re going to invest in better tools. That will increase the engagement, and if that increases the engagement, it increases our ability to monetize them as well.”
The company has, of course, been spending money like crazy in a bid to become a leader in podcasting content. The past two years have found it spending hundreds of millions of dollars to purchase technology and content companies, including Gimlet, Anchor, Parcast and sports media giant, the Ringer. It noted in this morning’s call that the recent purchase of the Joe Rogan Experience has quickly become its most popular podcast in all of its English-speaking markets.
Spotify says the show has “outperform[ed] our audience expectations. We look forward to the start of our exclusivity period for this podcast by the end of this year.” Rogan’s show created a storm of controversy almost immediately. Just this week, an appearance by de-platformed conspiracy theorist Alex Jones reignited a number of these issues. The company did not respond to our request for comment yesterday.
Nor did it respond to a recent call to increase pay and transparency for musicians — an increasingly important issue as the COVID-19 pandemic has made it all but impossible to make a living on live shows.
Amazon has continued to reap the rewards of a society increasingly dependent on ecommerce — a trend further fueled by the COVID-19 pandemic. The company crushed analyst expectations Thursday, reporting net income of $6.3 billion in the third quarter, or $12.37 per diluted share, compared with $2.1 billion in net income, or $4.23 per diluted share in the same quarter last year.
The company brought in a total of $96.15 billion in revenue, a 37.4% increase from the $69.98 billion it generated in the same period last year.
Analysts polled by Yahoo expected earnings per share of $7.41 on average, up from $4.23 last year. Analysts expected revenue of $92.7 billion, up from $69.98 billion in the same year-ago period.
While the third-quarter numbers beat expectations, the picture wasn’t all unicorns and rainbows. The company’s cloud-computing service AWS saw growth slow in the third quarter. AWS generated $11.6 billion in sales, a 29% YoY sales growth. That sounds dandy, but it’s actually smaller than the 35% YoY sales growth the segment experienced in the third quarter of 2019.
The financials released Thursday also showed growth from the second period of this year, which was considered at the time a “killer quarter” by just about every measure. Revenue grew 8% and net income popped 21% from the second quarter, figures that suggest that consumers have yet to reach their limit for commerce delivered to their doorsteps.
Meanwhile, Amazon reported that its operating cash flow increased 56% to $55.3 billion for the trailing 12 months compared to $35.3 billion for the trailing period ended September 30, 2019. Free cash flow (operating cash flow less capital expenditures) also rose to $29.5 billion in the third quarter compared with $23.5 billion in the trailing period ended September 30, 2019.
Looking ahead, Amazon is bullish on sales, but notes costs related to COVID-19 might affect operating income. The company said it expects sales to grow between 28% and 38% in the fourth quarter compared to the same period in 2019, which would bump that figure to between $112 billion and $121 billion.
Amazon said it expects operating income to be between $1 billion and $4.5 billion, compared with $3.9 billion in fourth quarter 2019. This guidance assumes approximately $4 billion of costs related to COVID-19.
Despite e-commerce firms Amazon and Walmart and others pouring billions of dollars in India, offline retail still commands more than 95% of all sales in the world’s second largest internet market.
The giants have acknowledged the strong hold neighborhood stores (mom and pop shops) have in the country, and in recent quarters scrambled for ways to work with them. Mukesh Ambani, India’s richest man, has made the dynamics more interesting in the past year as he works to help these neighborhood stores sell online.
But the market opportunity is still too large, and there are many aspects of the old retail business that could use some tech. That’s the bet WareIQ, a Bangalore-headquartered, Y Combinator-backed startup is making. And it has just raised a $1.65 million Seed financing round from YC, FundersClub, Pioneer Fund, Soma Capital, Emles Venture Advisors, and founders of Flexport.
The one-year-old startup operates a platform to leverage the warehouses across the country. It has built a management system for these warehouses, most of which largely engage in offline business-to-business commerce and have had little to no prior e-commerce exposure.
“We connect these warehouses across India to our platform and utilize their infrastructure for e-commerce order processing,” said Harsh Vaidya, co-founder and chief executive of WareIQ, in an interview with TechCrunch. The company offers this as a service to retail businesses.
Who are these businesses? Third-party sellers, some of whom sell to Amazon and Flipkart and use WareIQ to speed up their delivery, e-commerce firms such as fashion e-tailer Nykaa, social commerce platforms such as Meesho as well as neighborhood stores, and social media influencers.
Any online store, for instance, can send its products to WareIQ, which has integrations with several popular e-commerce platforms and marketplaces. It works with courier partners to move items from one warehouse to another to offer the fastest delivery, explained Vaidya.
The infrastructure stitched together by WareIQ also enables an online seller to set up their own store and engage with customers directly, thereby saving fees they would have paid to Amazon and other established e-commerce players.
“The sellers were not able do this on their own before because it required them to talk directly to warehousing companies that maintain their own rigid contracts, and high-security deposits, and they still needed to work with multiple technology providers to complete the tech-stack,” he said. WareIQ also offers these sellers last-mile delivery, cash collection, and fraud detection among several other services.
“In a way, we are building an open source Amazon fulfilment service, where any seller can send their goods to any of our warehouses and we fulfil their Amazon orders, Myntra orders, Flipkart orders, or their own website orders. We also comply with the standard of these individual marketplaces, so our sellers get an assured tag on Amazon,” he said.
WareIQ is free for anyone to sign up with any charge and it takes a cut by the volume of orders it processes. The startup today works with over 40 fulfilment centres and it plans to deploy the fresh capital to expand its network to tier 2 and tier 2 cities, he said. It’s also hiring for a number of tech roles.
Back in July 2020, I got an email from James0x57 (I always try to refer to people by their name, but I think I get the sense they prefer to go by screen name) that says:
The entire world of branching conditional logic and bulk feature toggling for custom CSS properties is possible and only exists because of a tiny footnote in the CSS spec that has gone unnoticed.
That line is:
Note: While <declaration-value> must represent at least one token, that one token may be whitespace.
In other words, --foo: ; is valid.
If you’re like me, this doesn’t read as some massive revelation that unlocks huge doors, but to smarter people, like James0x57, it does! We started working on a draft blog post, but for various reasons it didn’t make it all the way here. One of those reasons is that I just wasn’t getting it. Call me dense, sorry James0x57. One demo they sent me when I asked super dumbed-down example was helpful though, and I think it’s kind of clicked for me. Here’s my interpretation:
Let me attempt to explain:
max-width media query. You can see that’s where the variable --mq-sm flops from initial to an empty space value.--mq-sm is initial.
--padding-when-small contain two values — initial and 2rem —which, I guess is invalid.padding: var(--padding-when-small, var(--padding-when-large)), the second value (the “fallback”) is used because the first value is invalid.--mq-sm value is a space.
--padding-when-small value "(space)2rem" which, I guess is valid.padding: var(--padding-when-small, var(--padding-when-large)), the first value is used.So, now we can flip the padding between two values by changing a placeholder variable.
That clicks for me.
When see this as simply changing a single value, it’s almost like uh, ok, you’ve found a really complex way to change some padding, but you could have just changed the padding in the media query. But the trick is that now we have this placeholder variable that has changed and we can key into that to change unlimited other values.
We could have a single media query (or set of media queries) in our CSS that only toggles these placeholder variables and we use elsewhere to toggle values. That could be nice and clean compared to sprinkling media queries all over the CSS. It’s a proper toggle in CSS, like a form of IF/THEN logic that we haven’t quite had before.
James0x57 extended that thinking to all the logical possibilities, like AND, OR, XOR, NAND, NOR, and XNOR, but that lost me again. Not really a computer scientist over here. But you can follow their work if you want to see real world usage of this stuff.
This variable stuff is wild and gets very confusing. I noted in a possibly recent (but the byline says 2015?) article from Patrick Brosset that covers some tricky CSS custom properties stuff. For example, fallbacks can be infinitely nested, like:
color: var(--foo, var(--bar, var(--baz, var(--are, var(--you, var(--crazy)))));Also, valid values for CSS custom properties can have commas in them like this:
content: var(--foo, one, two, three);Is that really just one fallback with a single one, two, three value? This is rather mind-bending.
Anyway, fast-forward a bunch of months now, and CSS trickery master Lea Verou has set her sights on this whitespace-in-custom-properties stuff:
What if I told you you could use a single property value to turn multiple different values on and off across multiple different properties and even across multiple CSS rules?
It’s the same trick! In Lea’s example, though, she uses this ability to:
This really hones in on why this is the concept is so cool.
Lea points to some downsides:
There is no way to say “the background should be red if
--foois set and white otherwise”. Some such conditionals can be emulated with clever use of appending, but not most.And of course there’s a certain readability issue:
--foo: ;looks like a mistake and--foo: initiallooks pretty weird, unless you’re aware of this technique.
We’re certainly entering the next era of how custom properties are used. First, we used them like preprocessor variables. Then we started seeing more cascade and fallback usage. Next, we used it alongside JavaScript more frequently. Now this.
There is even more writing about keeping CSS preprocessor variables around, not so much for the times when you only need what they can do, but for the things that only they can do, like having their color values manipulated.
The post The CSS Custom Property Toggle Trick appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
The other day we announced the first ten sessions for Sight Tech Global, a virtual event Dec. 2-3 that is convening the world’s top technologists to discuss how AI-based technologies are revolutionizing the future of accessibility. Today, we’re pleased to announce three additional sessions. Registration is free and and open now.
Apple has long embraced accessibility as a bedrock design principle. Not only has Apple created some of the most popular consumer products in history, these same products are also some of the most powerful assistive devices ever. Apple’s Sarah Herrlinger and Jeffrey Bigham will discuss the latest accessibility technology from Apple and how the company fosters a culture of innovation, empowerment and inclusion.
Sarah Herrlinger, senior director of Global Accessibility Policy & Initiatives, Apple
Jeffrey Bigham, research lead, AI/ML accessibility Research, Apple
Moderator: Matthew Panzarino, editor-in-chief, TechCrunch
When technologists design exciting new innovations, those designs rarely include blind people. Advocates urge us to employ a variety of strategies, from education to litigation, to ensure accessibility is baked into all future tech. Harvard Law’s first deaf-blind graduate Haben Girma, disability rights attorney Lainey Feingold and International Digital Publishing Forum president George Kerscher will discuss strategies for creating a future fully accessible to blind people, including those who are Black, Indigenous and people of color.
Haben Girma, disability rights lawyer, speaker, and author of Haben: The Deafblind Woman Who Conquered Harvard Law
Lainey Feingold, disability rights lawyer and author of Structured Negotiations: A Winning Alternative to Lawsuits
George Kerscher, chief innovations officer for the DAISY Consortium, senior advisor for Benetech’s Global Education and Literacy Group and president of the International Digital Publishing Forum (IDPF)
Moderator: Megan Rose Dickey, senior reporter, TechCrunch
Technologists like to imagine how their work affects people, but that’s no substitute for truly knowing the real impact on lives, or better yet, understanding what people, especially people with disabilities, really want from their surroundings and community. In her recent book, What Can a Body Do? professor and designer Sara Hendren’s “aim … isn’t to throw cold water on innovation; it’s to recenter the people, behind the tools, who must work with their surroundings, their adaptations at least as miraculous as the technology that helps them.” (Katy Waldman, in her New Yorker review)
Sara Hendren, associate professor, Olin College
Moderator: Will Butler, vice president, Be My Eyes
Keep an eye out for more sessions and breakouts in early November. In the meantime, registration is open. Get your pass today!
Sight Tech Global is eager to hear from potential sponsors. We’re grateful to current sponsors Amazon, Ford, Google, Humanware, Microsoft, Mojo Vision, Salesforce, Waymo and Wells Fargo. All sponsorship revenues go to the nonprofit Vista Center for the Blind and Visually Impaired, which has been serving the Silicon Valley area for 75 years.
Back in August 2020, when the content-visiblity property in CSS trickled its way into Chrome browsers, Una Kravets and Vladimir Levin wrote about it and we covered it. The weirdest part is that to get the performance value out of it, you pair it with contain-intrinsic-size on these big chunks of the page where you insert some arbitrary guess at a height. I wrote:
That part seems super weird to me. Just guess at a height? What if I’m wrong? Can I hurt performance? Can (or should) I change that value at different viewports if the height difference between small and large screens is drastic?
Jake Archibald and Das Surma just did a video on all this and it helped clarify that a bit. You can see at about 7:30 in just how confusing it is. Jake used this massive HTML spec page as a demo, and made <section> wrappers around big chunks of HTML, and applied:
section {
content-visibility: auto; /* this is the thing that delays painting */
contain-intrinsic-size: 1px 5000px; /* this is the guess at the height of the content, and also saying width doesn't matter */
}Apparently that 5000px isn’t the height of the element, it’s the size of the content of that element. I guess that matters because it will push that parent element taller by that number, unless the parent element overrides that with a height of its own. The magic comes from the fact that the browser will only paint¹ the first section (where it’s very likely the viewport isn’t over 5000px tall) and defer the painting on the rest. Sorta like lazy loading, but everything rather than media alone. It assumes the next section is 5000px tall, but once the top of it becomes visible, it will actually get painted and the correct height will be known. So assuming your page is just big ass blocks on top of each other, using an extremely large number should work fine there. Godspeed if your site is more complicated than that, I guess.
It’s a good video and you should watch it:
This is yet another thing where you have to inform the browser about your site so that it can Do Performance Good™. It is information that it can figure out by itself, but not until it has done things that have a performance cost. So you have to tell it up front, allowing it to avoid doing certain types of work. With responsive images, if we give images a srcset attribute with images and tell the browser in advance how big they are, including a sizes attribute with information about how our CSS behaves, it can do calculations ahead of time that only download the best possible image. Likewise, with the will-change property in CSS, we can tell the browser when we’re going to be doing movement ahead of time so it can pre-optimize for that in a way it couldn’t otherwise. It’s understandable, but a little tiresome. It’s like we need a stuff-you-need-to-know.manifest file to give browsers before it does anything else — only that would be an additional request!
The accessibility implications are important too. Steve Faulkner did a test applying content-visibility: auto to images and paragraphs:
The content is visually hidden, but in both JAWS and NVDA the hidden
<img>is announced but the content of the<p>element is not. This has to do with how theimgand thepelement content are represented in the browser accessibility tree: Theimgis exposed in the accessibility tree with thealttext as the accessible name. The content of thepelement is not present in the accessibility tree.
He notes that content hidden this way should not be available to screen readers, per the spec. I could see it going either way, like hide it all as if it was display: none, meaning none of it is in the accessibility tree. Or, leave it all in the accessibility tree. Right now it’s a tweener where you might see a bunch of stray images in the accessibility tree without any other context than their alt text. This is an interesting example of new tech going out with more rough edges than you might like to see.
Speaking of alt text, we all know those shouldn’t be empty when they represent important content that needs to be described to someone who can’t see them. They should be like paragraphs, says Dave:
I finally made the simplest of all connections:
alttext is like a paragraph. Word pictures. Basic I know, but it helps me contextualize how to write goodalttext as well as source order of my code.
I don’t want to be overly negative here! The performance gains for setting up a long-scrolling page with content-visibility is huge and that’s awesome. Being able to inform the browser about what is OK not to paint in two lines of code is pretty nice.
The post More on content-visibility appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Audible, the Amazon-owned audiobook company, is further expanding into podcasts with the addition of approximately 100,000 of podcasts, totaling 5 million episodes to its service. The shows will be offered for free streaming to Audible members and non-subscribers alike, Audible says.
Included in the new lineup are top podcasts like Pod Save America, You’re Wrong About, This American Life, Conan O’Brien Needs a Friend, and FiveThirtyEight Politics, to name a few.
The company told TechCrunch the additions did not come by way of any recent partnerships or new deals with podcast providers, but are instead a part of Audible’s ongoing efforts to become known as a provide of “premium audio storytelling and entertainment.”
It seems that Audible will use the free programming to entice users to subscribe to its paid service, where they’ll gain access to Audible’s collection of exclusive programs, Audible Originals.
Image Credits: Audible
Audible has actually had its eye on podcasts for some time. Back in 2016, it announced a new service then called “Audible Channels.” that featured bite-sized original audio content from publishers that had included the NYT, WSJ, The Washington Post, and others.
Today, the company has grown its collection of original spoken word content to include documentaries, theater, and sleep programs, and more. It also features a number of exclusive podcasts for members only.
This summer, Audible introduced a new, cheaper subscription plan, Audible Plus, to connect users to its growing collection of originals. The $7.95 per month membership now offers over 11,000 pieces of content from names like Common, Jamie Lee Curtis, Tom Morello, Blake Griffin, André Aciman, Tayari Jones, Jesse Eisenberg, St. Vincent, Kevin Bacon, Kate Mara, Maria Bamford, Alanis Morissette, Harvey Fierstein, and more.
The Plus plan, however, doesn’t include credits to download audiobooks, as on the $14.95 per month Audible Premium Plus plan. (Audible consolidated its Gold and Platinum plans and rebranded it). It’s just focused on other audio content.
With the addition of free, third-party podcasts, Audible has the chance to capture users’ attention in its app, then try to upsell them to paid memberships, including the new Plus plan.
Audible announced its plans for the expanded podcast selection on Tuesday, but the new section itself didn’t launch until today.
On the refreshed website, Audible arranges the podcasts in horizontal rows as “Top Free” podcasts and “Popular,” the latter which allows it to feature its originals. It also offers thematic grouping, like true crime, comedy, business and management, news, fiction, science and technology, self development and many others.
Image Credits: Audible, screenshot via TechCrunch
Those exclusive to Audible are also labeled with a yellow banner on the image thumbnail, in another push to upgrade.
The new additions can also be found in the Audible mobile app, under the “Podcasts” section, where you can follow shows, rate them, and stream episodes, much like any other podcast client app.
Podcasts are a significant source of investment for streaming services these days, with Spotify having snapped up studios and podcast startups to increase its output of audio programming and original content. Pandora parent SiriusXM, meanwhile, just completed its acquisition of Stitcher, which included its podcast service, ad network and content network Earwolf. Even Apple has begun to more seriously dabble in the format.
Audible says more shows and podcasts will be added in the weeks and months ahead.
There are so many static site generators (SSGs). It’s overwhelming trying to decide where to start. While an abundance of helpful articles may help wade through the (popular) options, they don’t magically make the decision easy.
I’ve been on a quest to help make that decision easier. A colleague of mine built a static site generator evaluation cheatsheet. It provides a really nice snapshot across numerous popular SSG choices. What’s missing is how they actually perform in action.
One feature every static site generator has in common is that it takes input data, runs it through a templating engine, and outputs HTML files. We typically refer to this process as The Build.
There’s too much nuance, context, and variability needed to compare how various SSGs perform during the build process to display on a spreadsheet — and thus begins our test to benchmark build times against popular static site generators.
This isn’t just to determine which SSG is fastest. Hugo already has that reputation. I mean, they say it on their website — The world’s fastest framework for building websites — so it must be true!
This is an in-depth comparison of build times across multiple popular SSGs and, more importantly, to analyze why those build times look the way they do. Blindly choosing the fastest or discrediting the slowest would be a mistake. Let’s find out why.
The testing process is designed to start simple — with just a few popular SSGs and a simple data format. A foundation on which to expand to more SSGs and more nuanced data. For today, the test includes six popular SSG choices:
Each test used the following approach and conditions:
These tests are considered benchmark tests. They are using basic Markdown files and outputting unstyled HTML into the built output.
In other words, the output is technically a website that could be deployed to production, though it’s not really a real-world scenario. Instead, this provides a baseline comparison among these frameworks. The choices you make as a developer using one of these frameworks will adjust the build times in various ways (usually by slowing it down).
For example, one way in which this doesn’t represent the real-world is that we’re testing cold builds. In the real-world, if you have 10,000 Markdown files as your data source and are using Gatsby, you’re going to make use of Gatsby’s cache, which will greatly reduce the build times (by as much as half).
The same can be said for incremental builds, which are related to warm versus cold runs in that they only build the file that changed. We’re not testing the incremental approach in these tests (at this time).
Before we do that, let’s first consider that there are really two tiers of static site generators. Let’s call them basic and advanced.
I intentionally chose three of each type of generator in this test. Falling into the basic bucket would be Eleventy, Hugo, and Jekyll. The other three are based on a front-end framework and ship with various amounts of tooling. Gatsby and Next are built on React, while Nuxt is built atop Vue.
| Basic generators | Advanced generators |
|---|---|
| Eleventy | Gatsby |
| Hugo | Next |
| Jekyll | Nuxt |
Let’s apply the scientific method to this approach because science is fun (and useful)!
My hypothesis is that if an SSG is advanced, then it will perform slower than a basic SSG. I believe the results will reflect that because advanced SSGs have more overhead than basic SSGs. Thus, it’s likely that we’re going to see both groups of generators — basic and advanced — bundled together, in the results with basic generators moving significantly quicker.
Let me expand on that hypothesis a bit.
Hugo and Eleventy will fly with smaller datasets. They are (relatively) simple processes in Go and Node.js, respectively, and their build output will reflect that. While both SSG will slow down as the number of files grows, I expect them to remain at the top of the class, though Eleventy may be a little less linear at scale, simply because Go tends to be more performant than Node.
The advanced, or framework-bound SSGs, will start out and appear slow. I suspect a single-file test to contain a significant difference — milliseconds for the basic ones, compared to several seconds for Gatsby, Next, and Nuxt.
The framework-based SSGs are each built using webpack, bringing a significant amount of overhead along with it, regardless of the amount of content they are processing. That’s the baggage we sign up for in using those tools (more on this later).
But, as we add thousands of files, I suspect we’ll see the gap between the buckets close, though the advanced SSG group will stay farther behind by some significant amount.
In the advanced SSG group, I expect Gatsby to be the fastest, only because it doesn’t have a server-side component to worry about — but that’s just a gut feeling. Next and Nuxt may have optimized this to the point where, if we’re not using that feature, it won’t affect build times. And I suspect Nuxt will beat out Next, only because there is a little less overhead with Vue, compared to React.
Ruby is infamously slow. It’s gotten more performant over time, but I don’t expect it to scale with Node, and certainly not with Go. And yet, at the same time, it doesn’t have the baggage of a framework.
At first, I think we’ll see Jekyll as pretty speedy, perhaps even indistinguishable from Eleventy. But as we get to the thousands of files, the performance will take a hit. My gut feeling is that there may exist a point at which Jekyll becomes the slowest of all six. We’ll push up to the 100,000 mark to see for sure.
The code that powers these tests are on GitHub. There’s also a site that shows the relative results.
After many iterations of building out a foundation on which these tests could be run, I ended up with a series of 10 runs in three different datasets:
Click or tap the images to view them larger.
A few results were surprising to me, while others were expected. Here are the high-level points:
When I shared my results with the creators and maintainers of these SSGs, I generally received the same message. To paraphrase:
The generators that take more time to build do so because they are doing more. They are bringing more to the table for developers to work with, whereas the faster sites (i.e. the “basic” tools) focus their efforts largely in converting templates into HTML files.
I agree.
To sum it up: Scaling Jamstack sites is hard.
The challenges that will present themselves to you, Developer, as you scale a site will vary depending on the site you’re trying to build. That data isn’t captured here because it can’t be — every project is unique in some way.
What it really comes down to is your level of tolerance for waiting in exchange for developer experience.
For example, if you’re going to build a large, image-heavy site with Gatsby, you’re going to pay for it with build times, but you’re also given an immense network of plugins and a foundation on which to build a solid, organized, component-based website. Do the same with Jekyll, and it’s going to take a lot more effort to stay organized and efficient throughout the process, though your builds may run faster.
At work, I typically build sites with Gatsby (or Next, depending on the level of dynamic interactivity required). We’ve worked with the Gatsby framework to build a core on which we can rapidly build highly-customized, image-rich websites, packed with an abundance of components. Our builds become slower as the sites scale, but that’s when we get creative by implementing micro front-ends, offloading image processing, implementing content previews, along with many other optimizations.
On the side, I tend to prefer working with Eleventy. It’s usually just me writing code, and my needs are much simpler. (I like to think of myself as a good client for myself.) I feel I have more control over the output files, which makes it easier for me to get 💯s on client-side performance, and that’s important to me.
In the end, this isn’t only about what is fast or slow. It’s about what works best for you and how long you’re willing to wait.
This is just the beginning! The goal of this effort was to create a foundation on which we can, together, benchmark relative build times across popular static site generators.
What ideas do you have? What holes can you poke in the process? What can we do to tighten up these tests? How can we make them more like real-world scenarios? Should we offload the processing to a dedicated machine?
These are the questions I’d love for you to help me answer. Let’s talk about it.
The post Comparing Static Site Generator Build Times appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
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...
