esp

Responsible JavaScript: Part I

By the numbers, JavaScript is a performance liability. If the trend persists, the median page will be shipping at least 400 KB of it before too long, and that’s merely what’s transferred. Like other text-based resources, JavaScript is almost always served compressed—but that might be the only thing we’re getting consistently right in its delivery.

Unfortunately, while reducing resource transfer time is a big part of that whole performance thing, compression has no effect on how long browsers take to process a script once it arrives in its entirety. If a server sends 400 KB of compressed JavaScript, the actual amount browsers have to process after decompression is north of a megabyte. How well devices cope with these heavy workloads depends, well, on the deviceMuch has been written about how adept various devices are at processing lots of JavaScript, but the truth is, the amount of time it takes to process even a trivial amount of it varies greatly between devices.

Take, for example, this throwaway project of mine, which serves around 23 KB of uncompressed JavaScript. On a mid-2017 MacBook Pro, Chrome chews through this comparably tiny payload in about 25 ms. On a Nokia 2 Android phone, however, that figure balloons to around 190 ms. That’s not an insignificant amount of time, but in either case, the page gets interactive reasonably fast.

Now for the big question: how do you think that little Nokia 2 does on an average page? It chokes. Even on a fast connection, browsing the web on it is an exercise in patience as JavaScript-laden web pages brick it for considerable stretches of time.

Figure 1. A performance timeline overview of a Nokia 2 Android phone browsing on a page where excessive JavaScript monopolizes the main thread.

While devices and the networks they navigate the web on are largely improving, we’re eating those gains as trends suggest. We need to use JavaScript responsibly. That begins with understanding what we’re building as well as how we’re building it.

The mindset of “sites” versus “apps”

Nomenclature can be strange in that we sometimes loosely identify things with terms that are inaccurate, yet their meanings are implicitly understood by everyone. Sometimes we overload the term “bee” to also mean “wasp”, even though the differences between bees and wasps are substantial. Those differences can motivate you to deal with each one differently. For instance, we’ll want to destroy a wasp nest, but because bees are highly beneficial and vulnerable insects, we may opt to relocate them.

We can be just as fast and loose in interchanging the terms “website” and “web app”. The differences between them are less clear than those between yellowjackets and honeybees, but conflating them can bring about painful outcomes. The pain comes in the affordances we allow ourselves when something is merely a “website” versus a fully-featured “web app.” If you’re making an informational website for a business, you’re less likely to lean on a powerful framework to manage changes in the DOM or implement client-side routing—at least, I hope. Using tools so ill-suited for the task would not only be a detriment to the people who use that site but arguably less productive.

When we build a web app, though, look out. We’re installing packages which usher in hundreds—if not thousands—of dependencies, some of which we’re not sure are even safe. We’re also writing complicated configurations for module bundlers. In this frenzied, yet ubiquitous, sort of dev environment, it takes knowledge and vigilance to ensure what gets built is fast and accessible. If you doubt this, run npm ls --prod in your project’s root directory and see if you recognize everything in that list. Even if you do, that doesn’t account for third party scripts—of which I’m sure your site has at least a few.

What we tend to forget is that the environment websites and web apps occupy is one and the same. Both are subject to the same environmental pressures that the large gradient of networks and devices impose. Those constraints don’t suddenly vanish when we decide to call what we build “apps”, nor do our users’ phones gain magical new powers when we do so.

It’s our responsibility to evaluate who uses what we make, and accept that the conditions under which they access the internet can be different than what we’ve assumed. We need to know the purpose we’re trying to serve, and only then can we build something that admirably serves that purpose—even if it isn’t exciting to build.

That means reassessing our reliance on JavaScript and how the use of it—particularly to the exclusion of HTML and CSS—can tempt us to adopt unsustainable patterns which harm performance and accessibility.

Don’t let frameworks force you into unsustainable patterns

I’ve been witness to some strange discoveries in codebases when working with teams that depend on frameworks to help them be highly productive. One characteristic common among many of them is that poor accessibility and performance patterns often result. Take the React component below, for example:

import React, { Component } from "react";
import { validateEmail } from "helpers/validation";

class SignupForm extends Component {
  constructor (props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
    this.updateEmail = this.updateEmail.bind(this);
    this.state.email = "";
  }

  updateEmail (event) {
    this.setState({
      email: event.target.value
    });
  }

  handleSubmit () {
    // If the email checks out, submit
    if (validateEmail(this.state.email)) {
      // ...
    }
  }

  render () {
    return (
      
); } }

There are some notable accessibility issues here:

  1. A form that doesn’t use a <form> element is not a form. Indeed, you could paper over this by specifying role="form" in the parent <div>, but if you’re building a form—and this sure looks like one—use a <form> element with the proper action and method attributes. The action attribute is crucial, as it ensures the form will still do something in the absence of JavaScript—provided the component is server-rendered, of course.
  2. <span> is not a substitute for a <label> element, which provides accessibility benefits <span>s don’t.
  3. If we intend to do something on the client side prior to submitting a form, then we should move the action bound to the <button> element's onClick handler to the <form> element’s onSubmit handler.
  4. Incidentally, why use JavaScript to validate an email address when HTML5 offers form validation controls in almost every browser back to IE 10? There’s an opportunity here to rely on the browser and use an appropriate input type, as well as the required attribute—but be aware that getting this to work right with screen readers takes a little know-how.
  5. While not an accessibility issue, this component doesn't rely on any state or lifecycle methods, which means it can be refactored into a stateless functional component, which uses considerably less JavaScript than a full-fledged React component.

Knowing these things, we can refactor this component:

import React from "react";

const SignupForm = props => {
  const handleSubmit = event => {
    // Needed in case we're sending data to the server XHR-style
    // (but will still work if server-rendered with JS disabled).
    event.preventDefault();

    // Carry on...
  };
  
  return (
    <form method="POST" action="/signup" onSubmit={handleSubmit}>
      <label for="email" class="email-label">Enter your email:</label>
      <input type="email" id="email" required />
      <button>Sign Up</button>
    </form>
  );
};

Not only is this component now more accessible, but it also uses less JavaScript. In a world that’s drowning in JavaScript, deleting lines of it should feel downright therapeutic. The browser gives us so much for free, and we should try to take advantage of that as often as possible.

This is not to say that inaccessible patterns occur only when frameworks are used, but rather that a sole preference for JavaScript will eventually surface gaps in our understanding of HTML and CSS. These knowledge gaps will often result in mistakes we may not even be aware of. Frameworks can be useful tools that increase our productivity, but continuing education in core web technologies is essential to creating usable experiences, no matter what tools we choose to use.

Rely on the web platform and you’ll go far, fast

While we’re on the subject of frameworks, it must be said that the web platform is a formidable framework of its own. As the previous section showed, we’re better off when we can rely on established markup patterns and browser features. The alternative is to reinvent them, and invite all the pain such endeavors all but guarantee us, or worse: merely assume that the author of every JavaScript package we install has solved the problem comprehensively and thoughtfully.

SINGLE PAGE APPLICATIONS

One of the tradeoffs developers are quick to make is to adopt the single page application (SPA) model, even if it’s not a fit for the project. Yes, you do gain better perceived performance with the client-side routing of an SPA, but what do you lose? The browser’s own navigation functionality—albeit synchronous—provides a slew of benefits. For one, history is managed according to a complex specification. Users without JavaScript—be it by their own choice or not—won’t lose access altogether. For SPAs to remain available when JavaScript is not, server-side rendering suddenly becomes a thing you have to consider.

Figure 2. A comparison of an example app loading on a slow connection. The app on the left depends entirely upon JavaScript to render a page. The app on the right renders a response on the server, but then uses client-side hydration to attach components to the existing server-rendered markup.

Accessibility is also harmed if a client-side router fails to let people know what content on the page has changed. This can leave those reliant on assistive technology to suss out what changes have occurred on the page, which can be an arduous task.

Then there’s our old nemesis: overhead. Some client-side routers are very small, but when you start with Reacta compatible router, and possibly even a state management library, you’re accepting that there’s a certain amount of code you can never optimize away—approximately 135 KB in this case. Carefully consider what you’re building and whether a client side router is worth the tradeoffs you’ll inevitably make. Typically, you’re better off without one.

If you’re concerned about the perceived navigation performance, you could lean on rel=prefetch to speculatively fetch documents on the same origin. This has a dramatic effect on improving perceived loading performance of pages, as the document is immediately available in the cache. Because prefetches are done at a low priority, they’re also less likely to contend with critical resources for bandwidth.

Figure 3. The HTML for the writing/ URL is prefetched on the initial page. When the writing/ URL is requested by the user, the HTML for it is loaded instantaneously from the browser cache.

The primary drawback with link prefetching is that you need to be aware that it can be potentially wasteful. Quicklink, a tiny link prefetching script from Google, mitigates this somewhat by checking if the current client is on a slow connection—or has data saver mode enabled—and avoids prefetching links on cross-origins by default.

Service workers are also hugely beneficial to perceived performance for returning users, whether we use client side routing or not—provided you know the ropesWhen we precache routes with a service worker, we get many of the same benefits as link prefetching, but with a much greater degree of control over requests and responses. Whether you think of your site as an “app” or not, adding a service worker to it is perhaps one of the most responsible uses of JavaScript that exists today.

JAVASCRIPT ISN’T THE SOLUTION TO YOUR LAYOUT WOES

If we’re installing a package to solve a layout problem, proceed with caution and ask “what am I trying to accomplish?” CSS is designed to do this job, and requires no abstractions to use effectively. Most layout issues JavaScript packages attempt to solve, like box placement, alignment, and sizingmanaging text overflow, and even entire layout systems, are solvable with CSS today. Modern layout engines like Flexbox and Grid are supported well enough that we shouldn’t need to start a project with any layout framework. CSS is the framework. When we have feature queries, progressively enhancing layouts to adopt new layout engines is suddenly not so hard.

/* Your mobile-first, non-CSS grid styles goes here */

/* The @supports rule below is ignored by browsers that don't
   support CSS grid, _or_ don't support @supports. */
@supports (display: grid) {
  /* Larger screen layout */
  @media (min-width: 40em) {
    /* Your progressively enhanced grid layout styles go here */
  }
}

Using JavaScript solutions for layout and presentations problems is not new. It was something we did when we lied to ourselves in 2009 that every website had to look in IE6 exactly as it did in the more capable browsers of that time. If we’re still developing websites to look the same in every browser in 2019, we should reassess our development goals. There will always be some browser we’ll have to support that can’t do everything those modern, evergreen browsers can. Total visual parity on all platforms is not only a pursuit made in vain, it’s the principal foe of progressive enhancement.

I’m not here to kill JavaScript

Make no mistake, I have no ill will toward JavaScript. It’s given me a career and—if I’m being honest with myself—a source of enjoyment for over a decade. Like any long-term relationship, I learn more about it the more time I spend with it. It’s a mature, feature-rich language that only gets more capable and elegant with every passing year.

Yet, there are times when I feel like JavaScript and I are at odds. I am critical of JavaScript. Or maybe more accurately, I’m critical of how we’ve developed a tendency to view it as a first resort to building for the web. As I pick apart yet another bundle not unlike a tangled ball of Christmas tree lights, it’s become clear that the web is drunk on JavaScript. We reach for it for almost everything, even when the occasion doesn’t call for it. Sometimes I wonder how vicious the hangover will be.

In a series of articles to follow, I’ll be giving more practical advice to follow to stem the encroaching tide of excessive JavaScript and how we can wrangle it so that what we build for the web is usable—or at least more so—for everyone everywhere. Some of the advice will be preventative. Some will be mitigating “hair of the dog” measures. In either case, the outcomes will hopefully be the same. I believe that we all love the web and want to do right by it, but I want us to think about how to make it more resilient and inclusive for all.





esp

Responsible JavaScript: Part II

You and the rest of the dev team lobbied enthusiastically for a total re-architecture of the company’s aging website. Your pleas were heard by management—even up to the C-suite—who gave the green light. Elated, you and the team started working with the design, copy, and IA teams. Before long, you were banging out new code.

It started out innocently enough with an npm install here and an npm install there. Before you knew it, though, you were installing production dependencies like an undergrad doing keg stands without a care for the morning after.

Then you launched.

Unlike the aftermath of most copious boozings, the agony didn’t start the morning after. Oh, no. It came months later in the ghastly form of low-grade nausea and headache of product owners and middle management wondering why conversions and revenue were both down since the launch. It then hit a fever pitch when the CTO came back from a weekend at the cabin and wondered why the site loaded so slowly on their phone—if it indeed ever loaded at all.

Everyone was happy. Now no one is happy. Welcome to your first JavaScript hangover.

It’s not your fault

When you’re grappling with a vicious hangover, “I told you so” would be a well-deserved, if fight-provoking, rebuke—assuming you could even fight in so sorry a state.

When it comes to JavaScript hangovers, there’s plenty of blame to dole out. Pointing fingers is a waste of time, though. The landscape of the web today demands that we iterate faster than our competitors. This kind of pressure means we’re likely to take advantage of any means available to be as productive as possible. That means we’re more likely—but not necessarily doomed—to build apps with more overhead, and possibly use patterns that can hurt performance and accessibility.

Web development isn't easy. It’s a long slog we rarely get right on the first try. The best part of working on the web, however, is that we don’t have to get it perfect at the start. We can make improvements after the fact, and that’s just what the second installment of this series is here for. Perfection is a long ways off. For now, let’s take the edge off of that JavaScript hangover by improving your site’s, er, scriptuation in the short term.

Round up the usual suspects

It might seem rote, but it’s worth going through the list of basic optimizations. It’s not uncommon for large development teams—particularly those that work across many repositories or don’t use optimized boilerplate—to overlook them.

Shake those trees

First, make sure your toolchain is configured to perform tree shaking. If tree shaking is new to you, I wrote a guide on it last year you can consult. The short of it is that tree shaking is a process in which unused exports in your codebase don’t get packaged up in your production bundles.

Tree shaking is available out of the box with modern bundlers such as webpack, Rollup, or Parcel. Grunt or gulp—which are not bundlers, but rather task runners—won’t do this for you. A task runner doesn’t build a dependency graph like a bundler does. Rather, they perform discrete tasks on the files you feed to them with any number of plugins. Task runners can be extended with plugins to use bundlers to process JavaScript. If extending task runners in this way is problematic for you, you’ll likely need to manually audit and remove unused code.

For tree shaking to be effective, the following must be true:

  1. Your app logic and the packages you install in your project must be authored as ES6 modules. Tree shaking CommonJS modules isn’t practically possible.
  2. Your bundler must not transform ES6 modules into another module format at build time. If this happens in a toolchain that uses Babel, @babel/preset-env configuration must specify modules: false to prevent ES6 code from being converted to CommonJS.

On the off chance tree shaking isn’t occurring during your build, getting it to work may help. Of course, its effectiveness varies on a case-by-case basis. It also depends on whether the modules you import introduce side effects, which may influence a bundler’s ability to shake unused exports.

Split that code

Chances are good that you’re employing some form of code splitting, but it’s worth re-evaluating how you’re doing it. No matter how you’re splitting code, there are two questions that are always worth asking yourself:

  1. Are you deduplicating common code between entry points?
  2. Are you lazy loading all the functionality you reasonably can with dynamic import()?

These are important because reducing redundant code is essential to performance. Lazy loading functionality also improves performance by lowering the initial JavaScript footprint on a given page. On the redundancy front, using an analysis tool such as Bundle Buddy can help you find out if you have a problem.

Bundle Buddy can examine your webpack compilation statistics and determine how much code is shared between your bundles.

Where lazy loading is concerned, it can be a bit difficult to know where to start looking for opportunities. When I look for opportunities in existing projects, I’ll search for user interaction points throughout the codebase, such as click and keyboard events, and similar candidates. Any code that requires a user interaction to run is a potentially good candidate for dynamic import().

Of course, loading scripts on demand brings the possibility that interactivity could be noticeably delayed, as the script necessary for the interaction must be downloaded first. If data usage is not a concern, consider using the rel=prefetch resource hint to load such scripts at a low priority that won’t contend for bandwidth against critical resources. Support for rel=prefetch is good, but nothing will break if it’s unsupported, as such browsers will ignore markup they doesn’t understand.

Externalize third-party hosted code

Ideally, you should self-host as many of your site’s dependencies as possible. If for some reason you must load dependencies from a third party, mark them as externals in your bundler’s configuration. Failing to do so could mean your website’s visitors will download both locally hosted code and the same code from a third party.

Let’s look at a hypothetical situation where this could hurt you: say that your site loads Lodash from a public CDN. You've also installed Lodash in your project for local development. However, if you fail to mark Lodash as external, your production code will end up loading a third party copy of it in addition to the bundled, locally hosted copy.

This may seem like common knowledge if you know your way around bundlers, but I’ve seen it get overlooked. It’s worth your time to check twice.

If you aren’t convinced to self-host your third-party dependencies, then consider adding dns-prefetch, preconnect, or possibly even preload hints for them. Doing so can lower your site’s Time to Interactive and—if JavaScript is critical to rendering content—your site’s Speed Index.

Smaller alternatives for less overhead

Userland JavaScript is like an obscenely massive candy store, and we as developers are awed by the sheer amount of open source offerings. Frameworks and libraries allow us to extend our applications to quickly do all sorts of stuff that would otherwise take loads of time and effort.

While I personally prefer to aggressively minimize the use of client-side frameworks and libraries in my projects, their value is compelling. Yet, we do have a responsibility to be a bit hawkish when it comes to what we install. When we’ve already built and shipped something that depends on a slew of installed code to run, we’ve accepted a baseline cost that only the maintainers of that code can practically address. Right?

Maybe, but then again, maybe not. It depends on the dependencies used. For instance, React is extremely popular, but Preact is an ultra-small alternative that largely shares the same API and retains compatibility with many React add-ons. Luxon and date-fns are much more compact alternatives to moment.js, which is not exactly tiny.

Libraries such as Lodash offer many useful methods. Yet, some of them are easily replaceable with native ES6. Lodash’s compact method, for example, is replaceable with the filter array method. Many more can be replaced without much effort, and without the need for pulling in a large utility library.

Whatever your preferred tools are, the idea is the same: do some research to see if there are smaller alternatives, or if native language features can do the trick. You may be surprised at how little effort it may take you to seriously reduce your app’s overhead.

Differentially serve your scripts

There’s a good chance you’re using Babel in your toolchain to transform your ES6 source into code that can run on older browsers. Does this mean we’re doomed to serve giant bundles even to browsers that don’t need them, until the older browsers disappear altogether? Of course not! Differential serving helps us get around this by generating two different builds of your ES6 source:

  • Bundle one, which contains all the transforms and polyfills required for your site to work on older browsers. You’re probably already serving this bundle right now.
  • Bundle two, which contains little to none of the transforms and polyfills because it targets modern browsers. This is the bundle you’re probably not serving—at least not yet.

Achieving this is a bit involved. I’ve written a guide on one way you can do it, so there’s no need for a deep dive here. The long and short of it is that you can modify your build configuration to generate an additional but smaller version of your site’s JavaScript code, and serve it only to modern browsers. The best part is that these are savings you can achieve without sacrificing any features or functionality you already offer. Depending on your application code, the savings could be quite significant.

A webpack-bundle-analyzer analysis of a project's legacy bundle (left) versus one for a modern bundle (right). View full-sized image.

The simplest pattern for serving these bundles to their respective platforms is brief. It also works a treat in modern browsers:

<!-- Modern browsers load this file: -->
<script type="module" src="/js/app.mjs"></script>
<!-- Legacy browsers load this file: -->
<script defer nomodule src="/js/app.js"></script>

Unfortunately, there’s a caveat with this pattern: legacy browsers like IE 11—and even relatively modern ones such as Edge versions 15 through 18—will download both bundles. If this is an acceptable trade-off for you, then worry no further.

On the other hand, you'll need a workaround if you’re concerned about the performance implications of older browsers downloading both sets of bundles. Here’s one potential solution that uses script injection (instead of the script tags above) to avoid double downloads on affected browsers:

var scriptEl = document.createElement("script");

if ("noModule" in scriptEl) {
  // Set up modern script
  scriptEl.src = "/js/app.mjs";
  scriptEl.type = "module";
} else {
  // Set up legacy script
  scriptEl.src = "/js/app.js";
  scriptEl.defer = true; // type="module" defers by default, so set it here.
}

// Inject!
document.body.appendChild(scriptEl);

This script infers that if a browser supports the nomodule attribute in the script element, it understands type="module". This ensures that legacy browsers only get legacy scripts and modern browsers only get modern ones. Be warned, though, that dynamically injected scripts load asynchronously by default, so set the async attribute to false if dependency order is crucial.

Transpile less

I’m not here to trash Babel. It’s indispensable, but lordy, it adds a lot of extra stuff without your ever knowing. It pays to peek under the hood to see what it’s up to. Some minor changes in your coding habits can have a positive impact on what Babel spits out.

https://twitter.com/_developit/status/1110229993999777793

To wit: default parameters are a very handy ES6 feature you probably already use:

function logger(message, level = "log") {
  console[level](message);
}

The thing to pay attention to here is the level parameter, which has a default of “log.” This means if we want to invoke console.log with this wrapper function, we don’t need to specify level. Great, right? Except when Babel transforms this function, the output looks like this:

function logger(message) {
  var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "log";

  console[level](message);
}

This is an example of how, despite our best intentions, developer conveniences can backfire. What was a handful of bytes in our source has now been transformed into much larger in our production code. Uglification can’t do much about it either, as arguments can’t be reduced. Oh, and if you think rest parameters might be a worthy antidote, Babel’s transforms for them are even bulkier:

// Source
function logger(...args) {
  const [level, message] = args;

  console[level](message);
}

// Babel output
function logger() {
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  const level = args[0],
        message = args[1];
  console[level](message);
}

Worse yet, Babel transforms this code even for projects with a @babel/preset-env configuration targeting modern browsers, meaning the modern bundles in your differentially served JavaScript will be affected too! You could use loose transforms to soften the blow—and that’s a fine idea, as they’re often quite a bit smaller than their more spec-compliant counterparts—but enabling loose transforms can cause issues if you remove Babel from your build pipeline later on.

Regardless of whether you decide to enable loose transforms, here’s one way to cut the cruft of transpiled default parameters:

// Babel won't touch this
function logger(message, level) {
  console[level || "log"](message);
}

Of course, default parameters aren’t the only feature to be wary of. For example, spread syntax gets transformed, as do arrow functions and a whole host of other stuff.

If you don’t want to avoid these features altogether, you have a couple ways of reducing their impact:

  1. If you’re authoring a library, consider using @babel/runtime in concert with @babel/plugin-transform-runtime to deduplicate the helper functions Babel puts into your code.
  2. For polyfilled features in apps, you can include them selectively with @babel/polyfill via @babel/preset-env’s useBuiltIns: "usage" option.

This is solely my opinion, but I believe the best choice is to avoid transpilation altogether in bundles generated for modern browsers. That’s not always possible, especially if you use JSX, which must be transformed for all browsers, or if you’re using bleeding edge language features that aren’t widely supported. In the latter case, it might be worth asking if those features are really necessary to deliver a good user experience (they rarely are). If you arrive at the conclusion that Babel must be a part of your toolchain, then it’s worth peeking under the hood from time to time to catch suboptimal stuff Babel might be doing that you can improve on.

Improvement is not a race

As you massage your temples wondering when this horrid JavaScript hangover is going to lift, understand that it’s precisely when we rush to get something out there as fast as we possibly can that the user experience can suffer. As the web development community obsesses on iterating faster in the name of competition, it’s worth your time to slow down a little bit. You’ll find that by doing so, you may not be iterating as fast as your competitors, but your product will be faster than theirs.

As you take these suggestions and apply them to your codebase, know that progress doesn’t spontaneously happen overnight. Web development is a job. The truly impactful work is done when we’re thoughtful and dedicated to the craft for the long haul. Focus on steady improvements. Measure, test, repeat, and your site’s user experience will improve, and you’ll get faster bit by bit over time.

Special thanks to Jason Miller for tech editing this piece. Jason is the creator and one of the many maintainers of Preact, a vastly smaller alternative to React with the same API. If you use Preact, please consider supporting Preact through Open Collective.




esp

Sustainable development and social responsibility.: proceedings of the 2nd American University in the Emirates International Research Conference, AUEIRC'18 - Dubai, UAE 2018 / Miroslav Mateev, Jennifer Nightingale, editors

Online Resource




esp

After the crash: financial crises and regulatory responses / edited by Sharyn O'Halloran and Thomas Groll

Dewey Library - HB3717 2008.T435 2019




esp

Visible light-mediated ring-opening polymerization of lactones based on the excited state acidity of ESPT molecules

Polym. Chem., 2020, Advance Article
DOI: 10.1039/D0PY00369G, Paper
Xun Zhang, Siping Hu, Qiang Ma, Saihu Liao
A visible light-regulated ring-opening polymerization of lactones has been developed based on the excited state acidity of ESPT molecules.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Synthesis of star-shaped polyzwitterions with adjustable UCST and fast responsiveness by a facile RAFT polymerization

Polym. Chem., 2020, Advance Article
DOI: 10.1039/D0PY00318B, Paper
Zhi Li, Hao Li, Zhonghe Sun, Botao Hao, Tung-Chun Lee, Anchao Feng, Liqun Zhang, San H. Thang
We describe crosslinking of polyzwitterions for the formation of novel star-shaped polymers with low polydispersities and dual-responsiveness using RAFT polymerization.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

A general method to greatly enhance ultrasound-responsiveness for common polymeric assemblies

Polym. Chem., 2020, Advance Article
DOI: 10.1039/D0PY00254B, Paper
Jinkang Dou, Ruiqi Yang, Kun Du, Li Jiang, Xiayun Huang, Daoyong Chen
Ultrasound-controlled drug release is a very promising technique for controlled drug delivery due to the unique advantages of ultrasound as the stimulus.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Vesicular assemblies of thermoresponsive amphiphilic polypeptide copolymers for guest encapsulation and release

Polym. Chem., 2020, 11,2889-2903
DOI: 10.1039/D0PY00135J, Paper
Mahammad Anas, Somdeb Jana, Tarun K. Mandal
Thermoresponsive amphiphilic polypeptide copolymers are synthesized via different polymerization techniques for their self-assembly into vesicular aggregates for guest encapsulation and release.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Well-controlled polymerization of tri-vinyl dynamic covalent boroxine monomer: one dynamic covalent boroxine moiety toward a tunable penta-responsive polymer

Polym. Chem., 2020, 11,2914-2922
DOI: 10.1039/D0PY00401D, Paper
Shun-Shun Li, Xin-Hu Lv, Xiao-Li Sun, Wen-Ming Wan, Hongli Bao
Attributed to dynamic characteristics of dynamic covalent boroxine, well-controlled polymerization of tri-vinyl monomer and molecular design of penta-responsive polymer with only one functional moiety are achieved.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Correction: A facile PEG/thiol-functionalized nanographene oxide carrier with an appropriate glutathione-responsive switch

Polym. Chem., 2020, 11,2923-2923
DOI: 10.1039/D0PY90048F, Correction
Open Access
  This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.
Bingjie Hao, Wei Li, Sen Zhang, Ying Zhu, Yongjun Li, Aishun Ding, Xiaoyu Huang
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Biosignal-responsive polymer nanorods that specifically recognize hydrogen polysulfide (H2Sn) from reactive sulfur species

Polym. Chem., 2020, 11,2781-2785
DOI: 10.1039/D0PY00360C, Communication
Xi Liu, Wei Sang, Kunbing Ouyang, Qiang Yan
We report a new block copolymer bearing p-fluoronitrobenzoate (FNB) pendants that is capable of responding to the H2Sn biosignal in an extraordinarily selective and sensitive manner.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Hierarchical self-assembled nanostructures of lactone-derived thiobarbiturate homopolymers for stimuli-responsive delivery applications

Polym. Chem., 2020, Advance Article
DOI: 10.1039/D0PY00367K, Paper
Piyali Mandal, Diptendu Patra, Raja Shunmugam
Hierarchical self-assembled nanostructures of lactone-derived thiobarbiturate homopolymers for stimuli-responsive delivery applications are shown.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Synthesis, thermoresponsivity and multi-tunable hierarchical self-assembly of multi-responsive (AB)mC miktobrush-coil terpolymers

Polym. Chem., 2020, 11,3003-3017
DOI: 10.1039/D0PY00245C, Paper
Xiaomin Zhu, Jian Zhang, Cheng Miao, Siyu Li, Youliang Zhao
Stimuli-responsive miktobrush-coil terpolymers can exhibit unique physical properties and hierarchical self-assembly behaviors dependent on composition, concentration and external stimuli.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Renewable energy transformation or fossil fuel backlash : vested interests in the political economy / Espen Moe, Associate Professor, Norwegian University of Science and Technology, Trondheim, Norway

Moe, Espen




esp

Ultraviolet-C and other methods of decontamination of filtering facepiece N-95 respirators during the COVID-19 pandemic

Photochem. Photobiol. Sci., 2020, Accepted Manuscript
DOI: 10.1039/D0PP00131G, Perspective
Angeli Eloise Torres, Alexis B. Lyons, Shanthi Narla, Indermeet Kohli, Angela Parks-Miller, David Ozog, Iltefat H. Hamzavi, Henry W. Lim
During global heath emergencies such as the current COVID-19 pandemic, the decontamination of single-use personal protective equipment (PPE) becomes a necessary means to keep up with the growing demand from...
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Exploration of fluorescence behavior of an imidazolium-based chemosensor in solution and in the solid state and its turn-on response to Al3+ in pure aqueous medium

Photochem. Photobiol. Sci., 2020, Advance Article
DOI: 10.1039/C9PP00477G, Paper
Vaishali Saini, Rangan Krishnan, Bharti Khungar
An imidazolium-based quinoline framework is constructed, and its fluorescence behaviour studies with fluorescence turn-on chemosensory response to the selective detection of Al3+ in aqueous medium are discussed in detail.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Can Jameis Winston be a productive QB despite the multitude of INTs?

Production vs. volatility: Can a quarterback outproduce a bad turnover-worthy throw rate?




esp

Surgery in a Time of Uncertainty—The Need for Universal Respiratory Precautions in the Operating Room

This Viewpoint proposes that universal respiratory precautions in the operating room—use of respirators with face masks and eye protection—could protect staff from possible coronavirus disease 2019 (COVID-19) infection and facilitate resumption of elective surgeries canceled during the first wave of the pandemic.




esp

From design to applications of stimuli-responsive hydrogel strain sensors

J. Mater. Chem. B, 2020, 8,3171-3191
DOI: 10.1039/C9TB02692D, Review Article
Dong Zhang, Baiping Ren, Yanxian Zhang, Lijian Xu, Qinyuan Huang, Yi He, Xuefeng Li, Jiang Wu, Jintao Yang, Qiang Chen, Yung Chang, Jie Zheng
Stimuli-responsive hydrogel strain sensors that synergize the advantages of both hydrogel and smart functional materials have attracted increasing interest from material design to emerging applications in health monitors and human–machine interfaces.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Mechanically robust enzymatic degradable shape memory polyurethane urea with rapid recovery response induced by NIR

J. Mater. Chem. B, 2020, Accepted Manuscript
DOI: 10.1039/D0TB00798F, Paper
Xin Li, Wenkai Liu, Yaomin Li, Wanling Lan, Daiguo Zhao, Hecheng Wu, Yuan Feng, Xueling He, Zhen Li, Jiehua Li, Feng Luo, Hong Tan
Biodegradable shape memory polymers have great potential using in minimally invasive surgical procedures. Herein, a series of shape memory polyurethanes (SMPUs) containing chymotrypsin-inspired chain extenders with adjustable mechanical properties and...
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

The rise of bio-inspired polymer compartments responding to pathology related signals

J. Mater. Chem. B, 2020, Accepted Manuscript
DOI: 10.1039/D0TB00475H, Perspective
Open Access
Luisa Zartner, Moritz Sylvester Muthwill, Ionel Adrian Dinu, Cora-Ann Schoenenberger, Cornelia G. Palivan
Self-organized nano- and microscale polymer compartments (polymersomes, GUVs, PICsomes and LbL capsules) have increasing potential in many sensing applications. In this review, we highlight the key role they play in...
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Multi-Stimuli Responsive Polymeric Prodrug Micelles for Combined Chemotherapy and Photodynamic Therapy

J. Mater. Chem. B, 2020, Accepted Manuscript
DOI: 10.1039/D0TB00539H, Paper
Cheng Hu, Weihua Zhuang, Tao Yu, Liang Chen, Zhen Liang, Gaocan Li, Yunbing Wang
Nowadays, cancer therapy faces severe challenges on boosting therapeutic efficiency and reducing the side effects of drugs. To overcome these challenges, herein multifunctional polymeric prodrug micelles with combining chemotherapy and...
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Phosphates-responsive 2D-Metal─Organic-Framework-Nanozymes for Colorimetric Detection of Alkaline Phosphatase

J. Mater. Chem. B, 2020, Accepted Manuscript
DOI: 10.1039/C9TB02542A, Paper
Xiaoyu Wang, Xiaoqian Jiang, Hui Wei
In this study, a simple colorimetric method with tunable dynamic range for alkaline phosphatase (ALP) activity assay was developed by using peroxidase-mimicking two-dimensional-metal─organic-framework (2D-MOF). Phosphates including pyrophosphate (PPi), ATP, and...
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

In vivo immunological response of exposure to PEGylated graphene oxide via intraperitoneal injection

J. Mater. Chem. B, 2020, Advance Article
DOI: 10.1039/D0TB00499E, Paper
Zhaowen Ding, Nana Luo, Hua Yue, Yongjun Gao, Guanghui Ma, Wei Wei
2D PEGylated graphene oxide showed stealth-but-immune-activating capacity on macrophages, along with specific intraperitoneal immunological response in vivo.
To cite this article before page numbers are assigned, use the DOI form of citation above.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Redox-responsive amphiphilic camptothecin prodrug nanoparticles for targeted liver tumor therapy

J. Mater. Chem. B, 2020, 8,3918-3928
DOI: 10.1039/D0TB00285B, Paper
Lu Lu, Bing Li, Chuanchuan Lin, Ke Li, Genhua Liu, Zengzilu Xia, Zhong Luo, Kaiyong Cai
A redox-responsive drug carrier with asialoglycoprotein receptor (ASGPR) targeting is fabricated for liver tumor therapy.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

A near-infrared light-responsive multifunctional nanocomposite hydrogel for efficient and synergistic antibacterial wound therapy and healing promotion

J. Mater. Chem. B, 2020, 8,3908-3917
DOI: 10.1039/D0TB00361A, Paper
Na Yang, Ming Zhu, Guochao Xu, Ning Liu, Cong Yu
A multifunctional nanocomposite hydrogel for synergistic antibacterial wound therapy and healing promotion.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Human serum albumin-based doxorubicin prodrug nanoparticles with tumor pH-responsive aggregation-enhanced retention and reduced cardiotoxicity

J. Mater. Chem. B, 2020, 8,3939-3948
DOI: 10.1039/D0TB00327A, Paper
Boya Zhang, Shiyu Wan, Xinyu Peng, Mingying Zhao, Sai Li, Yuji Pu, Bin He
A nano-assembly of pH-sensitive doxorubicin prodrug and human serum albumin shows tumor pH-responsive aggregation, enhanced tumor retention and reduced cytotoxicity.
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

Confessions from correspondent-land : the dangers & delights of life as a foreign correspondent / Nick Bryant

Bryant, Nick (Nicholas Andrew), author




esp

Lessening Africa's 'otherness' in the Western media : towards a culturally responsive journalism / by Helene Maree Thomas

Thomas, Helene Maree, author




esp

Monstrous little voices : new tales from Shakespeare's fantasy world / Jonathan Barnes, Adrian Tchaikovsky, Emma Newman, Kate Heartfield, Foz Meadows




esp

Linear mixed models : a practical guide using statistical software / Brady T. West, Kathleen B. Welch, Andrzej T. Gałecki, University of Michigan, Ann Arbor, USA ; with contributions from Brenda W. Gillespie

West, Brady T




esp

Wired to care : how companies prosper when they create widespread empathy / Dev Patnaik with Peter Mortensen

Patnaik, Dev, 1970- author




esp

SquareSpace Adds Stats for RSS Feeds

We provide further context about your audience with a breakdown of where your subscribers are coming from. People who manually add your feed to an RSS reader will be classified as Individuals, people who use popular feed clients such as Feedly or Google Feedfetcher will be labeled as such.

complete article




esp

The Social Media Response to Nice Was Heartbreakingly Familiar

In what has become a heartbreaking routine—employed during the Paris attacks of 2015, as well as after recent terrorist attacks in such places as Belgium and Istanbul — people shared emotional memes in solidarity with the city of Nice, where 84 people were killed by a truck driver barrelling into the crowd on the Promenade des Anglais.

Using the hashtags #PrayForNice or #JeSuisNice, people expressed solidarity over the deaths of at least 84 people, which French President Francois Hollande says was caused by an act of terrorism.

complete article




esp

Hateful content surfaces on Facebook despite moderation efforts

Decisions made by Facebooks human content moderators to weed out hate speech posts are often inconsistent, causing some offensive content to wrongly remain on the platform, according to investigative journalism group ProPublica.

complete article




esp

First responders warn to watch what you post on social media

Carmel Fire took to their Facebook page to notify people that they should not be putting their own spin online regarding situations like Wednesdays explosion at the high school. CFD went on to add that people were posting pictures of patients and minors from the scene.

complete article




esp

How Social Media Users Have—and Have Not—Responded to Privacy Concerns

The Facebook Cambridge Analytica revelations changed the way people in the US think about online privacy. And it should come as no surprise that many have grown wary over the mishandling of personal information.

Nearly a year later, a majority of US internet users said that Facebook sharing data with Cambridge Analytica raised some level of concern over how their information is used online, per survey findings from text message marketing company SlickText.

complete article




esp

The Oxford handbook of populism / edited by Cristóbal Rovira Kaltwasser, Paul Taggart, Paulina Ochoa Espejo and Pierre Ostiguy




esp

Algorithms for computational biology: 5th International Conference, AlCoB 2018, Hong Kong, China, June 25-26, 2018, Proceedings / Jesper Jansson, Carlos Martín-Vide, Miguel A. Vega-Rodríguez (eds.)

Online Resource




esp

Corporate social responsibility in Poland: strategies, opportunities and challenges / editors, Aneta Długopolska-Mikonowicz, Sylwia Przytuła and Christopher Stehr

Online Resource




esp

Ethics, social responsibility and sustainability in marketing / Ipek Altinbasak-Farina, Sebnem Burnaz, editors

Online Resource




esp

[ASAP] Phospholipid-Decorated Glycogen Nanoparticles for Stimuli-Responsive Drug Release and Synergetic Chemophotothermal Therapy of Hepatocellular Carcinoma

ACS Applied Materials & Interfaces
DOI: 10.1021/acsami.0c02785




esp

[ASAP] Understanding the Cycling Performance Degradation Mechanism of a Graphene-Based Strain Sensor and an Effective Corresponding Improvement Solution

ACS Applied Materials & Interfaces
DOI: 10.1021/acsami.0c00176




esp

[ASAP] Response of pH-Sensitive Doxorubicin Nanoparticles on Complex Tumor Microenvironments by Tailoring Multiple Physicochemical Properties

ACS Applied Materials & Interfaces
DOI: 10.1021/acsami.0c05724




esp

[ASAP] Hydrogen-Bonding Interactions in Hybrid Aqueous/Nonaqueous Electrolytes Enable Low-Cost and Long-Lifespan Sodium-Ion Storage

ACS Applied Materials & Interfaces
DOI: 10.1021/acsami.0c03423




esp

[ASAP] Virus-Inspired Mimics: Dual-pH-Responsive Modular Nanoplatforms for Programmable Gene Delivery without DNA Damage with the Assistance of Light

ACS Applied Materials & Interfaces
DOI: 10.1021/acsami.0c03486




esp

Canine and Feline Respiratory Medicine, 2nd Edition


 

This comprehensive reference provides readers with everything they need to know about diagnosing and treating canine and feline respiratory disease. Significantly updated and expanded, it focuses on localization of disease, efficient diagnostic testing, and appropriate therapy. With more images, discussion, and diagrams, this Second Edition includes more detail and new information throughout, particularly in the areas of antimicrobial guidelines,



Read More...




esp

[ASAP] Quantitative Kinetic Modeling in Photoresponsive Supramolecular Chemistry: The Case of Water-Soluble Azobenzene/Cyclodextrin Complexes

The Journal of Organic Chemistry
DOI: 10.1021/acs.joc.0c00461




esp

Light-responsive nanozymes for biosensing

Analyst, 2020, Accepted Manuscript
DOI: 10.1039/D0AN00389A, Minireview
Yufeng Liu, Xiaoyu Wang, Hui Wei
Using light as an external stimulus plays a key role not only in modulating activities of nanozymes, but also in constructing efficient biosensing systems. This minireview highlights recent advances in...
The content of this RSS Feed (c) The Royal Society of Chemistry




esp

A Novel Strategy of Rhodamine B-based Fluorescent Probe for Selective Response of Glutathione to Serve as Bioimaging in Living Cells

Analyst, 2020, Accepted Manuscript
DOI: 10.1039/D0AN00582G, Paper
Zhipeng Li, Wei Xiong, Xiaojun He, Xiaoliang Qi, Feng Ding, Jianliang Shen
To overcome the reported shortcomings of the glutathione (GSH) detection of rhodamine based fluorescent probes, such as poor selectivity to thiol groups and reversible unstable covalent binding with the thiol...
The content of this RSS Feed (c) The Royal Society of Chemistry