| Facebook's surprise power play, Snowpack reimagines bundlers, build directionally lit CSS buttons, the real problem with front-end, and the new Trello No images? Click here SitePoint Weekly #20
Tunnelvision 💾 The Loop
Just published on SitePoint Jack FranklinFront-end build tool Snowpack is turning heads in the community. It's not an iterative improvement on bundlers like webpack so much as a reimagination of approach and philosophy. The result? Less complexity to manage and extremely fast compile times — even for large projects. Snowpack is a tool you'll want to add to your kit, and you can do that in under an hour with our guide from Chrome DevTools engineer Jack Franklin. ➤ Read more Jhey Thompkins Ever thought of adding lighting effects to your UI buttons? You can! Learn how to create directionally lit 3D buttons with CSS and just a little bit of JS. Not landing as many job interviews as you hoped? Learn ten simple resumé tweaks that will improve your chances of getting a developer job interview. Just updated for 2021: Learn what a static site generator does, how they form the cornerstone of the Jamstack, and how to choose between seven leading options. Timothy Boronczyk When COVID-19 took Tim's Esperanto meetup online, he needed new activities to engage and retain members. Here's how he spun up a Wheel of Fortune game in JavaScript quickly for screen sharing on Zoom. Daniel Schwarz Wireframes are important to a good UX result. Learn how to use Figma to figure out the best UX design for your layout. Get one year on a .design domain name for free! Tell the world exactly who you are and what you do with your own .design domain, the most elegant and functional option for professional designers. Get yours here today. Sponsored ♾️ Versioning
Web development, design, and tooling Remy Sharp weighs in on the war against frameworks: the web didn't change; you did. I had a conversation along these lines with SitePoint's GM, Mark O'Neil, recently: if you're adding 2MB of React to pages where it's unnecessary... stop doing that! Sometimes the problem is that it's not your call to make. Baldur Bjarnason has more to say on this topic in Everybody is pussyfooting around the actual problem in front-end development. The gist: that's still a decision-making problem, not a problem caused by the existence of options. Don't be the Australian government. Read a technical deep dive on how the V8 team goes about making JavaScript calls faster.If we stopped thinking of responsive web apps and accessible web apps in isolation from one another, what would that entail? Joy Heron offers Responsible Web Applications as a complete model and breaks down exactly what is involved in building to that standard.RoyalSloth, which is quite a name, examines the complexity that lives in the GUI.Prototypr analyzes some of the worst dark patterns baked into UI copy today, such as cookie warnings that frustrate you into acceptance.If you want to get some insight into how a JavaScript runtime is approached and built from the expert on the matter, this interview with Node.js and Deno creator Ryan Dahl is worth reading.Use CSS Variables instead of React Context, suggests Kent Dodds.Recipe websites, data modeling, and user experience is the start of a case study series on building a better recipe website. This first part demonstrates the case for considering your data models before you start building.Building Rich terminal dashboards shows you how to build terminal dashboards using a tool called Rich. The resulting dashboards are rich with information. There's no wrong way to read that title.Ten design tips to level up your next project: the most impactful design concepts to internalize if you want to improve your DIY design jobs without becoming a designer.Nick Sr describes designing and building a website entirely on his iPad because he is a crazy person. His words flipped into the third-person, to be clear! (I don't know what my fascination with these iPad development articles is all about, but I hope at least one of you shares it.)Tutorials & Projects Fluid typography with CSS clampBuilding a Reactive Library from ScratchHow we built a profile card generator for StorybookVue.js Debugging: A Guide to Fixing Your FrontendNanoNeuron - 7 simple JS functions that explain how machines learnTools & Templates surfcodes/surf is a tool for browsing GitHub repo code with a browser-based instance of VS Code, with a CLI, Chrome extension, and GitLab support.Tauri is a new Electron alternative written in Rust, which should be interesting to keep an eye on if you are also sick of maxing out specs on new devices only for them to run like a mid-2000s budget netbook that mines crypto 24/7.Windi CSS is a next-generation Tailwind CSS compiler that promises faster compile times, and hot reloads during development.tidy.js describes itself as an attempt to "bring the ergonomics of data manipulation from R to JavaScript (and TypeScript)." In other words, it's a tool for making JavaScript code that handles data as readable and maintainable as code written in a language designed for that job.Sturdy is a new tool that helps you prevent merge conflicts before you enjoy the headache of fixing one.SmolCSS is a collection of minimal snippets for running with modern CSS layouts and components quickly. It's from Stephanie Eckles, whose Eleventy starters we mentioned last year. ♾️ The Roadmap
Product, strategy, execution, and work Stéphanie Walter and Laurence Vagner have released a set of 52 UX cards to discover cognitive biases during the design process for a more robust result. You can download the set for free.Clubhouse has emerged as a greenfield platform for those looking to build a community. Mixily shares strategies for doing so in Building Community On and Off Clubhouse.If you're more interested in video, Luma is a tool for hosting better Zoom events that handles everything from ticketing to analytics.Formulog is a no-code tool for creating newsletter landing pages and automatically generating archives. It's an early product, and the UI lacks some chrome, but it's worth a look if you want more control over the pitch than Substack offers. Tools like MailerLite have great landing page builders these days, but automating archives isn't always straightforward.I avoid sharing unreleased products. An exception for an unusual concept: NotionMailer turns Notion into your email campaign builder. Can we look forward to a stable of API-first ESPs and headless authoring tools that take cues from the Jamstack? Robust ESP APIs abound, but for most people, the email experience still means battling with awkward builders or (my sympathies) email HTML. Buttondown is an excellent tool for bringing your Markdown workflows to email but keeps things simple so you can focus on content. It may lack the power you need in a more extensive operation.Process St shares its experience using Shape Up to replace Scrum and cut its dev cycle by 75%. You don't need me to tell you that a 75% faster ship rate is a make or break improvement.How do you kill a unicorn? When data flowed more freely, adversarial interoperability was one way, but platforms know better than to leave those attack vectors open today. Chris Frantz looks at Canva and Figma and how the right freemium model can reshape a market with a traditionally entrenched userbase.Neglecting your product's social proof evidence is easy to do. Shoutout is a tool for managing the tweets on display so customer testimonials can be kept fresh without tying up your side-project time or dev capacity at work. The masonry tweet layout is an eye-catching alternative to more common styles.Tripetto sells itself as a Typeform alternative that provides advanced no-code calculation tools, conversational logic flows, completion rate optimization, and better insights from the data you collect. The payment model is a refreshing experiment: $0 to build unlimited forms with all features, $89 to remove Tripetto branding for a specific form. ♾️ Logic Flow
Computing, automation, productivity, and tools for thought Trello has launched a major refresh. The headline feature is Views, such as a calendar and dashboard view, and you can think of them like the views in Notion databases. You'll need to be a subscriber to use these. There isn't an individual-oriented plan at present, and it'd be nice to see that return, but Trello has given away so much of its product for so long that it's hard to complain, and all products need to justify themselves financially at some point. For all users, new referential card types are available. Link cards mean you can reference data stored elsewhere when you want to manage the task via Trello by using the URL as the card title.Board cards work the same way, but as you'd expect are for linking Trello boards together. I don't think Trello had a path to future viability without the ability to create hierarchies of boards, so this is great news.Mirror cards aren't ready, but they'll allow you to clone one card across multiple boards. A single source of truth that can be progressed on multiple fronts is a big deal. Mirror cards would improve workflows in the Notion workspace the SitePoint editorial team uses today.A refreshed sidebar lets you switch between workspaces to see your starred boards, team views, and then all boards. This is something I hope the team tackles sooner rather than later. Starring as the only organizational tool was a huge limitation for me with 50+ boards when we moved, and it sounds like we're only getting refinements. Hopefully, this is just the start, but folders are a basic feature that this app needs so badly. Trello does kanban boards better than anyone else, and it's great when you need to get a project into a contained, focused workspace and get it done. Today's options offer enough flexibility that they can handle both simple and complex cases comfortably, which must have presented a significant challenge for Trello having been built on the concept of single boards in isolation. We're getting a glimpse of the path they've chosen, and I think it's tentatively promising. — Some good introductory pieces on personal knowledge management this week, focused on the concepts rather than a single tool: An Introduction to Personal Knowledge Management for Creatives on The Sweet Setup is a high-level view of the space and practices.How to get started with tools like Obsidian from Chris Bowler offers a mental model for getting started as a beginner and deriving early value from tools like Obsidian and Roam.As the title Chris chose reflects, we still haven't got a satisfying name for this class of apps within the personal knowledge management category. Some have been floated, none of them seem to stick in memory. Let me know if you've got a good one in mind! Here's Smashing on building your own personal learning curriculum. Whether you're using SitePoint Premium's library, articles and videos on the web, or a la carte courses, this is such a crucial part of autodidactic learning. Well worth a read.Like the idea of Clubhouse, but don't want to use Clubhouse? Jam is an open-source alternative for hosting audio spaces.GitHub Skyline is a fun visualizer from GitHub themselves that renders your contribution chart as a 3D skyline.Battery Buddy is the macOS menubar battery meter... but made into a buddy. No features, just a fun cosmetic touch if you feel like your slab of unibody aluminum has been a little impersonal lately.Linux Kernel 5.11 is here, and it brings kernel support to some of the latest hardware. Wi-Fi 6E, RTX Ampere GPUs (which is the RTX 30xx series), and Intel Iris Xe are a few of the highlights.Brick is a lightweight platform for creating small sites. The makers describe it as what Google Docs would look like if built to make focused sites for something like an event or personal one-pager.Ray.so is another tool for making images of code snippets. This one's browser-based, and at this point, there are enough options that you can choose based on your preferred style.YunoHost makes it easy to get into self-hosting, whether you want to host a team intranet or make your projects accessible to friends without shelling out. ♾️ 🍕 The Rundown
Top technology stories this weekOutside of a few offices somewhere in Menlo Park, nobody expected a struggle between two tussling powers to erupt in such a spectacular fashion as this week closed out. One of these powers governs a technologically advanced, multicultural state that isn't quite a monarchy or republic, and of course, the other is Australia. Facebook has called the Australian government's bluff on news payments and left the ball in Parliament's court: a sudden, decisive show of defiance that appears calculated to put Australia on the back foot and cause other circling aggressors to falter in their resolve. If you've missed the story, here's the context. The Australian government has been planning to legislate a media bargaining code that requires companies like Facebook and Google to pay news organizations for the stories they link to on their platforms. The bill is a mess, and it's not specific — you could interpret it as requiring Google to pay a writer for linking to their Substack in search results, according to those who have read the text. It's also a near certainty that Australia's most famous homegrown Emperor Palpatine cosplayer, Rupert Murdoch, ordered it up himself. The pitch is that this is compensation for the value aggregators derive from news organizations when those aggregators surface links to their content, and if you're scratching your head right now... well, you should be. Google has insisted for some time that it would pull Search from the country if this went ahead, only to fold and make its own alternative to demonstrate that no legislation is necessary for it to pay to link to others. Facebook has taken the opposite approach and announced that it would immediately block news links from being seen or shared in the country. It didn't even wait for the legislation to pass. It was especially notable for the unexpected display of power executed with understated certainty — not the cartoon villain we're accustomed to. This is Facebook taking Australia at its word when it says the law as drafted will be legislated and proceeding accordingly. Facebook says it will interpret the bill generously to provide it with the proper respect, and we'll return to this. The company was happy to excise the source of the conflict without blinking. Facebook is entirely backable in its position. It's a weird feeling. It's rare for many of us to find ourselves agreeing with Mark Zuckerberg's public positions. While Facebook benefits from defending this position, I suspect the motives are not ulterior so much as naturally aligned. To suggest that one should pay to link to content is absurd. If you claimed you were going to reverse the flow of value in a monetary system so that you are considered a beneficiary when you spend, and your plan for enacting that is to declare that this is the case, nobody would take you seriously, and the conservative Liberal Party government responsible for this idea would consider you its ideological enemy. But they'd at least be right to laugh. Links might represent a comparatively insignificant store of value, but the direction that value flows in is just as inherent to their function as it is with money. Our leaders are like playing children, pretending to be superheroes on the playground and narrating the effects of their powers to compensate for the lack of any other sign they exist. Confounding the situation is that Facebook and Google do more to distort the directional value of a hyperlink than anyone. Facebook does use outside content to generate engagement material while reducing the likelihood of outflow and keeping the most profitable engagement activity on-platform — unless someone's paying for the ticket off. This is pretty well-covered, and you can see how good social companies have gotten at influencing when there should be a certain type of outcome in their advertising tools. Snippets are Google's most obvious equivalent. Today, most search results include units that aim to eliminate the need to click through while using the destination's extracted content to do so. The units are effective and get better every year. It's already more likely that a user won't need to click on your link than that the search will result in a visit. In 2019, 49% of queries resulted in no click at all. Take out the clicks to other Google properties, like Maps, and the number of searches that end in an off-platform click is even lower at 41.45%. Google's efforts to keep users on-platform aren't as well-concealed as Facebook's, but we'll hand them that it's less egregious. The user at least derives value from it. Where it gets twisted is that even as these snippets become more effective at preventing off-platform clicks, publishers are forced to provide the metadata that enables them to remain viable longer. Fewer queries result in a click, but the bulk of clicks are still to the first result. The alternative is to give it up to another site. Google will construct these snippets from your content itself if there's no schema present or if it thinks its snippet extracts better content. It's competition with other sites that Google leverages, so you'll perform the data processing it uses to compete with you as an alternative end destination. Australia isn't shaking down the innocent, or even the naturally flawed, or even the only slightly malicious. But when drafting vague legislation with far-reaching implications, tit-for-tat is not part of the criteria. The solution does more to distort the way the web functions locally than any of these questionable practices do. Or as Mike Masnick at Techdirt puts it in The Bizarre Reaction To Facebook's Decision To Get Out Of The News Business In Australia: Facebook is a terrible, terrible company and deserves lots of blame for lots of bad things that it does. But this ain't it. To qualify as a solution, an approach shouldn't create more significant problems or solve the wrong ones. Even Tim Berners-Lee called this particular solution out to say it'd make the web unworkable. Back on our playground protagonists, this is part of the government's response via the Treasurer, Josh Frydenberg: “He [Zuckerberg] endangered public safety. In the middle of a pandemic, people weren’t able to get access to information about the vaccines." This quote isn't about the general news ban. Facebook initially hid links posted by government departments from local emergency services and social services like 1800RESPECT, which supports victims of sexual assault and domestic violence. It was a pointed choice Facebook made to criticize the bill's lack of specificity, later confirming it had intentionally "taken a broad view in order to respect the law as drafted." Indefensible selections for making that point and a classic Facebook bungling of the sort of basic judgment that is impossible to explain or excuse. But there's hypocrisy in Frydenberg's criticisms. Awareness campaigns are a key way governments get important information distributed, and naturally, Facebook is one of the channels in the media mix. But if it's not just a channel and this US commercial interest serves as a dependency, that seems like a government decision-making problem. It's not like your government notices hit your newsfeed instead of your email and MyGov accounts. News isn't scarce outside of the Facebook feed either. But it's the Liberal Party's initiative that will make it harder to access news or be exposed to it in doing other things. It must have been a tough statement to make with a straight face. If the distribution of news to the public is that high of a priority for the government, why is it seeking to make its distribution a cost center for the platforms? There's no coherent philosophy underpinned by even rudimentary intellectual rigor. Go after aggregators making product decisions to reduce click-off to the aggregated data source, or even ask Google to pay snippet scrapees the full ad revenue from those no-click searches. Anything would make more sense. Frydenberg himself doesn't seem to know what he believes about the most fundamental assumption of the government's argument. Do platforms capture value when they distribute information and links? Or are they performing an essential public service? Facebook's bet seems to be that Rupert (and other more genuine and probably more financially pressed organizations) will see traffic drop and call the Australian government off the whole thing. They have gathered that blocking news in Australia indefinitely is something they can easily afford to do. More so still if it serves as a deterrent elsewhere — apparently, our bad idea has other fans. That's a reasonable bet for Facebook to make. At the same time, Facebook forced media organizations to diversify away from that dependency in 2016, when it cratered outbound traffic to publishers as advertising CPMs were tumbling below another threshold in their decade-long decline. I can imagine News Corp being an exception to this, but most publishers don't count on Facebook's referral traffic in 2021. It's insignificant. We all know that baby pictures don't drive engagement. There's an extent to which it needs to allow users to share news, and at least in more countries than not. Facebook stands to gain if it can stare this situation down, but it could also simply secure the status quo for pennies on the dollar with an agreement or an initiative like Google's. It's eager to make a deal on Section 230 and welcomes the massive costs of comprehensive moderation, where those costs are a defensive asset because they are massive. They turn its size into a moat and put the cost of a competitive attack outside the reach of most budgets. Does it view soft external protections like legislation as fair game for dismantlement in business, but the intended functioning of the web itself as too important a dependency to compromise? Is it just picking the most opportunistic position in each case? These questions are so unanswerable that they're functionally irrelevant. They're interesting. But it's better to focus on its actions and an unflavored interpretation of the resulting outcomes. Facebook has always been comfortable with edges. Whether or not its motives are altruistic, it is in a position we rarely see — making its bet on protecting the most essential and atomic units of the open web. Google made a lot more noise but lost its nerve. News media is now Google's dependent for who knows how long. Google's folding may also end up going down as a smart call. It's parting with this revenue voluntarily rather than waiting for politicians to turn the internet upside down, gets a better deal on terms it sets, and takes all the public relations pot left on the table by Facebook. Facebook's non-compliance could be a risk for Google if it results in a more prescriptive revision of the legislation that unravels their play. And if Australia starts an international trend, Facebook would find itself in a challenging position. But so would the web. For now, there are more new questions than answers. Thinking about what this means is an exercise in speculation, just as our guesses at the way Facebook and Google are approaching these issues internally are. The next step will be to see whether the code becomes law, and that's a decision Parliament will have to make with everyone watching. Further Reading Casey Newton's Platformer - Facebook calls Australia's bluffThe Bizarre Reaction To Facebook's Decision To Get Out Of The News Business In AustraliaAustralian law could make the internet ‘unworkable,’ says World Wide Web inventor Tim Berners-LeeAnd for a bit of comic relief, the bloopers: Australia facepalms as Facebook blocks bookstores, sport, health services instead of just newsFacebook Accidentally Blocks Its Own Page in Australia Following News Ban In Brief Facebook moderators 'told not to discuss working conditions'Facebook fined again in Italy for misleading users over what it does with their dataFacebook knew for years ad reach estimates were based on ‘wrong data’ but blocked fixes over revenue impact, per court filingEpic Games steps up Apple fight with EU antitrust complaintApple cracks down on apps with ‘irrationally high prices’ as App Store scams are exposedApple is adding to eWaste with vision to go portlessHere’s a first look at Microsoft’s xCloud for the webTikTok is accused of disguising ads to kids and moreLastPass free restricts users to one device type in MarchEFF to First Circuit: schools should not be policing students’ weekend Snapchat postsUber shuts down app that told drivers if Uber underpaid them, citing a trademark violation to do soFor the Weekend The Startup: “User Engagement” Is Code for “Addiction”New Yorker: Who Should Stop Unethical A.I.?Stratechery: Clubhouse’s Inevitability ♾️ Pay Day
Thank you for supporting the partners making SitePoint possible A .design domain name allows you to create a more elegant URL for your portfolio. Get 1 year completely free today.Web design trends come and go, and 2020 was no exception. Read about a few of the trends web designers can expect in 2021. Sponsored Connect with the communityThat's another issue down, and a lot of ground covered! Remember not to open all the links at once without the system resources to handle that much JavaScript and an emergency fire plan. I'll be back next week with tempting links to earn your trust and your usual serving of sky-oriented fist-shaking. If you want to chat in the interim, I can often be found on our Discord server, and there are always members of the team getting involved in discussions on the SitePoint forums (and a lot of awesome like-minded people to meet in both places). You can see what else we're up to between issues on Twitter, or stop by the site to read new articles, but we'll be sure to keep you in the loop right here in your inbox next week. Until then! 👋 P.S. If you want to share SitePoint Weekly, here's a sharing-safe link to this issue with your email and preferences removed. You can also send your friends right to the subscription page. Just between you and me, this will let them subscribe to SitePoint Weekly directly, so we can keep things casual (no marketing emails, just link-littered goodness). SitePoint
Level 1, 110 Johnston St
Fitzroy VIC 3065
Australia Product links may be affiliate links and are used when available, and editorial decisions are never made on this basis.
You're receiving this email because you signed up to receive news from SitePoint. Smart choice! Share Tweet Share Forward Preferences | Unsubscribe | 