Web Development

The guy with the great hair at Web Dev Simplified has made a “How To Handle Permissions Like A Senior Dev” video which addresses the issues that my Engaging OS handles. He comes to a slightly different solution, relying on a third-party setup, something I hadn’t even thought of doing, abstracting out the permissions. And I think I’ve been made to understand that attributes are not just a better and more detailed way to organize the user/role’s permissions, but liberate the user/role from primacy in handling permissions.

Via Hacker News, this Chrome for Developers post dives into browser colors beyond RGB.

In “What’s your problem with Tailwind?” Chris Ferdinandi of Go Make Things articulates and illustrates why I’ve instinctively shied away from CSS frameworks:

It is faster during the prototyping phase… And then there inevitably comes a time where I need to update the style. Now, instead of just making a single change on a single class in a CSS file, I make a dozen little changes across numerous HTML elements scattered across many pages.

Basically, the styling code ends up being in the HTML, where it does not belong, rather than in the CSS, where it does.

At Why Svelte?, the homepage states “CSS is component-scoped by default” ⁠— the “by default” being the compliment vice pays to virtue. Because at the Github discussion on this issue (Ability to disable css scope across entire application #4764), Svelte Core Member/Maintainer @Conduitry, 2nd in commits only to founder Rich Harris, writes:

In general, using global CSS everywhere is something we want to steer people away from, and doesn’t feel like something we want to natively make easy or tacitly endorse.

The “C” in “CSS” stands for “cascading” yet the purpose of scoping CSS in components is to neuter that cascade. For the poster of this issue, Svelte’s stance was a dealbreaker, as it would be for me too. Scoped CSS components are the wussy option, which is fine and in many cases perhaps more viable, but the wussy option they should remain.

You’re looking at a story originally written to the ExpressionEngine content management system (albeit originally drafted on the MarsEdit blogging client for MacOS), but the web software stack I’ve migrated to is Strapi + Nuxt connected via GraphQL. With Strapi’s move from v3 to v4 however, significant changes have been made to how GraphQL is served, so much so that after reviewing things I am likely going to stick to v3, which is a first step in abandoning a software package completely. Some discussions by irate developers:

• Strapi’s request for comments regarding its GraphQL API for v4
• Discussion regarding the complex response structure for REST & GraphQL (Developer Experience)
• GraphQL Developer Experience improvements
• Is it worth migrating to v4?
• More complaints

The Strapi team justifies the change by arguing that they are following the JSON:API standard but the numerous complaints point out how verbose this gets for queries that have deep nesting, with “data.attributes” all over the place.

What a fabulous talk by Chris Coyier on the state of web design and development, “Websites are Good Now” at GatsbyConf [starts at 6:00]. He reviews our new advanced state of affairs in typography, imagery, layout, componentry (a new term to me but yes, that’s how we do it now), animation and hosting.

A tweetstorm on tagging by Hillel, with issues I’ve been mulling over myself.

Reflecting on this nice history of Meteor, the first reactive web framework, I never could build anything with it, though did attend a number of London meetups, because I was seeking reactivity and componentization after building increasingly functional websites. Only once Vue came along did I get the aha moment.

At TidBits Adam Engst points out that there are other professionals using Macs beyond “developers, photographers, filmmakers, 3D artists, scientists, music producers” who may not necessarily need such giant power but could nonetheless do with some improvements.

I remain flabbergasted that the FaceTime cameras in even Apple’s latest Macs are so pathetic. Even the cheapest iPad and iPhone put the newest Mac cameras to shame, and quite a few iPad and iPhone models have Face ID support for authentication. We’re talking about technology that Apple has used numerous times. So why isn’t it in Macs?

…

You can get an iPad with cellular connectivity, so why not a MacBook? The lack of a cellular option for Apple’s laptops has been a glaring omission for years and is yet another example of how Apple doesn’t acknowledge the needs of mobile professionals.

I hadn’t thought of any of these things, but they are obvious.

The kids wanted a Nintendo Switch. I thought ⁠— and was advised ⁠— a used Wii would be wise. Because kids, we now have both. Ever since my first computer, an Apple //c, your churlish host has considered a gaming console redundant and wasteful. But, like Apple, Nintendo it seems is a universe of excellence into which to dive. Yamauchi No. 10 Family Office is the website of the Nintendo founding family. Cool scrolling, ambitious mission, constant motion, and the music sounds like Son of Jeff Lynne.

CSS bug still not squashed: In Safari, display:flex does not work on many HTML elements, such as legend. Legend!

Inverse is a beautifully designed web magazine [should Web be capitalized?], a Joshua Topolsky joint alongside a stable of others that I’ve noticed are designwise a cut above what else is out there ⁠— Input, which is similar to Inverse and actually the two seem to unhelpfully overlap ⁠— and W, a women’s fashion mag also published by Bustle Digital Group that I normally wouldn’t have noticed but am enjoying the design.

Yet outstanding web artisanship notwithstanding, can a magazine survive if it feels ultimately corporate, which seems a danger when the job title changes from co-founder or Editor-in-Chief to Chief Content Officer, Culture & Innovation?

In Inverse the writing itself feels pretty generic, less tours-de-force by expert than relentless plodding coverage. Article after article appears on a single scroll; you never reach the end of the page, and although this is convenient, I’ve never liked this innovation, I feel overwhelmed and exhausted by it.

While the pages as a whole look great, the fact is I am not reading the articles; the san-serif body text looks like it’s less to be read than looked at. Also, it’s too far to the right on the screen. And there’s a little wobble.

From the case study by web shop Code and Theory, it appears Input and Inverse have been merged onto the same content management system, and Input was Topolsky’s technology mag baby but BDG also acquired science and entertainment site Inverse from elsewhere. No wonder the overlap.

They have a rationale for the infinite scroll:

In a world where scrolling through feeds feels second-nature, we designed Input and Inverse without traditional homepages. Upon landing on inputmag.com or inverse.com, readers see an infinite scroll of stories. Each story offers a snippet ⁠— the headline, maybe a quote, or a key stat, along with some information. The reader can then expand that story in the feed to read more, or continue scrolling.

When one story finishes, users scroll right back into the infinite stream of stories.

The stream can also be interrupted by rocks ⁠— curated content modules, e-commerce breakers and other fun interactive moments for the reader.

Maybe I’m unrepresentative of what most people like to do on the web, but I think this approch misguided. On an infinite scroll, reader becomes skimmer. Now maybe skimming is what you actually want readers to be doing on your site, not really reading the articles, thereby perhaps seeing and acting more on ads? All well and good, but skimming is less valuable and satisfying than reading an article set in a serif where the page ends when the article ends. If I read a piece, I want to feel I’ve read a piece.

One more thing: none of the subtitles has been informative but neither are they witty, rather they demonstrate that what’s leading is design not content.

In Firefox, when CSS’s scroll-snap is turned on, scrolling is broken. Yet the only mention of the problem that I can find is this open bug report at Bugzilla, “Trackpad scrolling gets stuck on containers with ‘scroll-snap-type: x mandatory’” featuring an unambiguous video of the problem. Given that both the Web and laptops are rather popular these days, I’d have thought this problem would have garnered much more attention. For me it has been a showstopper, finally causing me to make Chrome my default browser.

Vue core team member Ben Hong discusses using Nuxt 2 with Notion. Nuxt is the web dev tool I chose, Notion a major new Web platform. Exciting. Then Notion goes down in the middle of the livestream, handled by Hong with aplomb. Code Zen indeed from this “developer / psychologist hybrid”.

Gordon Brander thinks seriously about the Web vis-a-vis mobile.

By now, the web’s network advantage had evaporated. The iPhone’s native apps were internet apps, sandboxed, and talking HTTP, just like a web app. The iPhone was designed for a world that included the web. The web was not designed for a world that included the iPhone.

Bryan Braun recreated classic Mac screensavers in CSS only! It’s cool that Warp only uses 9 different stars to create that star field. [via Hacker News]

In “How to Structure a Large Scale Vue.js Application”, one piece of advice new to me is to keep a flat components folder. Author Daniel Kelly lists no fewer than 8 reasons to do so. I’m gonna let this cook, as I have indeed found nested folders sometimes problematic for some of the reasons he lists.

For me the worst two bugbears are that when there are many tabs open, their labels all get reduced to a useless homogenous “index.vue”, and that Sublime Text’s superfast all-project search doesn’t provide links to files so I have to hunt them down in my file tree.

Update: Well I never actually tried it because the file paths don’t look like links, but blimmin’ heck, double-click them and the file opens. Sababa! You’ll get my $80 soon, soon, you Ozzie geniuses.

At CSS Tricks, developer Josh Collinsworth is full of praise for Nuxt which he used to build a hangman game. The article also details how to he made his web app feel like a native app using transitions, vibrations and sounds. And then he discusses how he actually make it an app, explaining the pitfalls of various approaches. Great info.

A bit mindblowing: put the browser itself in the cloud: Mighty [Hacker News discussion].

Craig Mod reveals the consolations of we the web-literate as he tinkers with his servers. Plus the man walks and writes rather well and is probably tall to boot.

OK I haven’t actually read this yet but really honestly intend to. Via Robin Rendle on CSS Tricks via Jim Nielsen’s Blog, A Complete Guide To Accessible Front-End Components by Vitaly Friedman in Smashing Magazine.

Andy Bell outlines new CSS functionality in Smashing Magazine.

The Basecamp fellows have released a new web development paradigm, Hotwire. I don’t quite get it, but with their pedigree and skill as the makers of Ruby on Rails, this could be big.

Dave Rupert does a nice job (April 2018) listing the pitfalls of card UIs. I’m beginning to think though that for Rupert, a long list of drawbacks is throat-clearing for “I’m going ahead with this.”

Metatags.io, a very nice tool to test your metatags. Bravo, makers.

How browsers work by Tali Garsiel.

Head of Learning and Developer Advocate at NuxtJS Debbie O’Brien writes up their dogfooding experience using Nuxt to make the Nuxt web site.

Dave Seminara writes “When Your Favorite Companies Go Woke” in The Wall Street Journal (paywall).

I feel similarly regarding the homepage banners at Node.js (“#BlackLivesMatter”) and Linode (“Black Lives Matter. Linode is committed to social justice and equality.”), both of which I rely on for my work. There are substitutes for Linode, but none for Node.

Coincidentally, I’m currently facing this issue myself: “Changes to SameSite Cookie Behavior ⁠— A Call to Action for Web Developers” by Mike Conca at Mozilla’s blog.

Oh my goodness, it’s 2020 and I’ve been working with CSS for pretty much as long as it’s existed and I just learned that z-index does not work unless a position value is declared!

A work-in-progress web rendering of Moby Dick by Jason Pamental, with Rockwell Kent’s woodblock illustrations. Glorious!

The animated line-drawing illustrations at Ralph Ammer’s blog definitely make me want to read every post!

Poolside.FM, the lovely Mac throwback to 1997.

Ash Kyd built his web site to look and act like Windows 95 ⁠— cool!

More people will die from Covid-19 because we cannot study drugs more quickly, writes Matthew Herper in STAT.

Yes. Anonymized data from all patients should be accessible to all. The social media giants have demonstrated that it can be done ⁠— data entered from all over the world into a single system that produces meaningful output. Indeed, the web is the perfect medium for it. Rather than setting up trials to evaluate the efficacy of a treatment, researchers could instead be checking the global treatment knowledgebase.

Using their web-connected devices, registered medical practitioners would log each step of a patient’s treatment as it happens; in medicine a new understanding would take hold that the practice is to both treat the individual at hand and publish that treatment because every facet of every case history can contribute to a myriad of studies.

A standards body could set the data model that is a medical case. Presumably the model would emanate out to include such information as the identity of the treating hospital, so that, eg, the geographical locale can be factored in by researchers.

One problematic aspect of a case is the patient’s anonymized identity, required for factoring in pre-existing conditions. A new price of our medical care would be its worldwide publicization, and the understanding that motivated organizations could connect even anonymized medical data with other aspects of a person’s life, such as a cessation of credit card use during hospitalization. Yet given what we now see is the catastrophic fallout of a pandemic, we will surely come to accept this cost, just like say driving licenses. Moreover, perhaps this could justify to Americans why healthcare should be free: one is contributing one’s medical biography to the knowledgebase.

Such instant availability of global treatment data would be useful not only to researchers but also ⁠— and possibly primarily ⁠— to doctors devising treatments in the moment.

In CSS-only fluid modular type scales, Trys Mudford lays out the code for letting type grow appropriately (and uses the Golden Ratio for the steps). Very nice!

And I love the applied musical modular scale, which I’d not seen before, one of those great things that in retrospect seem obvious.

I’ve been fumbling towards all this without stopping to actually systematize it as they’ve done. And they did it here in Brighton, at Clearleft. Kudos.

My go-to type foundry Hoefler&Co have really stepped up their website game at typography.com, with a thrilling new typeface combination throughout of Idlewild for eyebrows and Ideal Sans for titles, and their rich How We Use Type feature for each font family.

Is RSS coming back?, a topic today at /r/webdev. According to the comments, a) it never went away, b) no.

Great thread: What do software engineers who work at a large scale understand that other developers don’t? at /r/programming.

The inaugural State of SaaS Report.

In trying to improve the performance of an ExpressionEngine-powered web-based system, I came across the following database fields within MySQL query WHERE clauses that therefore should be indexed but aren’t:

• exp_actions: class, method
• exp_categories: cat_url_title
• exp_ce_cache_tagged_items: item_id
• exp_channels: channel_title
• exp_channel_fields: field_name
• exp_extensions: enabled, hook, priority
• exp_fieldtypes: name
• exp_members: in_authorlist, screen_name, username
• exp_menu_items: sort
• exp_modules: module_name
• exp_playa_relationships: parent_is_draft
• exp_plugins: is_typography_related

Every little helps.

Smoother CSS shadows by Philipp Brumm. Simple; excellent. [via CSSTricks]

Matt Layman’s handy Failed SaaS Postmortem ⁠— too much tech tinkering; I need to take heed. Plus it’s great he’s getting right back in the saddle.

To loop through an object in JavaScript, convert it to an array, Zell Liew explains.

For anyone (like me) working on doing the same, see Wenbin Fang’s article “The boring technology behind a one-person Internet company”. Of course the technologies used will differ, but the frankness here is refreshing, the contour of what’s required enlightening.

Well this is neat: a little CSS hack that shows you 9 levels of elements in your web page for when you have no idea wtf is going on.

You’re a very talented young man, with your own clever thoughts and ideas. Jeffsum, a text placeholder generator of Jeff Goldblum lines.

Some unconventional wisdom from David C Baker that I’d like to revisit every once in a while: “Why Monthly Recurring Revenue (MRR) Arrangements May Not Be Ideal”. He concludes: “If I’ve confused you with all this, just concentrate on this one point: retainers and MRR relationships scream hourly work, and you shouldn’t be doing hourly work.” But at least for me at Engaging, the opposite is true: I’ve always billed hourly anyway, and some MRR arrangements I’ve made more recently have freed us from thinking in terms of hours (even though I’m still habitually keeping a log of hours worked).

State of CSS 2019.