5 changed files with 543 additions and 0 deletions
+ 190
- 0
cache/2024/84f8caf3e7f7b3de9e18281749c3687f/index.html
View File
| @@ -0,0 +1,190 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Until the Right Design Emerges... (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Is that even respected? Retrospectively? What a shAItshow… | |||
| https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> | |||
| <meta name="robots" content="noai, noimageai"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://lukew.com/ff/entry.asp?2036"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Until the Right Design Emerges...</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="https://lukew.com/ff/entry.asp?2036" title="Lien vers le contenu original">Source originale</a> | |||
| <br> | |||
| Mis en cache le 2024-01-13 | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p class="feature">Too often, the process of design is cut short. When faced with user needs or product requirements, many designers draft a mockup or wireframe informed by what they've seen or <a href="https://www.lukew.com/ff/entry.asp?2027">experienced before</a>. But that's actually when the design process starts, not ends.</p> | |||
| <blockquote>"Art does not begin with imitation, but with discipline."—Sun Ra, 1956</blockquote> | |||
| <p>Your first design, while it may seem like a solution, is usually just an early definition of the problem you are trying to solve. This iteration surfaces unanswered questions, puts assumptions to the test, and generally works to establish what you need to learn next.</p> | |||
| <blockquote>"Design is the art of gradually applying constraints until only one solution remains."—Unknown</blockquote> | |||
| <p>Each subsequent iteration is an attempt to better understand what is actually needed to solve the specific problem you're trying to address with your design. The more deeply you <a href="https://www.lukew.com/ff/entry.asp?151">understand the problem</a>, the more likely you are to land on an elegant and effective solution. The process of iteration is a constant learning process that gradually reveals the right path forward.</p> | |||
| <blockquote>"True simplicity is, well, you just keep on going and going until you get to the point where you go... Yeah, well, of course." | |||
| —Jonathan Ive, September, 2013</blockquote> | |||
| <p>When the right approach reveals itself, it feels obvious. But only in retrospect. <strong>Design is only obvious in retrospect.</strong> It takes iteration and discipline to get there. But when you do get there, it's much easier to explain your design decisions to others. You know why the design is the right one and can frame your rationale in the context of the problem you are trying to solve. This makes <a href="https://www.lukew.com/ff/entry.asp?76">presenting designs</a> easier and highlights the strategic impact of designers.</p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> | |||
| </svg> Suivre</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use> | |||
| </svg> Pro</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> | |||
| </svg> Email</a> • | |||
| <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use> | |||
| </svg> Légal</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 19
- 0
cache/2024/84f8caf3e7f7b3de9e18281749c3687f/index.md
View File
| @@ -0,0 +1,19 @@ | |||
| title: Until the Right Design Emerges... | |||
| url: https://lukew.com/ff/entry.asp?2036 | |||
| hash_url: 84f8caf3e7f7b3de9e18281749c3687f | |||
| archive_date: 2024-01-13 | |||
| <p class="feature">Too often, the process of design is cut short. When faced with user needs or product requirements, many designers draft a mockup or wireframe informed by what they've seen or <a href="https://www.lukew.com/ff/entry.asp?2027">experienced before</a>. But that's actually when the design process starts, not ends.</p> | |||
| <blockquote>"Art does not begin with imitation, but with discipline."—Sun Ra, 1956</blockquote> | |||
| <p>Your first design, while it may seem like a solution, is usually just an early definition of the problem you are trying to solve. This iteration surfaces unanswered questions, puts assumptions to the test, and generally works to establish what you need to learn next.</p> | |||
| <blockquote>"Design is the art of gradually applying constraints until only one solution remains."—Unknown</blockquote> | |||
| <p>Each subsequent iteration is an attempt to better understand what is actually needed to solve the specific problem you're trying to address with your design. The more deeply you <a href="https://www.lukew.com/ff/entry.asp?151">understand the problem</a>, the more likely you are to land on an elegant and effective solution. The process of iteration is a constant learning process that gradually reveals the right path forward.</p> | |||
| <blockquote>"True simplicity is, well, you just keep on going and going until you get to the point where you go... Yeah, well, of course." | |||
| —Jonathan Ive, September, 2013</blockquote> | |||
| <p>When the right approach reveals itself, it feels obvious. But only in retrospect. <strong>Design is only obvious in retrospect.</strong> It takes iteration and discipline to get there. But when you do get there, it's much easier to explain your design decisions to others. You know why the design is the right one and can frame your rationale in the context of the problem you are trying to solve. This makes <a href="https://www.lukew.com/ff/entry.asp?76">presenting designs</a> easier and highlights the strategic impact of designers.</p> | |||
+ 250
- 0
cache/2024/ea2cfc9aa425a6967d2cacd9f96ceb9e/index.html
View File
| @@ -0,0 +1,250 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Ask LukeW: New Ways into Web Content (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Is that even respected? Retrospectively? What a shAItshow… | |||
| https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> | |||
| <meta name="robots" content="noai, noimageai"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://lukew.com/ff/entry.asp?2008"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Ask LukeW: New Ways into Web Content</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="https://lukew.com/ff/entry.asp?2008" title="Lien vers le contenu original">Source originale</a> | |||
| <br> | |||
| Mis en cache le 2024-01-13 | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p class="feature">Large language (AI) models allow us to rethink how to build software and design user interfaces. To that end, we made use of these new capabilities to create a different way of interacting with this site at: <a href="https://ask.lukew.com">ask.lukew.com</a></p> | |||
| <p>Though quiet recently, this site built up a <a href="https://www.lukew.com/ff/">decent amount</a> of content over the past 27 years. Specifically, there's nearly 2,000 text articles, 375 presentations, 60 videos, and 3 books worth of explorations and explanations about all forms of digital product design from early Web sites to Mobile apps to Augmented Reality experiences.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_data_2x.png"><img src="//static.lukew.com/ask_lukew_data.png" srcset="//static.lukew.com/ask_lukew_data.png, //static.lukew.com/ask_lukew_data_2x.png 2x" alt="2,000 articles, 375 presentations, 57 videos on LukeW's site"></a> | |||
| </p> | |||
| <p>Anyone interested in these materials, has essentially two options: search or browse. Searching (primarily through Google) gets people to a specific article, presentation, or video when they have a sense of what they're looking for. Browsing (on this site or other sites with links to this one) helps people discover things they might not have been explicitly looking for.</p> | |||
| <p>But with over half a million written words, three and a half thousand minutes of video, and thousands of images it's hard to know what's available, to connect related content, and ultimately get the most value out of this site.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_data2_2x.png"><img src="//static.lukew.com/ask_lukew_data2.png" srcset="//static.lukew.com/ask_lukew_data2.png, //static.lukew.com/ask_lukew_data2_2x.png 2x" alt="Search or browse the content on LukeW Ideation and Design"></a> | |||
| </p> | |||
| <p>Enter <a href="https://www.computer.org/csdl/magazine/co/2022/05/09771130/1DeEYd2FXZm">large-scale AI models for language</a> (LLMs). By making use of these models to perform a variety of language operations, we can re-index the content on this site by concepts using embeddings, and generate new ways to interact with it.</p> | |||
| <p>We make use of large-language models to:</p> | |||
| <ul> | |||
| <li>summarize articles</li> | |||
| <li>extract key concepts from articles</li> | |||
| <li>create follow-on questions to ask with specific articles</li> | |||
| <li>make exploratory questions to expose people to new content</li> | |||
| <li>generate answers in response to what people ask</li> | |||
| </ul> | |||
| <p>This combination of language operations adds up to a very different new way to experience the content on <a href="https://ask.lukew.com">lukew.com</a></p> | |||
| <p><a href="//static.lukew.com/ask_lukew_questions_2x.png"><img src="//static.lukew.com/ask_lukew_questions.png" srcset="//static.lukew.com/ask_lukew_questions.png, //static.lukew.com/ask_lukew_questions_2x.png 2x" alt="Suggested questions in the Ask LukeW interface"></a> | |||
| </p> | |||
| <p><a href="https://ask.lukew.com">Ask LukeW</a> starts off with a series of suggested questions that change each time someone loads the page. This not only helps with the "what should I ask?" problem of empty text fields but is also a compelling way to explore what the site has to offer. Of course, someone can start with their own specific question. But in testing, many folks gravitate to the suggestions first, which helps expose people to more of the breadth and depth of available content.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_answer2_2x.png"><img src="//static.lukew.com/ask_lukew_answer2.png" srcset="//static.lukew.com/ask_lukew_answer2.png, //static.lukew.com/ask_lukew_answer2_2x.png 2x" alt="Generated answers and visual sources in the Ask LukeW interface"></a> | |||
| </p> | |||
| <p>After someone selects a question or types their own question, we generate an answer using the corpus of information on lukew.com. These results tend to be more opinionated than what a large language model operating solely on a much bigger set of content (like the Web) provides, even with prompt engineering to direct it toward specific kinds of answers (i.e. UI design-focused).</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_corpus_2x.png"><img src="//static.lukew.com/ask_lukew_corpus.png" srcset="//static.lukew.com/ask_lukew_corpus.png, //static.lukew.com/ask_lukew_corpus_2x.png 2x" alt="Comparing answers from a fixed corpus to ChatGPT in the Ask LukeW interface"></a> | |||
| </p> | |||
| <p>The content we use to answer someone's question can come from one or more articles so we give provide visual sources to make this clear. In the current build, we're citing Web pages but PDFs and videos are next. It's also worth noting that we follow-up each answer with additional suggested questions to once again give people a better sense of what they can ask next. No dead ends.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_objects_2x.png"><img src="//static.lukew.com/ask_lukew_objects.png" srcset="//static.lukew.com/ask_lukew_objects.png, //static.lukew.com/ask_lukew_objects_2x.png 2x" alt="Sources object cards from the Ask LukeW interface"></a> | |||
| </p> | |||
| <p>If someone wants to go deeper into any of the sourced materials, they can select the card and get an article-specific experience. Here we make use of LLM language operations to create a summary, extract related topics and provide suggested questions that the article can answer. People can ask questions of just this document (as indicated by the green article "chip" in the question bar) or go back to site-wide questions by tapping the close (x) icon.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_article_2x.png"><img src="//static.lukew.com/ask_lukew_article.png" srcset="//static.lukew.com/ask_lukew_article.png, //static.lukew.com/ask_lukew_article_2x.png 2x" alt="Article specific features in the Ask LukeW interface"></a> | |||
| </p> | |||
| <p>As the number of answers builds up, we collapse each one automatically, so people can focus on the current question they've asked. This also makes it easier to scroll through a long conversation and pick out answers from short summaries consisting of the question and the first two lines of its answer.</p> | |||
| <p>People can also pin individual question and answer pairs to save them for later and come back to previous conversations in addition to making new ones using the menu bar on the left.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_conversation_2x.png"><img src="//static.lukew.com/ask_lukew_conversation.png" srcset="//static.lukew.com/ask_lukew_conversation.png, //static.lukew.com/ask_lukew_conversation_2x.png 2x" alt="Conversation listing in the Ask LukeW interface"></a> | |||
| </p> | |||
| <p>While there's a number of features in the <a href="https://ask.lukew.com">Ask LukeW</a> interface, it's mostly a beta. We don't save state from question to question so the kind of ongoing dialog people may expect from <a href="https://openai.com/blog/chatgpt">ChatGPT</a> isn't there yet, pinned answers and saved conversations are only done locally (cookie-based) and as mentioned before, PDFs and videos aren't yet part of the index.</p> | |||
| <p>Despite that, it's been interesting to explore how an existing body of content can gain new life using large-language model technology. I've been regularly surprised and interested by questions like:</p> | |||
| <ul> | |||
| <li>How can progressive enhancement be used in software development? | |||
| </li><li>What are the central mental traits that people unconsciously display through the products they buy?</li> | |||
| <li>What are the design considerations for touch-based apps for kids?</li> | |||
| <li>What is small multiples and how can it help people make sense of large amounts of information quickly and easily?</li> | |||
| <li>What is the debate around the utility of usability testing in design?</li> | |||
| </ul> | |||
| <p>And I wrote all this content! Since that happened across a quarter century, maybe it's not that surprising that I don't remember it all. Anyhow... hope you also enjoy trying out <a href="https://ask.lukew.com">ask.lukew.com</a> and feel free to <a href="https://www.lukew.com/about/">send</a> any ideas or comments over.</p> | |||
| <h2>Further Reading</h2> | |||
| <h2>Acknowledgments</h2> | |||
| <p>Big thanks to <a href="https://liyangguang.com/">Yangguang Li</a> (front end), <a href="https://twitter.com/swissgrid">Thanh Tran</a> (design), and <a href="https://twitter.com/sampullara">Sam Pullara</a> (back end) in helping pull together this <a href="https://ask.lukew.com">exploration</a><a></a>.</p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> | |||
| </svg> Suivre</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use> | |||
| </svg> Pro</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> | |||
| </svg> Email</a> • | |||
| <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use> | |||
| </svg> Légal</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 80
- 0
cache/2024/ea2cfc9aa425a6967d2cacd9f96ceb9e/index.md
View File
| @@ -0,0 +1,80 @@ | |||
| title: Ask LukeW: New Ways into Web Content | |||
| url: https://lukew.com/ff/entry.asp?2008 | |||
| hash_url: ea2cfc9aa425a6967d2cacd9f96ceb9e | |||
| archive_date: 2024-01-13 | |||
| <p class="feature">Large language (AI) models allow us to rethink how to build software and design user interfaces. To that end, we made use of these new capabilities to create a different way of interacting with this site at: <a href="https://ask.lukew.com">ask.lukew.com</a></p> | |||
| <p>Though quiet recently, this site built up a <a href="https://www.lukew.com/ff/">decent amount</a> of content over the past 27 years. Specifically, there's nearly 2,000 text articles, 375 presentations, 60 videos, and 3 books worth of explorations and explanations about all forms of digital product design from early Web sites to Mobile apps to Augmented Reality experiences.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_data_2x.png"><img src="//static.lukew.com/ask_lukew_data.png" srcset="//static.lukew.com/ask_lukew_data.png, //static.lukew.com/ask_lukew_data_2x.png 2x" alt="2,000 articles, 375 presentations, 57 videos on LukeW's site"></a> | |||
| </p> | |||
| <p>Anyone interested in these materials, has essentially two options: search or browse. Searching (primarily through Google) gets people to a specific article, presentation, or video when they have a sense of what they're looking for. Browsing (on this site or other sites with links to this one) helps people discover things they might not have been explicitly looking for.</p> | |||
| <p>But with over half a million written words, three and a half thousand minutes of video, and thousands of images it's hard to know what's available, to connect related content, and ultimately get the most value out of this site.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_data2_2x.png"><img src="//static.lukew.com/ask_lukew_data2.png" srcset="//static.lukew.com/ask_lukew_data2.png, //static.lukew.com/ask_lukew_data2_2x.png 2x" alt="Search or browse the content on LukeW Ideation and Design"></a> | |||
| </p> | |||
| <p>Enter <a href="https://www.computer.org/csdl/magazine/co/2022/05/09771130/1DeEYd2FXZm">large-scale AI models for language</a> (LLMs). By making use of these models to perform a variety of language operations, we can re-index the content on this site by concepts using embeddings, and generate new ways to interact with it.</p> | |||
| <p>We make use of large-language models to:</p> | |||
| <ul> | |||
| <li>summarize articles</li> | |||
| <li>extract key concepts from articles</li> | |||
| <li>create follow-on questions to ask with specific articles</li> | |||
| <li>make exploratory questions to expose people to new content</li> | |||
| <li>generate answers in response to what people ask</li> | |||
| </ul> | |||
| <p>This combination of language operations adds up to a very different new way to experience the content on <a href="https://ask.lukew.com">lukew.com</a></p> | |||
| <p><a href="//static.lukew.com/ask_lukew_questions_2x.png"><img src="//static.lukew.com/ask_lukew_questions.png" srcset="//static.lukew.com/ask_lukew_questions.png, //static.lukew.com/ask_lukew_questions_2x.png 2x" alt="Suggested questions in the Ask LukeW interface"></a> | |||
| </p> | |||
| <p><a href="https://ask.lukew.com">Ask LukeW</a> starts off with a series of suggested questions that change each time someone loads the page. This not only helps with the "what should I ask?" problem of empty text fields but is also a compelling way to explore what the site has to offer. Of course, someone can start with their own specific question. But in testing, many folks gravitate to the suggestions first, which helps expose people to more of the breadth and depth of available content.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_answer2_2x.png"><img src="//static.lukew.com/ask_lukew_answer2.png" srcset="//static.lukew.com/ask_lukew_answer2.png, //static.lukew.com/ask_lukew_answer2_2x.png 2x" alt="Generated answers and visual sources in the Ask LukeW interface"></a> | |||
| </p> | |||
| <p>After someone selects a question or types their own question, we generate an answer using the corpus of information on lukew.com. These results tend to be more opinionated than what a large language model operating solely on a much bigger set of content (like the Web) provides, even with prompt engineering to direct it toward specific kinds of answers (i.e. UI design-focused).</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_corpus_2x.png"><img src="//static.lukew.com/ask_lukew_corpus.png" srcset="//static.lukew.com/ask_lukew_corpus.png, //static.lukew.com/ask_lukew_corpus_2x.png 2x" alt="Comparing answers from a fixed corpus to ChatGPT in the Ask LukeW interface"></a> | |||
| </p> | |||
| <p>The content we use to answer someone's question can come from one or more articles so we give provide visual sources to make this clear. In the current build, we're citing Web pages but PDFs and videos are next. It's also worth noting that we follow-up each answer with additional suggested questions to once again give people a better sense of what they can ask next. No dead ends.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_objects_2x.png"><img src="//static.lukew.com/ask_lukew_objects.png" srcset="//static.lukew.com/ask_lukew_objects.png, //static.lukew.com/ask_lukew_objects_2x.png 2x" alt="Sources object cards from the Ask LukeW interface"></a> | |||
| </p> | |||
| <p>If someone wants to go deeper into any of the sourced materials, they can select the card and get an article-specific experience. Here we make use of LLM language operations to create a summary, extract related topics and provide suggested questions that the article can answer. People can ask questions of just this document (as indicated by the green article "chip" in the question bar) or go back to site-wide questions by tapping the close (x) icon.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_article_2x.png"><img src="//static.lukew.com/ask_lukew_article.png" srcset="//static.lukew.com/ask_lukew_article.png, //static.lukew.com/ask_lukew_article_2x.png 2x" alt="Article specific features in the Ask LukeW interface"></a> | |||
| </p> | |||
| <p>As the number of answers builds up, we collapse each one automatically, so people can focus on the current question they've asked. This also makes it easier to scroll through a long conversation and pick out answers from short summaries consisting of the question and the first two lines of its answer.</p> | |||
| <p>People can also pin individual question and answer pairs to save them for later and come back to previous conversations in addition to making new ones using the menu bar on the left.</p> | |||
| <p><a href="//static.lukew.com/ask_lukew_conversation_2x.png"><img src="//static.lukew.com/ask_lukew_conversation.png" srcset="//static.lukew.com/ask_lukew_conversation.png, //static.lukew.com/ask_lukew_conversation_2x.png 2x" alt="Conversation listing in the Ask LukeW interface"></a> | |||
| </p> | |||
| <p>While there's a number of features in the <a href="https://ask.lukew.com">Ask LukeW</a> interface, it's mostly a beta. We don't save state from question to question so the kind of ongoing dialog people may expect from <a href="https://openai.com/blog/chatgpt">ChatGPT</a> isn't there yet, pinned answers and saved conversations are only done locally (cookie-based) and as mentioned before, PDFs and videos aren't yet part of the index.</p> | |||
| <p>Despite that, it's been interesting to explore how an existing body of content can gain new life using large-language model technology. I've been regularly surprised and interested by questions like:</p> | |||
| <ul> | |||
| <li>How can progressive enhancement be used in software development? | |||
| </li><li>What are the central mental traits that people unconsciously display through the products they buy?</li> | |||
| <li>What are the design considerations for touch-based apps for kids?</li> | |||
| <li>What is small multiples and how can it help people make sense of large amounts of information quickly and easily?</li> | |||
| <li>What is the debate around the utility of usability testing in design?</li> | |||
| </ul> | |||
| <p>And I wrote all this content! Since that happened across a quarter century, maybe it's not that surprising that I don't remember it all. Anyhow... hope you also enjoy trying out <a href="https://ask.lukew.com">ask.lukew.com</a> and feel free to <a href="https://www.lukew.com/about/">send</a> any ideas or comments over.</p> | |||
| <h2>Further Reading</h2> | |||
| <h2>Acknowledgments</h2> | |||
| <p>Big thanks to <a href="https://liyangguang.com/">Yangguang Li</a> (front end), <a href="https://twitter.com/swissgrid">Thanh Tran</a> (design), and <a href="https://twitter.com/sampullara">Sam Pullara</a> (back end) in helping pull together this <a href="https://ask.lukew.com">exploration</a><a></a>.</p> | |||
+ 4
- 0
cache/2024/index.html
View File
| @@ -108,6 +108,8 @@ | |||
| <li><a href="/david/cache/2024/62bf3ce6ef66e39b7f250a6123d92e66/" title="Accès à l’article dans le cache local : Tomorrow & Tomorrow & Tomorrow">Tomorrow & Tomorrow & Tomorrow</a> (<a href="https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow" title="Accès à l’article original distant : Tomorrow & Tomorrow & Tomorrow">original</a>)</li> | |||
| <li><a href="/david/cache/2024/ea2cfc9aa425a6967d2cacd9f96ceb9e/" title="Accès à l’article dans le cache local : Ask LukeW: New Ways into Web Content">Ask LukeW: New Ways into Web Content</a> (<a href="https://lukew.com/ff/entry.asp?2008" title="Accès à l’article original distant : Ask LukeW: New Ways into Web Content">original</a>)</li> | |||
| <li><a href="/david/cache/2024/4a56aa5497e68df0c5bb1d5331203219/" title="Accès à l’article dans le cache local : When “Everything” Becomes Too Much: The npm Package Chaos of 2024">When “Everything” Becomes Too Much: The npm Package Chaos of 2024</a> (<a href="https://socket.dev/blog/when-everything-becomes-too-much" title="Accès à l’article original distant : When “Everything” Becomes Too Much: The npm Package Chaos of 2024">original</a>)</li> | |||
| <li><a href="/david/cache/2024/668d0f82ae65b0e94ea76145057759a7/" title="Accès à l’article dans le cache local : ‘One in a million’ iPhone bridal photo explanation: blame panorama mode">‘One in a million’ iPhone bridal photo explanation: blame panorama mode</a> (<a href="https://www.theverge.com/2023/12/2/23985299/iphone-bridal-photo-three-poses-explanation-panorama-photoshop-generative-ai" title="Accès à l’article original distant : ‘One in a million’ iPhone bridal photo explanation: blame panorama mode">original</a>)</li> | |||
| @@ -128,6 +130,8 @@ | |||
| <li><a href="/david/cache/2024/e990536ed88823f047296ea25a6b7933/" title="Accès à l’article dans le cache local : Samsung caught faking zoom photos of the Moon">Samsung caught faking zoom photos of the Moon</a> (<a href="https://www.theverge.com/2023/3/13/23637401/samsung-fake-moon-photos-ai-galaxy-s21-s23-ultra" title="Accès à l’article original distant : Samsung caught faking zoom photos of the Moon">original</a>)</li> | |||
| <li><a href="/david/cache/2024/84f8caf3e7f7b3de9e18281749c3687f/" title="Accès à l’article dans le cache local : Until the Right Design Emerges...">Until the Right Design Emerges...</a> (<a href="https://lukew.com/ff/entry.asp?2036" title="Accès à l’article original distant : Until the Right Design Emerges...">original</a>)</li> | |||
| <li><a href="/david/cache/2024/cd2fda3dae5d89990f73fbdaa1c3b491/" title="Accès à l’article dans le cache local : build a world, not an audience">build a world, not an audience</a> (<a href="https://keningzhu.com/journal/build-a-world-not-an-audience" title="Accès à l’article original distant : build a world, not an audience">original</a>)</li> | |||
| </ul> | |||
Loading…