Washington, DC : ICS Publications, 2014.

Paris : Librairie Philosophique J. Vrin, 1973.

Terah Lyons is the Founding Executive Director of the Partnership on AI, which was established to study and formulate best practices on AI technologies and advance the public’s understanding of AI. Prior to this, she served as Policy Advisor to the U.S. Chief Technology Officer at the White House Office of Science and Technology Policy (OSTP) during the Obama administration. In this video, Terah shares how after the California State Senate proposed using a machine learning-based system for pre-trial detention decisions, the Partnership investigated the plan and published a report on the minimum requirements such a system would need to meet to be fit for use. The requirements held not just for the system itself, but also for the people using it: for example, judges would need to demonstrate an understanding of the algorithm’s outputs. ABOUT WIRED PULSE: AI AT THE BARBICAN 450 business executives, technologists and enthusiasts gathered at The Barbican Centre’s Concert Hall in London, for WIRED Pulse: AI at the Barbican on June 15, 2019. Discover some of the fascinating insights from speakers here: http://wired.uk/ai-event ABOUT WIRED PULSE AND WIRED EVENTS The WIRED Pulse series offers an engaging, top-level perspective on how disruptive technology and fast-changing industries - such as artificial intelligence, deep tech and health - are impacting the human experience. The aim is to distill the most pertinent strands of themes within each complex topic and to share it with the wider public as a thought-provoking conversation-starter. WIRED events shine a spotlight on the innovators, inventors and entrepreneurs who are changing our world for the better. Explore this channel for videos showing on-stage talks, behind-the-scenes action, exclusive interviews and performances from our roster of events. Join us as we uncover the most relevant, up-and-coming trends and meet the people building the future. ABOUT WIRED WIRED brings you the future as it happens - the people, the trends, the big ideas that will change our lives. An award-winning printed monthly and online publication. WIRED is an agenda-setting magazine offering brain food on a wide range of topics, from science, technology and business to pop-culture and politics. CONNECT WITH WIRED Events: http://wired.uk/events Web: http://po.st/WiredVideo Twitter: http://po.st/TwitterWired Facebook: http://po.st/FacebookWired Google+: http://po.st/GoogleWired Instagram: http://po.st/InstagramWired Magazine: http://po.st/MagazineWired Newsletter: http://po.st/NewslettersWired

Fiery Feeds is better prepared to meet the needs of that kind of user thanks to a pair of important additions: full-text search and saved searches. Throw in optimized iPad pointer support, plus a new native article rendering option, and the latest Fiery Feeds update is a compelling one.

The National Technical Textiles Mission is a flagship scheme of Ministry of Textiles focused on developing the research and development capabilities of the local industry, especially in the areas of high-performance fibre development.  

Image by José-Manuel Benito, via Wikimedia Commons Some refer to the written Chinese language as ideographic: that is, structured according to a system in which each symbol represents a particular idea or concept, whether abstract or concrete. That’s true of certain Chinese characters, but only a small minority. Most of them are actually logographs, each […]

G77 and China rejected the substantive framework for a draft negotiating text prepared by the co-chairs of the Ad-Hoc Work Programme on the New Collective Quantified Goal (NCQG), arguing that it does not accurately reflect the concerns raised by developing countries. 

The exhibit highlights an array of textile techniques as well as a wide range of yarn

National Bureau of Economic Research

National Bureau of Economic Research

National Bureau of Economic Research

Two firms used non-existent shipping firms to show transactions, the others submitted fake transaction certificates

Cambridge [Cambridgeshire] ; New York : Cambridge University Press, 1987

The semi-orphan girl was sold away to a person who was willing to marry her, WDCW officials said

Recently I came across a CodePen demo by a developer/engineer named Jane that was Tweeted out by Šime Vidas. The demo has a neat collection of HTML and CSS tricks rolled into one that I thought was worth examining in detail.

The page displays a secret message based on specific text input. Ok, that’s no big deal, right? Well this is done using pure HTML and CSS – no JavaScript. I’ve seen stuff like this before, but I thought it would be cool to break down exactly how this works. There are a few notable things happening in the code so I’ll break down each of the parts.

The post Detecting Specific Text Input with HTML and CSS appeared first on Impressive Webs.

Show DescriptionDave reports back from the Figma Conference, how to build a better developer to designer bridge, do clients really want to update their website, using Stripe in 2023, permissions and sharing, and are you feeling overwhelmed by CSS in 2023? Listen on Website →Links Config 2023 | Figma’s Annual Conference Figma Visual Studio Code […]

Thoughts on smashing all communication messaging apps together, what's happened to Tumblr under Automattic, what the situation is with native web components and JavaScript, and looking at a list of types of blog posts.

Embossing is a graphical effect used to give the impression that the surface of an image has been raised or pressed in. In web design, an embossed text effect can give your typography a three-dimensional look and feel, often lending …

Web design takes a captivating turn when CSS comes into play. It enables a world of transformations, such as taking static text elements and infusing them with life. Our focus today is one such engaging transformation – animate gradient text …

Web design can serve as a playful exploration ground for learning new techniques. In today’s guide, we’ll dive into the creation of an underwater CSS text effect, not just for the visual outcome, but to deepen our understanding of how …

CSS offers an array of tools that, when used correctly, can improve the visual experience on your website. In this tutorial, we’ll explore a straightforward way to design a retro text effect with pure CSS. The approach, while not overly …

Andy Bell rings out a fresh call in support of the timeless concept of progressive enhancement. What does it mean to build a modern JavaScript-focussed web experience that still works well if part of the stack isn’t supported or fails? Andy shows us how that might be done.

Those that know me well know that I make a lot of side projects. I most definitely make too many, but there’s one really useful thing about making lots of side projects: it allows me to experiment in a low-risk setting.

Side projects also allow me to accidentally create a context where I can demonstrate a really affective, long-running methodology for building on the web: progressive enhancement. That context is a little Progressive Web App that I’m tinkering with called Jotter. It’s incredibly simple, but under the hood, there’s a really solid experience built on top of a minimum viable experience which after reading this article, you’ll hopefully apply this methodology to your own work.

What is a minimum viable experience?

The key to progressive enhancement is distilling the user experience to its lowest possible technical solution and then building on it to improve the user experience. In the context of Jotter, that is a humble <textarea> element. That humble <textarea> is our minimum viable experience.

Let me show you how it’s built up, progressively real quick. If you disable CSS and JavaScript, you get this:

This result is great because I know that regardless of what happens, the user can do what they needed to do when the loaded Jotter in their browser: take some notes. That’s our minimum viable experience, completed with a few lines of code that work in every single browser—even very old browsers. Don’t you just love good ol’ HTML?

Now it’s time to enhance that minimum viable experience, progressively. It’s a good idea to do that in smaller steps rather than just provide a 0% experience or a 100% experience, which is the approach that’s often favoured by JavaScript framework enthusiasts. I think that process is counter-intuitive to the web, though, so building up from a minimum viable experience is the optimal way to go, in my opinion.

Understanding how a minimum viable experience works can be a bit tough, admittedly, so I like to use a the following diagram to explain the process:

Let me break down this diagram for both folks who can and can’t see it. On the top row, there’s four stages of a broken-up car, starting with just a wheel, all the way up to a fully functioning car. The car enhances only in a way that it is still mostly useless until it gets to its final form when the person is finally happy.

On the second row, instead of building a car, we start with a skateboard which immediately does the job of getting the person from point A to point B. This enhances to a Micro Scooter and then to a Push Bike. Its final form is a fancy looking Motor Scooter. I choose that instead of a car deliberately because generally, when you progressively enhance a project, it turns out to be way simpler and lighter than a project that was built without progressive enhancement in mind.

Now that we know what a minimum viable experience is and how it works, let’s apply this methodology to Jotter!

Add some CSS

The first enhancement is CSS. Jotter has a very simple design, which is mostly a full height <textarea> with a little sidebar. A flexbox-based, auto-stacking layout, inspired by a layout called The Sidebar is used and we’re good to go.

Based on the diagram from earlier, we can comfortably say we’re in Skateboard territory now.

Add some JavaScript

We’ve got styles now, so let’s enhance the experience again. A user can currently load up the site and take notes. If the CSS loads, it’ll be a more pleasant experience, but if they refresh their browser, they’re going to lose all of their work.

We can fix that by adding some local storage into the mix.

The functionality flow is pretty straightforward. As a user inputs content, the JavaScript listens to an input event and pushes the content of the <textarea> into localStorage. If we then set that localStorage data to populate the <textarea> on load, that user’s experience is suddenly enhanced because they can’t lose their work by accidentally refreshing.

The JavaScript is incredibly light, too:

const textArea = document.querySelector('textarea');
const storageKey = 'text';

const init = () => {

  textArea.value = localStorage.getItem(storageKey);

  textArea.addEventListener('input', () => {
    localStorage.setItem(storageKey, textArea.value);
  });
}

init();

In around 13 lines of code (which you can see a working demo here), we’ve been able to enhance the user’s experience considerably, and if we think back to our diagram from earlier, we are very much in Micro Scooter territory now.

Making it a PWA

We’re in really good shape now, so let’s turn Jotter into a Motor Scooter and make this thing work offline as an installable Progressive Web App (PWA).

Making a PWA is really achievable and Google have even produced a handy checklist to help you get going. You can also get guidance from a Lighthouse audit.

For this little app, all we need is a manifest and a Service Worker to cache assets and serve them offline for us if needed.

The Service Worker is actually pretty slim, so here it is in its entirety:

const VERSION = '0.1.3';
const CACHE_KEYS = {
  MAIN: `main-${VERSION}`
};

// URLS that we want to be cached when the worker is installed
const PRE_CACHE_URLS = ['/', '/css/global.css', '/js/app.js', '/js/components/content.js'];

/**
 * Takes an array of strings and puts them in a named cache store
 *
 * @param {String} cacheName
 * @param {Array} items=[]
 */
const addItemsToCache = function(cacheName, items = []) {
  caches.open(cacheName).then(cache => cache.addAll(items));
};

self.addEventListener('install', evt => {
  self.skipWaiting();

  addItemsToCache(CACHE_KEYS.MAIN, PRE_CACHE_URLS);
});

self.addEventListener('activate', evt => {
  // Look for any old caches that don't match our set and clear them out
  evt.waitUntil(
    caches
      .keys()
      .then(cacheNames => {
        return cacheNames.filter(item => !Object.values(CACHE_KEYS).includes(item));
      })
      .then(itemsToDelete => {
        return Promise.all(
          itemsToDelete.map(item => {
            return caches.delete(item);
          })
        );
      })
      .then(() => self.clients.claim())
  );
});

self.addEventListener('fetch', evt => {
  evt.respondWith(
    caches.match(evt.request).then(cachedResponse => {
      // Item found in cache so return
      if (cachedResponse) {
        return cachedResponse;
      }

      // Nothing found so load up the request from the network
      return caches.open(CACHE_KEYS.MAIN).then(cache => {
        return fetch(evt.request)
          .then(response => {
            // Put the new response in cache and return it
            return cache.put(evt.request, response.clone()).then(() => {
              return response;
            });
          })
          .catch(ex => {
            return;
          });
      });
    })
  );
});

What the Service Worker does here is pre-cache our core assets that we define in PRE_CACHE_URLS. Then, for each fetch event which is called per request, it’ll try to fulfil the request from cache first. If it can’t do that, it’ll load the remote request for us. With this setup, we achieve two things:

1. We get offline support because we stick our critical assets in cache immediately so they will be accessible offline
2. Once those critical assets and any other requested assets are cached, the app will run faster by default

Importantly now, because we have a manifest, some shortcut icons and a Service Worker that gives us offline support, we have a fully installable PWA!

Wrapping up

I hope with this simplified example you can see how approaching web design and development with a progressive enhancement approach, everyone gets an acceptable experience instead of those who are lucky enough to get every aspect of the page at the right time.

Jotter is very much live and in the process of being enhanced further, which you can see on its little in-app roadmap, so go ahead and play around with it.

Before you know it, it’ll be a car itself, but remember: it’ll always start as a humble little <textarea>.

About the author

Andy Bell is an independent designer and front-end developer who’s trying to make everyone’s experience on the web better with a focus on progressive enhancement and accessibility.

More articles by Andy

It was the effort of four photographers, 14 models, and three stylists, and was shot at four locations

Montreal : National Film Board of Canada, 2019

South Koreans are familiar with Andhra Pradesh and since Kia Motors is here, more Korean companies may wish to come too, says Sangwoo Lim

The CSS text-wrap property is (rightfully) widely assumed to be used strictly for text elements. But Terrence Eden posted an article on his blog that shows how it can also be used to balance the way other types of elements wrap, including icons.

You can use text-wrap: balance; on icons originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.