<![CDATA[ines.io]]>https://ines.ioGatsbyJSThu, 29 May 2025 06:26:48 GMT<![CDATA[Making beautiful slides for your talks, part 5: Sharing your presentations]]>https://ines.io/blog/beautiful-slides-talks-part-5-sharing-presentationshttps://ines.io/blog/beautiful-slides-talks-part-5-sharing-presentationsMon, 14 Apr 2025 00:00:00 GMT<p>The previous four parts of this series all focused on the process of <em>creating</em> slides and writing talks. But what’s next, now that you’ve given a successful presentation with your very own beautiful slide deck? In this post, I’ve collected tips for how to share your slides with the world, including some of the tools and techniques I use.</p> <p>🎨 <strong>Part 1:</strong> <a href="/blog/beginners-guide-beautiful-slides-talks">Design tips for beginners</a> ✨ <strong>Part 2:</strong> <a href="/blog/beautiful-slides-talks-part-2-aesthetics">All about aesthetics</a> 🛠️ <strong>Part 3:</strong> <a href="/blog/beautiful-slides-talks-part-3-technical-content">Technical content</a> 🧩 <strong>Part 4:</strong> <a href="/blog/beautiful-slides-talks-part-4-design-elements">Design elements</a> 💌 <strong>Part 5: Sharing your presentations</strong></p> <p><em><strong>Disclaimer</strong> (since my previous post also got widely shared outside of my circles): This blog post series is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p> <hr> <h2>Uploading your slides</h2> <p>I’ve been using <a href="https://speakerdeck.com/inesmontani">Speaker Deck</a> pretty much since I started public speaking. The basic plan is free and turns your PDFs into a digital slideshow, with options to add your title and abstract. The <a href="https://speakerdeck.com/pro">pro plan</a> for $80 a year adds the ability to include an embedded video link for talk recordings and add further links and resources (<a href="https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai#video">see here</a> for an example). It also lets you publish your slides with a private link, which I often use to share work in progress with others. If giving talks and presentations is part of your job or something you enjoy, I highly recommend giving the pro features a try!</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/908f297176ef07c54a5f52aa45f62f1d/df49a/slides_sharing-speakerdeck.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 38.38383838383839%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBP/EABUBAQEAAAAAAAAAAAAAAAAAAAED/9oADAMBAAIQAxAAAAHZJUuJP//EABcQAQEBAQAAAAAAAAAAAAAAAAIDASH/2gAIAQEAAQUC4sVZDRWTz//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/Aaf/xAAWEQADAAAAAAAAAAAAAAAAAAAQEiH/2gAIAQIBAT8BWj//xAAbEAACAgMBAAAAAAAAAAAAAAABEQACIVGBof/aAAgBAQAGPwJknhMRq8ajFPJ//8QAGhABAAIDAQAAAAAAAAAAAAAAAQARITFBcf/aAAgBAQABPyHVx8EctQG6Rl0VkT//2gAMAwEAAgADAAAAEPPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxAf/8QAGBEBAQADAAAAAAAAAAAAAAAAAQAhMfD/2gAIAQIBAT8QAo7ZOG//xAAbEAEAAgIDAAAAAAAAAAAAAAABESEAYTGBwf/aAAgBAQABPxBSQ5FGnW8YmJCSJu1xmoEl7gfc/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/908f297176ef07c54a5f52aa45f62f1d/55fac/slides_sharing-speakerdeck.webp 198w, /static/908f297176ef07c54a5f52aa45f62f1d/5b4d3/slides_sharing-speakerdeck.webp 395w, /static/908f297176ef07c54a5f52aa45f62f1d/848e4/slides_sharing-speakerdeck.webp 790w, /static/908f297176ef07c54a5f52aa45f62f1d/8d239/slides_sharing-speakerdeck.webp 1185w, /static/908f297176ef07c54a5f52aa45f62f1d/888d0/slides_sharing-speakerdeck.webp 1580w, /static/908f297176ef07c54a5f52aa45f62f1d/9ef1d/slides_sharing-speakerdeck.webp 3974w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/908f297176ef07c54a5f52aa45f62f1d/9db10/slides_sharing-speakerdeck.jpg 198w, /static/908f297176ef07c54a5f52aa45f62f1d/16a07/slides_sharing-speakerdeck.jpg 395w, /static/908f297176ef07c54a5f52aa45f62f1d/d27a6/slides_sharing-speakerdeck.jpg 790w, /static/908f297176ef07c54a5f52aa45f62f1d/0b93b/slides_sharing-speakerdeck.jpg 1185w, /static/908f297176ef07c54a5f52aa45f62f1d/8f04a/slides_sharing-speakerdeck.jpg 1580w, /static/908f297176ef07c54a5f52aa45f62f1d/df49a/slides_sharing-speakerdeck.jpg 3974w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/908f297176ef07c54a5f52aa45f62f1d/d27a6/slides_sharing-speakerdeck.jpg" alt="Screenshot of my Speaker Deck profile" title="Overview and individual talk on my &lt;a href=&#39;https://speakerdeck.com/inesmontani&#39; target=&#39;_blank&#39;&gt;Speaker Deck profile&lt;/a&gt;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Overview and individual talk on my <a href='https://speakerdeck.com/inesmontani' target='_blank'>Speaker Deck profile</a></p></figcaption> </figure> <p>Alternative options are <a href="https://www.slideshare.net/">Slideshare</a> or simply a <a href="https://workspace.google.com/products/drive/">Google Drive</a> or <a href="https://dropbox.com">Dropbox</a> link with the PDF. If you used <a href="https://workspace.google.com/products/slides/">Google Slides</a> to make your presentation, you also get a shareable link out of the box.</p> <p>Before sharing your presentation, convert it to a PDF document with each stage of your animations as separate slides. This ensures that everyone can view your slides as they were intended, and that viewers can click through them just like you did during your presentation. I typically already have the PDF ready when I give my talk, in case there are technical problems and I can’t present with Keynote on my own laptop.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/d1074291d231262c8c12b9e1f6ea0e93/c4599/slides_sharing-export.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.37373737373737%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAZ9gKkMP/8QAGhAAAQUBAAAAAAAAAAAAAAAAAQACBBESE//aAAgBAQABBQI6uEHcxpf/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwFX/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAREv/aAAgBAgEBPwFNLi//xAAXEAADAQAAAAAAAAAAAAAAAAAAARBx/9oACAEBAAY/Ah7P/8QAGhAAAgIDAAAAAAAAAAAAAAAAAREAkSFBUf/aAAgBAQABPyEHoFvsBw3gbO5//9oADAMBAAIAAwAAABDwL//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPxAcY//EABcRAQEBAQAAAAAAAAAAAAAAAAEAIVH/2gAIAQIBAT8QyIHW/8QAGxABAAICAwAAAAAAAAAAAAAAAQARUXExQWH/2gAIAQEAAT8QrNk+udy0UYakAIOXuf/Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/d1074291d231262c8c12b9e1f6ea0e93/55fac/slides_sharing-export.webp 198w, /static/d1074291d231262c8c12b9e1f6ea0e93/5b4d3/slides_sharing-export.webp 395w, /static/d1074291d231262c8c12b9e1f6ea0e93/848e4/slides_sharing-export.webp 790w, /static/d1074291d231262c8c12b9e1f6ea0e93/8d239/slides_sharing-export.webp 1185w, /static/d1074291d231262c8c12b9e1f6ea0e93/888d0/slides_sharing-export.webp 1580w, /static/d1074291d231262c8c12b9e1f6ea0e93/11499/slides_sharing-export.webp 2317w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/d1074291d231262c8c12b9e1f6ea0e93/9db10/slides_sharing-export.jpg 198w, /static/d1074291d231262c8c12b9e1f6ea0e93/16a07/slides_sharing-export.jpg 395w, /static/d1074291d231262c8c12b9e1f6ea0e93/d27a6/slides_sharing-export.jpg 790w, /static/d1074291d231262c8c12b9e1f6ea0e93/0b93b/slides_sharing-export.jpg 1185w, /static/d1074291d231262c8c12b9e1f6ea0e93/8f04a/slides_sharing-export.jpg 1580w, /static/d1074291d231262c8c12b9e1f6ea0e93/c4599/slides_sharing-export.jpg 2317w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/d1074291d231262c8c12b9e1f6ea0e93/d27a6/slides_sharing-export.jpg" alt="Exporting slides with animations in Keynote" title="Exporting a PDF in Keynote with each stage of the build as a separate slide" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Exporting a PDF in Keynote with each stage of the build as a separate slide</p></figcaption> </figure> <hr> <h2>Sharing your slides on social media</h2> <p>As I mentioned in a <a href="/blog/beautiful-slides-talks-part-2-aesthetics">part 2</a> of this series, having clear and punchy statement slides increases the likelihood of audience members snapping photos during your presentation and sharing them online. I’ve gotten a lot of great feedback this way, so I always check my mentions on social media after a talk and read, like or share what others have said.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/97b1d3e7c6ff425ad215ac322a5cadf9/1d134/slides_sharing-others.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 33.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBP/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAG3cSyCf//EABoQAAICAwAAAAAAAAAAAAAAAAACAQMREhP/2gAIAQEAAQUCzaK2i964P//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/AYf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPwGn/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAECERIxMoH/2gAIAQEABj8C3fRXyqZP/8QAGhAAAgMBAQAAAAAAAAAAAAAAAREAITFBkf/aAAgBAQABPyEhFMzChCLhTXZ2H4Z//9oADAMBAAIAAwAAABCIH//EABURAQEAAAAAAAAAAAAAAAAAAAAB/9oACAEDAQE/ECR//8QAFREBAQAAAAAAAAAAAAAAAAAAEQD/2gAIAQIBAT8QTN//xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAxIVFhkf/aAAgBAQABPxBzugAQqF+uJr4x+jANEHGAIpTqz//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/97b1d3e7c6ff425ad215ac322a5cadf9/55fac/slides_sharing-others.webp 198w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/5b4d3/slides_sharing-others.webp 395w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/848e4/slides_sharing-others.webp 790w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/8d239/slides_sharing-others.webp 1185w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/888d0/slides_sharing-others.webp 1580w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/da28f/slides_sharing-others.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/97b1d3e7c6ff425ad215ac322a5cadf9/9db10/slides_sharing-others.jpg 198w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/16a07/slides_sharing-others.jpg 395w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/d27a6/slides_sharing-others.jpg 790w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/0b93b/slides_sharing-others.jpg 1185w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/8f04a/slides_sharing-others.jpg 1580w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/1d134/slides_sharing-others.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/97b1d3e7c6ff425ad215ac322a5cadf9/d27a6/slides_sharing-others.jpg" alt="Screenshots of posts by others about my talks" title="Posts by others featuring photos from my talks (&lt;a href=&#39;https://bsky.app/profile/arnicas.bsky.social/post/3kuxjzdpnpz2o&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://x.com/EdwigeFiaclou/status/1777359731213893859&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://x.com/hendorf/status/1681902706204585987&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Posts by others featuring photos from my talks (<a href='https://bsky.app/profile/arnicas.bsky.social/post/3kuxjzdpnpz2o' target='_blank'>#1</a>, <a href='https://x.com/EdwigeFiaclou/status/1777359731213893859' target='_blank'>#2</a>, <a href='https://x.com/hendorf/status/1681902706204585987' target='_blank'>#3</a>)</p></figcaption> </figure> <p>After a conference, I share my <a href="https://speakerdeck.com/inesmontani">Speaker Deck</a> link with a screenshot of the title slide or a small collage of my favorite or of the most representative slides. I sometimes also combine it with my <a href="/blog/year-in-review-2024">event roundups</a> and recaps where I summarize the highlights and most interesting takeaways from the conference.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/4a9b05ea245f549d63ae3eaef8d97c4a/fae6f/slides_sharing-recaps.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 53.03030303030303%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAgP/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAbWZjysHI0//xAAaEAACAgMAAAAAAAAAAAAAAAAAEQECEiFD/9oACAEBAAEFAmTZWyg5rZ//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPwGH/8QAFxEBAAMAAAAAAAAAAAAAAAAAAAIRIf/aAAgBAgEBPwGOqf/EABUQAQEAAAAAAAAAAAAAAAAAABAC/9oACAEBAAY/AmX/xAAaEAEAAgMBAAAAAAAAAAAAAAABABFBgZEh/9oACAEBAAE/IRQEPeQYzE2VfZS+swCf/9oADAMBAAIAAwAAABDE7//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/ECP/xAAWEQEBAQAAAAAAAAAAAAAAAAARAAH/2gAIAQIBAT8Q0jYX/8QAHBAAAgICAwAAAAAAAAAAAAAAAREAITGBQWGh/9oACAEBAAE/EBAgtGJw3Kh4W4ggIBZgonHMUO0qtVQYFD3qf//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/4a9b05ea245f549d63ae3eaef8d97c4a/55fac/slides_sharing-recaps.webp 198w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/5b4d3/slides_sharing-recaps.webp 395w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/848e4/slides_sharing-recaps.webp 790w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/8d239/slides_sharing-recaps.webp 1185w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/888d0/slides_sharing-recaps.webp 1580w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/c4540/slides_sharing-recaps.webp 2368w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/4a9b05ea245f549d63ae3eaef8d97c4a/9db10/slides_sharing-recaps.jpg 198w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/16a07/slides_sharing-recaps.jpg 395w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/d27a6/slides_sharing-recaps.jpg 790w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/0b93b/slides_sharing-recaps.jpg 1185w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/8f04a/slides_sharing-recaps.jpg 1580w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/fae6f/slides_sharing-recaps.jpg 2368w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/4a9b05ea245f549d63ae3eaef8d97c4a/d27a6/slides_sharing-recaps.jpg" alt="Screenshots of LinkedIn and Bluesky posts" title="&lt;a href=&#39;https://www.linkedin.com/posts/inesmontani_its-a-wrap-what-a-great-pyconde-pydata-activity-7188936519850622976-k7XP/&#39; target=&#39;_blank&#39;&gt;Event roundup&lt;/a&gt; on LinkedIn and &lt;a href=&#39;https://bsky.app/profile/inesmontani.bsky.social/post/3kvnwrgy2s62p&#39; target=&#39;_blank&#39;&gt;talk summary&lt;/a&gt; on Bluesky" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p><a href='https://www.linkedin.com/posts/inesmontani_its-a-wrap-what-a-great-pyconde-pydata-activity-7188936519850622976-k7XP/' target='_blank'>Event roundup</a> on LinkedIn and <a href='https://bsky.app/profile/inesmontani.bsky.social/post/3kvnwrgy2s62p' target='_blank'>talk summary</a> on Bluesky</p></figcaption> </figure> <p>Posting about a conference talk is also a great way to support the organizers and thank them for inviting you. I often do one post in the lead-up to a conference to let people know I’m speaking, and one afterwards to share my slides and experiences. Once the video recording of my talk is live, I update my deck on Speaker Deck to include the <a href="https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai#video">embedded video</a> (which is a feature available on the <a href="https://speakerdeck.com/pro">pro plan</a>).</p> <h3>Talk summary threads</h3> <p>In addition to sharing my presentation links, I often include a summary of the talk’s most important points. You can even go one step further and prepare a thread for a platform like <a href="https://bsky.app/profile/inesmontani.bsky.social">Bluesky</a> or <a href="https://sigmoid.social/@ines">Mastodon</a> that summarizes each slide, like I’ve done for <a href="https://x.com/_inesmontani/status/1226501968832671744">PyCon Colombia</a> or <a href="https://x.com/_inesmontani/status/1681700743693172738">EuroPython</a> in the past.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/019f6bcf7de774165aa07869d52a3a41/3045a/slides_sharing-threads.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 165.15151515151513%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAhABQDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAIDAQQF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQIA/9oADAMBAAIQAxAAAAH2+bXMpYdxVStxQYmksGNAH//EAB0QAAICAgMBAAAAAAAAAAAAAAECAxIRMQATISL/2gAIAQEAAQUC0ZZaPFLdTPg9gIRgymgayqqNlSfc/Keg7Guf/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAg/9oACAEDAQE/AYOP/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAg/9oACAECAQE/AYK//8QAIRAAAgIBAgcAAAAAAAAAAAAAABEBAlEhIhIgMTJBUpH/2gAIAQEABj8CQuF6ZGlqdslZ9owOCds9clIiui+DSJ2VKqvgxyf/xAAdEAADAAICAwAAAAAAAAAAAAAAAREhMUFhEFHR/9oACAEBAAE/IbGGNn5FwKzYo3RDFeOYRMU5RCKGl2oNuzaP9KQ3hArM9GjnyPb5G9EO6ehsrQ2mjx//2gAMAwEAAgADAAAAEGvBPfv/AP/EABgRAQEBAQEAAAAAAAAAAAAAAAEAETEQ/9oACAEDAQE/ENDtpIrraR18/8QAGREBAQEAAwAAAAAAAAAAAAAAAQARECEx/9oACAECAQE/EMWyQM6m8cf/xAAhEAEAAwABBAIDAAAAAAAAAAABABEhMUFRgaEQYXGx8f/aAAgBAQABPxCxiD1DIBMncB9EYoSVKnDb8xJPe4ajWbxBoWjtVdGEGh4teRjLgSw23rRSPFFECDs23BYG9k/ucOFxTaSp2uLAfhjFqOqo/hPcnpfH/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/019f6bcf7de774165aa07869d52a3a41/55fac/slides_sharing-threads.webp 198w, /static/019f6bcf7de774165aa07869d52a3a41/5b4d3/slides_sharing-threads.webp 395w, /static/019f6bcf7de774165aa07869d52a3a41/848e4/slides_sharing-threads.webp 790w, /static/019f6bcf7de774165aa07869d52a3a41/8d239/slides_sharing-threads.webp 1185w, /static/019f6bcf7de774165aa07869d52a3a41/888d0/slides_sharing-threads.webp 1580w, /static/019f6bcf7de774165aa07869d52a3a41/1b25c/slides_sharing-threads.webp 2511w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/019f6bcf7de774165aa07869d52a3a41/9db10/slides_sharing-threads.jpg 198w, /static/019f6bcf7de774165aa07869d52a3a41/16a07/slides_sharing-threads.jpg 395w, /static/019f6bcf7de774165aa07869d52a3a41/d27a6/slides_sharing-threads.jpg 790w, /static/019f6bcf7de774165aa07869d52a3a41/0b93b/slides_sharing-threads.jpg 1185w, /static/019f6bcf7de774165aa07869d52a3a41/8f04a/slides_sharing-threads.jpg 1580w, /static/019f6bcf7de774165aa07869d52a3a41/3045a/slides_sharing-threads.jpg 2511w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/019f6bcf7de774165aa07869d52a3a41/d27a6/slides_sharing-threads.jpg" alt="Screenshots of Twitter threads" title="Twitter threads summarizing my talks at &lt;a href=&#39;https://x.com/_inesmontani/status/1226501968832671744&#39; target=&#39;_blank&#39;&gt;PyCon Colombia&lt;/a&gt; and &lt;a href=&#39;https://x.com/_inesmontani/status/1681700743693172738&#39; target=&#39;_blank&#39;&gt;EuroPython&lt;/a&gt;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Twitter threads summarizing my talks at <a href='https://x.com/_inesmontani/status/1226501968832671744' target='_blank'>PyCon Colombia</a> and <a href='https://x.com/_inesmontani/status/1681700743693172738' target='_blank'>EuroPython</a></p></figcaption> </figure> <p>This takes more work, but it’s also a <strong>great exercise</strong>! Condensing each point into 300 characters or less helped me a lot during my practice. I sometimes also use Keynote’s <a href="https://support.apple.com/en-bw/guide/keynote/tand1a4ee7c/mac">presenter notes</a> feature to add slide summaries as I write my talks, which I can then reuse for social media or even for a blog post later on (see below).</p> <h3>LinkedIn carousels</h3> <p>Carousels are LinkedIn’s native post format for PDFs, which you can upload from the post composer. Rumor has it that the platform awards native carousel posts with more reach and penalizes posts with external links (which is why you often see people post links in comments). However, this frequently changes, so I wouldn’t overthink it. I usually focus on the content of my posts, rather than over-optimizing for the platform and reach.</p> <hr> <h2>Other ideas</h2> <h3>Convert talks into blog posts</h3> <p>Writing a good talk takes a significant amount of time and effort, so the content you create shouldn’t be limited to those who could make it to your presentation in person! Plus, not everyone likes flicking through slides or watching video recordings, so blog posts are a great alternative.</p> <p>For example, I published blog post versions of my talks on the <a href="https://explosion.ai/blog/history-web-future-ai">history of the web</a> and <a href="https://explosion.ai/blog/human-in-the-loop-distillation">human-in-the-loop distillation</a>, and wrote up the <a href="https://ines.io/blog/window-knocking-machine-test/">“window-knocking machine test”</a>, a point I’d included in several talks to illustrate how to imagine technology of the future and why it’s important to think beyond chat bots.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/39c9ec5b90449a0040d92fb46b61fdf5/1d134/slides_sharing-blog.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.878787878787875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQB/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGuoXBh/8QAGhAAAgIDAAAAAAAAAAAAAAAAAAMBAgQSE//aAAgBAQABBQJeNrbmQo//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGq/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEREkH/2gAIAQIBAT8ByCiP/8QAGRAAAgMBAAAAAAAAAAAAAAAAAAEiMTKh/9oACAEBAAY/AlLhZpn/xAAYEAEAAwEAAAAAAAAAAAAAAAABABEhUf/aAAgBAQABPyEWVxeLgEjOf//aAAwDAQACAAMAAAAQ88//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QEWr/xAAYEQACAwAAAAAAAAAAAAAAAAAAASExYf/aAAgBAgEBPxByzUYn/8QAGRABAQADAQAAAAAAAAAAAAAAAREAITFR/9oACAEBAAE/EGYywIVE95gCIbW9xbb1u5rP/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/39c9ec5b90449a0040d92fb46b61fdf5/55fac/slides_sharing-blog.webp 198w, /static/39c9ec5b90449a0040d92fb46b61fdf5/5b4d3/slides_sharing-blog.webp 395w, /static/39c9ec5b90449a0040d92fb46b61fdf5/848e4/slides_sharing-blog.webp 790w, /static/39c9ec5b90449a0040d92fb46b61fdf5/8d239/slides_sharing-blog.webp 1185w, /static/39c9ec5b90449a0040d92fb46b61fdf5/888d0/slides_sharing-blog.webp 1580w, /static/39c9ec5b90449a0040d92fb46b61fdf5/da28f/slides_sharing-blog.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/39c9ec5b90449a0040d92fb46b61fdf5/9db10/slides_sharing-blog.jpg 198w, /static/39c9ec5b90449a0040d92fb46b61fdf5/16a07/slides_sharing-blog.jpg 395w, /static/39c9ec5b90449a0040d92fb46b61fdf5/d27a6/slides_sharing-blog.jpg 790w, /static/39c9ec5b90449a0040d92fb46b61fdf5/0b93b/slides_sharing-blog.jpg 1185w, /static/39c9ec5b90449a0040d92fb46b61fdf5/8f04a/slides_sharing-blog.jpg 1580w, /static/39c9ec5b90449a0040d92fb46b61fdf5/1d134/slides_sharing-blog.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/39c9ec5b90449a0040d92fb46b61fdf5/d27a6/slides_sharing-blog.jpg" alt="Screenshots of talks and their corresponding blog posts" title="Examples of talks turned into blog posts (&lt;a href=&#39;https://explosion.ai/blog/history-web-future-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://explosion.ai/blog/human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://ines.io/blog/window-knocking-machine-test/&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of talks turned into blog posts (<a href='https://explosion.ai/blog/history-web-future-ai' target='_blank'>#1</a>, <a href='https://explosion.ai/blog/human-in-the-loop-distillation' target='_blank'>#2</a>, <a href='https://ines.io/blog/window-knocking-machine-test/' target='_blank'>#3</a>)</p></figcaption> </figure> <p>If your writing process included presenter notes or a talk script, you can use it as the foundation of your blog post. Another bonus is that you’ll be able to reuse any graphics and visualizations you’ve already created for your slides. You can either include screenshots of whole slides, or extract the individual graphics. I typically create a copy of my presentation in Keynote, remove the background, logo and other elements, and then screenshot the graphic to use in my post.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/44ccebca6563ec231e71d3c99537a2ca/1d134/slides_sharing-blog-graphics.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 28.28282828282828%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHSsFMgk//EABgQAAIDAAAAAAAAAAAAAAAAAAACESEy/9oACAEBAAEFAopcn//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/AWf/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPwFn/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAQ/9oACAEBAAY/AmM//8QAGRAAAwADAAAAAAAAAAAAAAAAAAFBETFR/9oACAEBAAE/IeqCPdBZrP/aAAwDAQACAAMAAAAQ/wDP/8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQMBAT8Qs//EABURAQEAAAAAAAAAAAAAAAAAABAx/9oACAECAQE/EJP/xAAYEAEBAQEBAAAAAAAAAAAAAAABESEAYf/aAAgBAQABPxCkFLpeUpiMs4i6Vp553//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/44ccebca6563ec231e71d3c99537a2ca/55fac/slides_sharing-blog-graphics.webp 198w, /static/44ccebca6563ec231e71d3c99537a2ca/5b4d3/slides_sharing-blog-graphics.webp 395w, /static/44ccebca6563ec231e71d3c99537a2ca/848e4/slides_sharing-blog-graphics.webp 790w, /static/44ccebca6563ec231e71d3c99537a2ca/8d239/slides_sharing-blog-graphics.webp 1185w, /static/44ccebca6563ec231e71d3c99537a2ca/888d0/slides_sharing-blog-graphics.webp 1580w, /static/44ccebca6563ec231e71d3c99537a2ca/da28f/slides_sharing-blog-graphics.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/44ccebca6563ec231e71d3c99537a2ca/9db10/slides_sharing-blog-graphics.jpg 198w, /static/44ccebca6563ec231e71d3c99537a2ca/16a07/slides_sharing-blog-graphics.jpg 395w, /static/44ccebca6563ec231e71d3c99537a2ca/d27a6/slides_sharing-blog-graphics.jpg 790w, /static/44ccebca6563ec231e71d3c99537a2ca/0b93b/slides_sharing-blog-graphics.jpg 1185w, /static/44ccebca6563ec231e71d3c99537a2ca/8f04a/slides_sharing-blog-graphics.jpg 1580w, /static/44ccebca6563ec231e71d3c99537a2ca/1d134/slides_sharing-blog-graphics.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/44ccebca6563ec231e71d3c99537a2ca/d27a6/slides_sharing-blog-graphics.jpg" alt="Screenshot of slide turned into blog post illustration" title="Graphic from my &lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;talk&lt;/a&gt; on human-in-the-loop distillation converted for the &lt;a href=&#39;https://explosion.ai/blog/human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;blog post&lt;/a&gt;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Graphic from my <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>talk</a> on human-in-the-loop distillation converted for the <a href='https://explosion.ai/blog/human-in-the-loop-distillation' target='_blank'>blog post</a></p></figcaption> </figure> <h3>Add your talks to your website</h3> <p>If you have a personal website or portfolio, include a list of your previous and upcoming talks! I have a list of selected talks on <a href="/#talks">this website</a> and we also publish past and future events like talks, workshops and podcast interviews on the <a href="https://explosion.ai/events">Explosion website</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/5e6679135d3a931e91c7c41b23635fad/1d134/slides_sharing-events.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 35.85858585858586%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3KFB/8QAFhAAAwAAAAAAAAAAAAAAAAAAEBEh/9oACAEBAAEFAox//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAFxABAQEBAAAAAAAAAAAAAAAAAQAhEf/aAAgBAQABPyHWydeMN//aAAwDAQACAAMAAAAQgA//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEAAgMAAAAAAAAAAAAAAAABABEhMUH/2gAIAQEAAT8QtQCnZmaCJU//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/5e6679135d3a931e91c7c41b23635fad/55fac/slides_sharing-events.webp 198w, /static/5e6679135d3a931e91c7c41b23635fad/5b4d3/slides_sharing-events.webp 395w, /static/5e6679135d3a931e91c7c41b23635fad/848e4/slides_sharing-events.webp 790w, /static/5e6679135d3a931e91c7c41b23635fad/8d239/slides_sharing-events.webp 1185w, /static/5e6679135d3a931e91c7c41b23635fad/888d0/slides_sharing-events.webp 1580w, /static/5e6679135d3a931e91c7c41b23635fad/da28f/slides_sharing-events.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/5e6679135d3a931e91c7c41b23635fad/9db10/slides_sharing-events.jpg 198w, /static/5e6679135d3a931e91c7c41b23635fad/16a07/slides_sharing-events.jpg 395w, /static/5e6679135d3a931e91c7c41b23635fad/d27a6/slides_sharing-events.jpg 790w, /static/5e6679135d3a931e91c7c41b23635fad/0b93b/slides_sharing-events.jpg 1185w, /static/5e6679135d3a931e91c7c41b23635fad/8f04a/slides_sharing-events.jpg 1580w, /static/5e6679135d3a931e91c7c41b23635fad/1d134/slides_sharing-events.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/5e6679135d3a931e91c7c41b23635fad/d27a6/slides_sharing-events.jpg" alt="Screenshots of list of talks on ines.io and explosion.ai" title="Lists of upcoming and past talks on &lt;a href=&#39;https://ines.io/#talks&#39; target=&#39;_blank&#39;&gt;ines.io&lt;/a&gt; and &lt;a href=&#39;https://explosion.ai/events&#39; target=&#39;_blank&#39;&gt;explosion.ai&lt;/a&gt;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Lists of upcoming and past talks on <a href='https://ines.io/#talks' target='_blank'>ines.io</a> and <a href='https://explosion.ai/events' target='_blank'>explosion.ai</a></p></figcaption> </figure> <p>For each talk, I include a link to the slides and recording, if available, and I’ve also added options for written summaries and further resources. Implementation-wise, it’s a simple and <a href="https://css-tricks.com/making-tables-responsive-with-minimal-css/">responsive</a> HTML table, which is automatically generated from a JSON file:</p> <div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"date"</span><span class="token operator">:</span> <span class="token string">"2024-06-15"</span><span class="token punctuation">,</span> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation"</span><span class="token punctuation">,</span> <span class="token property">"event"</span><span class="token operator">:</span> <span class="token string">"PyData London"</span><span class="token punctuation">,</span> <span class="token property">"location"</span><span class="token operator">:</span> <span class="token string">"London (United Kingdom)"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://pydata.org/london2024"</span><span class="token punctuation">,</span> <span class="token property">"slides"</span><span class="token operator">:</span> <span class="token string">"https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation"</span><span class="token punctuation">,</span> <span class="token property">"video"</span><span class="token operator">:</span> <span class="token string">"https://www.youtube.com/watch?v=pgLLgvjZ_FA"</span><span class="token punctuation">,</span> <span class="token property">"notes"</span><span class="token operator">:</span> <span class="token string">"https://explosion.ai/blog/human-in-the-loop-distillation"</span> <span class="token punctuation">}</span></code></pre></div> <hr> <p>Thanks for following along with this series and all the great feedback 🖤 Let me know if there are any other topics you’d like me to cover and I’ll keep adding to this series in the future. And of course, if you’ve created your own slides using some of my posts for inspiration, feel free to email me – I’d love to check them out!</p><![CDATA[Making beautiful slides for your talks, part 4: Design elements and inspiration]]>https://ines.io/blog/beautiful-slides-talks-part-4-design-elementshttps://ines.io/blog/beautiful-slides-talks-part-4-design-elementsSun, 13 Apr 2025 00:00:00 GMT<p>As a <a href="/blog/how-i-started-coding">teenager</a>, I was really into creating and designing websites. It was my biggest hobby (before being online 24/7 was common or “cool”), and there were many days where I couldn’t wait to get home from school and continue working on a new design. To this day, this is the feeling I’m trying to recapture when making slides. If opening up the presentation to work on it is getting me all excited, I know I’m on the right track.</p> <p>In this series, I’ve already covered general design tips and how to find an aesthetic, so this post dives deeper into the little details. I’ll include examples of visual design elements I used to implement different aesthetics and share some resources and inspiration you can use for your talks.</p> <p>🎨 <strong>Part 1:</strong> <a href="/blog/beginners-guide-beautiful-slides-talks">Design tips for beginners</a> ✨ <strong>Part 2:</strong> <a href="/blog/beautiful-slides-talks-part-2-aesthetics">All about aesthetics</a> 🛠️ Part 3: <a href="/blog/beautiful-slides-talks-part-3-technical-content">Technical content</a> 🧩 <strong>Part 4: Design elements</strong> 💌 <strong>Part 5:</strong> <a href="/blog/beautiful-slides-talks-part-5-sharing-presentations">Sharing your presentations</a></p> <p><em><strong>Disclaimer</strong> (since my previous post also got widely shared outside of my circles): This blog post series is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p> <hr> <h2>Design elements</h2> <p>Not everything you use has to have a deeper meaning – most of the time, I use design elements because I think they look kinda cool. I think that’s fine, as long as you don’t overdo it. Attention to detail also helps keeping your audience engaged and I like the element of surprise and including little details to discover on each new slide.</p> <h3>Boxes and containers</h3> <p>Boxes and containers are the simplest and most obvious design elements: they group content together and ensure that text remains readable, e.g. by giving it a solid white background color. I like to play around with different styles like borders, background opacity, shadows and rounded corners to match the style of my presentation.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/1d134/slides_elements-boxes.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.878787878787875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAME/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwT/2gAMAwEAAhADEAAAAdwQbAKP/8QAGRAAAgMBAAAAAAAAAAAAAAAAAAIBAyES/9oACAEBAAEFAusWyGMP/8QAGBEAAgMAAAAAAAAAAAAAAAAAAQIQESH/2gAIAQMBAT8BOPQj/8QAGBEAAgMAAAAAAAAAAAAAAAAAABEBEiL/2gAIAQIBAT8BWWWk/8QAGhAAAAcAAAAAAAAAAAAAAAAAAAECEBExQf/aAAgBAQAGPwIlYItv/8QAGBABAAMBAAAAAAAAAAAAAAAAAQARIXH/2gAIAQEAAT8hAbTjY6jFXcGmCT//2gAMAwEAAgADAAAAEPQ//8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEhMfH/2gAIAQMBAT8QjUaJH//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxAIhaX/xAAbEAEAAwADAQAAAAAAAAAAAAABABEhMUFR4f/aAAgBAQABPxAtCrKyOuIMLqWw2LFF5X2f/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/55fac/slides_elements-boxes.webp 198w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/5b4d3/slides_elements-boxes.webp 395w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/848e4/slides_elements-boxes.webp 790w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/8d239/slides_elements-boxes.webp 1185w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/888d0/slides_elements-boxes.webp 1580w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/da28f/slides_elements-boxes.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/9db10/slides_elements-boxes.jpg 198w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/16a07/slides_elements-boxes.jpg 395w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/d27a6/slides_elements-boxes.jpg 790w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/0b93b/slides_elements-boxes.jpg 1185w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/8f04a/slides_elements-boxes.jpg 1580w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/1d134/slides_elements-boxes.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/d27a6/slides_elements-boxes.jpg" alt="Examples of boxes and containers used in my slides" title="Examples of boxes and containers used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/ki-zwischen-freiheit-und-kontrolle-the-ai-revolution-will-not-be-monopolized&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#4&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020&#39; target=&#39;_blank&#39;&gt;#5&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/what-the-history-of-the-web-can-teach-us-about-the-future-of-ai&#39; target=&#39;_blank&#39;&gt;#6&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of boxes and containers used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/ki-zwischen-freiheit-und-kontrolle-the-ai-revolution-will-not-be-monopolized' target='_blank'>#3</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#4</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#5</a>, <a href='https://speakerdeck.com/inesmontani/what-the-history-of-the-web-can-teach-us-about-the-future-of-ai' target='_blank'>#6</a>)</p></figcaption> </figure> <h3>Speech bubbles, arrows and annotations</h3> <p>Many of my talks include diagrams and flowcharts to explain <a href="/blog/beautiful-slides-talks-part-3-technical-content">technical concepts</a>. These usually combine boxes, arrows and speech bubbles for annotations, and are great to visualize dynamic processes – much better than just plain text.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/7a14784c299a0fb3ffa24c1214ffc9f5/fdb5a/slides_technical-flowchart-example.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 30.303030303030305%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3KAH/8QAFxABAAMAAAAAAAAAAAAAAAAAAAERQf/aAAgBAQABBQLUW//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAAQIf/aAAgBAQAGPwJU/8QAGhAAAgMBAQAAAAAAAAAAAAAAASEAETFBUf/aAAgBAQABPyGi/IQSdUWV1V5P/9oADAMBAAIAAwAAABDwD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAAIDAQAAAAAAAAAAAAAAAAERADFBcf/aAAgBAQABPxADICGNTIEy3FWbW8N7P//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/7a14784c299a0fb3ffa24c1214ffc9f5/55fac/slides_technical-flowchart-example.webp 198w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/5b4d3/slides_technical-flowchart-example.webp 395w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/848e4/slides_technical-flowchart-example.webp 790w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/8d239/slides_technical-flowchart-example.webp 1185w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/888d0/slides_technical-flowchart-example.webp 1580w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/548e7/slides_technical-flowchart-example.webp 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/7a14784c299a0fb3ffa24c1214ffc9f5/9db10/slides_technical-flowchart-example.jpg 198w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/16a07/slides_technical-flowchart-example.jpg 395w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/d27a6/slides_technical-flowchart-example.jpg 790w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/0b93b/slides_technical-flowchart-example.jpg 1185w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/8f04a/slides_technical-flowchart-example.jpg 1580w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/fdb5a/slides_technical-flowchart-example.jpg 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/7a14784c299a0fb3ffa24c1214ffc9f5/d27a6/slides_technical-flowchart-example.jpg" alt="Comparison of slide with list vs. same content with flowchart" title="Comparison of the same content as a list and visualized as a flowchart" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Comparison of the same content as a list and visualized as a flowchart</p></figcaption> </figure> <p>For arrows, you can experiment with solid, dashed or dotted lines, different arrowhead styles, colors and curves. Speech bubbles can optionally have rounded corners, borders, shadows or a slightly see-through background color, and point to the relevant element on the slide. I try to stick to a minimum font size of 30pt, to make sure that annotations are readable, even from the back of a room. I also like to use them as an alternative to a regular lists and collections of keywords.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/5b888f7916204c5aa15e618ecff7f98a/1d134/slides_elements-bubbles.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQT/2gAMAwEAAhADEAAAAa5Cg0RM/wD/xAAYEAACAwAAAAAAAAAAAAAAAAABAxEzQf/aAAgBAQABBQJghaLN/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAEDAQE/ATV//8QAFhEBAQEAAAAAAAAAAAAAAAAAARAy/9oACAECAQE/ATDP/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAEQITH/2gAIAQEABj8CduNZ/8QAGhAAAgMBAQAAAAAAAAAAAAAAAREAITFBUf/aAAgBAQABPyHdCCsy++GFt6T/2gAMAwEAAgADAAAAEIgv/8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQMBAT8Qkf/EABURAQEAAAAAAAAAAAAAAAAAALEQ/9oACAECAQE/EHE//8QAGRABAAMBAQAAAAAAAAAAAAAAAQARMSFh/9oACAEBAAE/EDP6VXnX2BDrCCiEFAHJ/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/5b888f7916204c5aa15e618ecff7f98a/55fac/slides_elements-bubbles.webp 198w, /static/5b888f7916204c5aa15e618ecff7f98a/5b4d3/slides_elements-bubbles.webp 395w, /static/5b888f7916204c5aa15e618ecff7f98a/848e4/slides_elements-bubbles.webp 790w, /static/5b888f7916204c5aa15e618ecff7f98a/8d239/slides_elements-bubbles.webp 1185w, /static/5b888f7916204c5aa15e618ecff7f98a/888d0/slides_elements-bubbles.webp 1580w, /static/5b888f7916204c5aa15e618ecff7f98a/da28f/slides_elements-bubbles.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/5b888f7916204c5aa15e618ecff7f98a/9db10/slides_elements-bubbles.jpg 198w, /static/5b888f7916204c5aa15e618ecff7f98a/16a07/slides_elements-bubbles.jpg 395w, /static/5b888f7916204c5aa15e618ecff7f98a/d27a6/slides_elements-bubbles.jpg 790w, /static/5b888f7916204c5aa15e618ecff7f98a/0b93b/slides_elements-bubbles.jpg 1185w, /static/5b888f7916204c5aa15e618ecff7f98a/8f04a/slides_elements-bubbles.jpg 1580w, /static/5b888f7916204c5aa15e618ecff7f98a/1d134/slides_elements-bubbles.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/5b888f7916204c5aa15e618ecff7f98a/d27a6/slides_elements-bubbles.jpg" alt="Examples of speech bubbles used in my slides" title="Examples of speech bubbles used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of speech bubbles used in my slides (<a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#3</a>)</p></figcaption> </figure> <h3>Emoji and icons</h3> <p>The easiest way to incorporate emoji is by using those that come with your operating system, like <a href="https://emojipedia.org/apple">Apple’s</a> colored emoji set. However, there’s are many <a href="https://emojipedia.org/vendors">different styles</a>, including open-source sets like <a href="https://emojipedia.org/openmoji">OpenMoji</a> or pixel art icons from <a href="https://emojipedia.org/serenityos">SerenityOS</a>. I typically try to pick an emoji or icon set that best fits the overall aesthetic of my slides.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/0466702b53c575731d7754d8ecff55f2/1d134/slides_elements-emoji.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAID/9oADAMBAAIQAxAAAAHSkmqgz//EABgQAAIDAAAAAAAAAAAAAAAAAAABAhEh/9oACAEBAAEFAq1REf/EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/AWf/xAAXEQADAQAAAAAAAAAAAAAAAAABAxAy/9oACAECAQE/AU5M/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAEQMYH/2gAIAQEABj8CyLZ//8QAGRABAAIDAAAAAAAAAAAAAAAAAQARIUFR/9oACAEBAAE/ITJAA1dwoJu7P//aAAwDAQACAAMAAAAQB+//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAWEQADAAAAAAAAAAAAAAAAAAAQocH/2gAIAQIBAT8Qeg//xAAZEAEBAAMBAAAAAAAAAAAAAAABEQAhMZH/2gAIAQEAAT8QJKs0nuNqCAW76ZSCCl4z/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/0466702b53c575731d7754d8ecff55f2/55fac/slides_elements-emoji.webp 198w, /static/0466702b53c575731d7754d8ecff55f2/5b4d3/slides_elements-emoji.webp 395w, /static/0466702b53c575731d7754d8ecff55f2/848e4/slides_elements-emoji.webp 790w, /static/0466702b53c575731d7754d8ecff55f2/8d239/slides_elements-emoji.webp 1185w, /static/0466702b53c575731d7754d8ecff55f2/888d0/slides_elements-emoji.webp 1580w, /static/0466702b53c575731d7754d8ecff55f2/da28f/slides_elements-emoji.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/0466702b53c575731d7754d8ecff55f2/9db10/slides_elements-emoji.jpg 198w, /static/0466702b53c575731d7754d8ecff55f2/16a07/slides_elements-emoji.jpg 395w, /static/0466702b53c575731d7754d8ecff55f2/d27a6/slides_elements-emoji.jpg 790w, /static/0466702b53c575731d7754d8ecff55f2/0b93b/slides_elements-emoji.jpg 1185w, /static/0466702b53c575731d7754d8ecff55f2/8f04a/slides_elements-emoji.jpg 1580w, /static/0466702b53c575731d7754d8ecff55f2/1d134/slides_elements-emoji.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/0466702b53c575731d7754d8ecff55f2/d27a6/slides_elements-emoji.jpg" alt="Examples of emoji used in my slides" title="Examples of emoji used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of emoji used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#3</a>)</p></figcaption> </figure> <p>You can use emoji in place of list bullets or as recurring icons to illustrate a concept or term. They also give you quick and easy illustrations in a consistent style. Whenever I need an illustration, I first check if there’s an emoji for it!</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/f3482357f351685b0c946dca1eb278dd/1d134/slides_elements-emoji2.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABYBAQEBAAAAAAAAAAAAAAAAAAMAAf/aAAwDAQACEAMQAAABsSItEYv/xAAYEAACAwAAAAAAAAAAAAAAAAABMgACA//aAAgBAQABBQKyYsBP/8QAFhEAAwAAAAAAAAAAAAAAAAAAAxAy/9oACAEDAQE/ARSv/8QAFxEAAwEAAAAAAAAAAAAAAAAAAQIQMf/aAAgBAgEBPwFcM//EABcQAQADAAAAAAAAAAAAAAAAAAEAECH/2gAIAQEABj8CYYV//8QAHBAAAgICAwAAAAAAAAAAAAAAAREAMSFBYXGR/9oACAEBAAE/IRWzuKSIOaHECrPs/9oADAMBAAIAAwAAABCL/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QBhn/xAAYEQACAwAAAAAAAAAAAAAAAAAAATFR8P/aAAgBAgEBPxBnqhQf/8QAGhABAAMAAwAAAAAAAAAAAAAAAQARQSFRof/aAAgBAQABPxADVjtfJKzacmog+KJ//9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/f3482357f351685b0c946dca1eb278dd/55fac/slides_elements-emoji2.webp 198w, /static/f3482357f351685b0c946dca1eb278dd/5b4d3/slides_elements-emoji2.webp 395w, /static/f3482357f351685b0c946dca1eb278dd/848e4/slides_elements-emoji2.webp 790w, /static/f3482357f351685b0c946dca1eb278dd/8d239/slides_elements-emoji2.webp 1185w, /static/f3482357f351685b0c946dca1eb278dd/888d0/slides_elements-emoji2.webp 1580w, /static/f3482357f351685b0c946dca1eb278dd/da28f/slides_elements-emoji2.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/f3482357f351685b0c946dca1eb278dd/9db10/slides_elements-emoji2.jpg 198w, /static/f3482357f351685b0c946dca1eb278dd/16a07/slides_elements-emoji2.jpg 395w, /static/f3482357f351685b0c946dca1eb278dd/d27a6/slides_elements-emoji2.jpg 790w, /static/f3482357f351685b0c946dca1eb278dd/0b93b/slides_elements-emoji2.jpg 1185w, /static/f3482357f351685b0c946dca1eb278dd/8f04a/slides_elements-emoji2.jpg 1580w, /static/f3482357f351685b0c946dca1eb278dd/1d134/slides_elements-emoji2.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/f3482357f351685b0c946dca1eb278dd/d27a6/slides_elements-emoji2.jpg" alt="Examples of emoji used in my slides" title="Examples of emoji as illustrations used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/kunstliche-intelligenz-technologie-der-zukunft-und-warum-open-source-die-karten-neu-mischt&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of emoji as illustrations used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/kunstliche-intelligenz-technologie-der-zukunft-und-warum-open-source-die-karten-neu-mischt' target='_blank'>#2</a>, <a href='https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines' target='_blank'>#3</a>)</p></figcaption> </figure> <h3>Gradients, patterns and textures</h3> <p>If solid background colors feel too plain and your slides need more “life” or “pop”, what you’re looking for are textures or patterns. This is also one of the best ways to connect your design back to your talk’s <a href="/blog/beautiful-slides-talks-part-2-aesthetics">aesthetic</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/f4426993a7f74de1d9cafc7b754d1053/1d134/slides_elements-bg.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.878787878787875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAME/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAED/9oADAMBAAIQAxAAAAG9xMob/wD/xAAYEAACAwAAAAAAAAAAAAAAAAACIgADEf/aAAgBAQABBQKoHMVyf//EABsRAAIBBQAAAAAAAAAAAAAAAAABAgMSFCFR/9oACAEDAQE/AYK7TMalw//EABgRAAIDAAAAAAAAAAAAAAAAAAACARMx/9oACAECAQE/AZdtLWP/xAAXEAEAAwAAAAAAAAAAAAAAAAAxAAEQ/9oACAEBAAY/AqTGf//EABkQAAMBAQEAAAAAAAAAAAAAAAABIRExQf/aAAgBAQABPyGm8dVCHqq+jL//2gAMAwEAAgADAAAAEH/f/8QAGBEBAQADAAAAAAAAAAAAAAAAAQBR0fD/2gAIAQMBAT8QDCbou7//xAAZEQADAAMAAAAAAAAAAAAAAAAAASERMbH/2gAIAQIBAT8QaVUWHfD/xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhYVFx/9oACAEBAAE/EHMYZA+U9gGybydl7t/MJ//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/f4426993a7f74de1d9cafc7b754d1053/55fac/slides_elements-bg.webp 198w, /static/f4426993a7f74de1d9cafc7b754d1053/5b4d3/slides_elements-bg.webp 395w, /static/f4426993a7f74de1d9cafc7b754d1053/848e4/slides_elements-bg.webp 790w, /static/f4426993a7f74de1d9cafc7b754d1053/8d239/slides_elements-bg.webp 1185w, /static/f4426993a7f74de1d9cafc7b754d1053/888d0/slides_elements-bg.webp 1580w, /static/f4426993a7f74de1d9cafc7b754d1053/da28f/slides_elements-bg.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/f4426993a7f74de1d9cafc7b754d1053/9db10/slides_elements-bg.jpg 198w, /static/f4426993a7f74de1d9cafc7b754d1053/16a07/slides_elements-bg.jpg 395w, /static/f4426993a7f74de1d9cafc7b754d1053/d27a6/slides_elements-bg.jpg 790w, /static/f4426993a7f74de1d9cafc7b754d1053/0b93b/slides_elements-bg.jpg 1185w, /static/f4426993a7f74de1d9cafc7b754d1053/8f04a/slides_elements-bg.jpg 1580w, /static/f4426993a7f74de1d9cafc7b754d1053/1d134/slides_elements-bg.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/f4426993a7f74de1d9cafc7b754d1053/d27a6/slides_elements-bg.jpg" alt="Examples of textures, gradients and patterns used in my slides" title="Examples of textures, gradients and patterns used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020&#39; target=&#39;_blank&#39;&gt;#4&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms&#39; target=&#39;_blank&#39;&gt;#5&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/incorporating-llms-into-practical-nlp-workflows&#39; target=&#39;_blank&#39;&gt;#6&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of textures, gradients and patterns used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data' target='_blank'>#3</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#4</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#5</a>, <a href='https://speakerdeck.com/inesmontani/incorporating-llms-into-practical-nlp-workflows' target='_blank'>#6</a>)</p></figcaption> </figure> <p>There’s a huge variety of textures available on sites like <a href="https://www.freepik.com/search?format=search&#x26;last_filter=query&#x26;last_value=texture&#x26;query=texture">Freepik</a> or <a href="https://creativemarket.com/graphics/textures">Creative Market</a>, from surfaces of real-world objects like paper, plastic or paint, to noise and distortion (think old VHS tapes). You can also search those sites for so-called “seamless” patterns, meaning patterns that can be tiled and repeated. For gradients, you can find inspiration on <a href="https://uigradients.com">uiGradients</a>, <a href="https://gradienthunt.com">Gradient Hunt</a> or <a href="https://coolors.co/gradients">Coolors</a>, which is also a great resource for color palettes. Just try to avoid backgrounds that are too visually busy to not distract from the content, and use boxes (see above) with a plain background color if needed to keep texts readable.</p> <h3>Shadow and glow</h3> <p>Elevation, light and shadows imitate paper and create depth, and you can use them to add a more designed feel, make text more readable or introduce visual hierarchies. (Google’s <a href="https://m2.material.io/design/environment/light-shadows.html">Material Design</a> has some nice examples of how shadows can be used as part of a design system. If you want to go even deeper, <a href="https://www.joshwcomeau.com/css/designing-shadows/">this tutorial</a> covers shadows in CSS, but you can also apply the tips to other tools and mediums.)</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/1d134/slides_elements-shadow.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/2gAMAwEAAhADEAAAActKTIFD/8QAGRAAAgMBAAAAAAAAAAAAAAAAAQMAERIy/9oACAEBAAEFAlm2M52Z/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAhMv/aAAgBAwEBPwF4Zdv/xAAWEQEBAQAAAAAAAAAAAAAAAAABADH/2gAIAQIBAT8BdIv/xAAVEAEBAAAAAAAAAAAAAAAAAAACEP/aAAgBAQAGPwI3/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAERITFRYYH/2gAIAQEAAT8hqYS/ZghcP//aAAwDAQACAAMAAAAQ8D//xAAYEQEBAAMAAAAAAAAAAAAAAAABABFx8P/aAAgBAwEBPxDjqYWG/8QAGREAAwADAAAAAAAAAAAAAAAAAAERITHw/9oACAECAQE/EMYdsRRH/8QAGhABAAIDAQAAAAAAAAAAAAAAAQAhMUFxEf/aAAgBAQABPxBmgLccgDyXbpNYIrwM/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/55fac/slides_elements-shadow.webp 198w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/5b4d3/slides_elements-shadow.webp 395w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/848e4/slides_elements-shadow.webp 790w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/8d239/slides_elements-shadow.webp 1185w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/888d0/slides_elements-shadow.webp 1580w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/da28f/slides_elements-shadow.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/9db10/slides_elements-shadow.jpg 198w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/16a07/slides_elements-shadow.jpg 395w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/d27a6/slides_elements-shadow.jpg 790w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/0b93b/slides_elements-shadow.jpg 1185w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/8f04a/slides_elements-shadow.jpg 1580w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/1d134/slides_elements-shadow.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/d27a6/slides_elements-shadow.jpg" alt="Examples of shadows and glow used in my slides" title="Examples of shadows and glow used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of shadows and glow used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data' target='_blank'>#3</a>)</p></figcaption> </figure> <p>You can experiment with different combinations of the distance and offset (how far away the shadow is placed), blur (how soft or blurry it is), opacity (how transparent it is), color (whether to use the standard black or a custom color) and also the angle (where the light source is coming from).</p> <p>Some fonts include variants for adding depth, which you can layer on top of each other to create a 3D effect – for example, the 70s-style <a href="https://www.myfonts.com/collections/alkaria-font-konstantinestudio">Alkaria</a>, which I’ve used in <a href="https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai">my talk</a> on applied NLP, or the retro sign-inspired <a href="https://www.myfonts.com/collections/frontage-font-juri-zaech">Frontage</a>. In fact, MyFonts has a whole collections of <a href="https://www.myfonts.com/pages/tags/stackable-fonts">stackable fonts</a> to choose from.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/af3ee6cc2719bcd699eeac3524330c9d/0004b/slides_elements-stacking.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 24.747474747474747%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/9oADAMBAAIQAxAAAAHVtCpCn//EABUQAQEAAAAAAAAAAAAAAAAAABAx/9oACAEBAAEFAq//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwFn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFRABAQAAAAAAAAAAAAAAAAAAARD/2gAIAQEABj8Cb//EABkQAAMBAQEAAAAAAAAAAAAAAAABESFRgf/aAAgBAQABPyFWFS3hKlr8Ef/aAAwDAQACAAMAAAAQDD//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/EB//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxAn/8QAGxAAAgMAAwAAAAAAAAAAAAAAAREAMUEhYXH/2gAIAQEAAT8QNYiwIx24Kg9LZTmf/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/af3ee6cc2719bcd699eeac3524330c9d/55fac/slides_elements-stacking.webp 198w, /static/af3ee6cc2719bcd699eeac3524330c9d/5b4d3/slides_elements-stacking.webp 395w, /static/af3ee6cc2719bcd699eeac3524330c9d/848e4/slides_elements-stacking.webp 790w, /static/af3ee6cc2719bcd699eeac3524330c9d/f7a48/slides_elements-stacking.webp 844w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/af3ee6cc2719bcd699eeac3524330c9d/9db10/slides_elements-stacking.jpg 198w, /static/af3ee6cc2719bcd699eeac3524330c9d/16a07/slides_elements-stacking.jpg 395w, /static/af3ee6cc2719bcd699eeac3524330c9d/d27a6/slides_elements-stacking.jpg 790w, /static/af3ee6cc2719bcd699eeac3524330c9d/0004b/slides_elements-stacking.jpg 844w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/af3ee6cc2719bcd699eeac3524330c9d/d27a6/slides_elements-stacking.jpg" alt="Font stacking with Alkaria and Frontage" title="Font stacking with shadows and 3D effect (&lt;a href=&#39;https://www.myfonts.com/collections/alkaria-font-konstantinestudio&#39; target=&#39;_blank&#39;&gt;Alkaria&lt;/a&gt;, &lt;a href=&#39;https://www.myfonts.com/collections/frontage-font-juri-zaech&#39; target=&#39;_blank&#39;&gt;Frontage&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Font stacking with shadows and 3D effect (<a href='https://www.myfonts.com/collections/alkaria-font-konstantinestudio' target='_blank'>Alkaria</a>, <a href='https://www.myfonts.com/collections/frontage-font-juri-zaech' target='_blank'>Frontage</a>)</p></figcaption> </figure> <hr> <h2>More tips and tricks</h2> <h3>Learn your presentation tool’s styling shortcuts</h3> <p><a href="https://support.apple.com/guide/keynote/copy-and-paste-text-tan7cad4c5e1/mac">Keynote</a> and <a href="https://support.microsoft.com/en-us/office/copy-the-fill-and-formatting-from-one-shape-to-ano%E2%8C%98ther-2ed0a654-a6fb-4170-ba7a-9132b77917b3">PowerPoint</a> both have a “copy style” feature that lets you apply the same formatting and style of one shape or element to another. This typically includes the background color, borders, shadows and font settings. You can also save element styles as a preset that you can apply with one click. I also use <a href="https://support.apple.com/guide/keynote/layer-group-and-lock-objects-tan003ee8980">grouping</a> for elements and layers, so I can move them around together as I design my slides, and I usually <a href="https://support.apple.com/guide/keynote/layer-group-and-lock-objects-tan003ee8980">lock</a> fixed objects like the logo and background elements so they stay in place.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/20e41e593b971c440e2133149877b8e5/1a6c7/slides_elements-toolbar.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 7.07070707070707%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAABABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABzgQH/8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABBQJ//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABPyF//9oADAMBAAIAAwAAABDzz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABYQAQEBAAAAAAAAAAAAAAAAAAEAMf/aAAgBAQABPxBxjJ2//9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/20e41e593b971c440e2133149877b8e5/55fac/slides_elements-toolbar.webp 198w, /static/20e41e593b971c440e2133149877b8e5/5b4d3/slides_elements-toolbar.webp 395w, /static/20e41e593b971c440e2133149877b8e5/848e4/slides_elements-toolbar.webp 790w, /static/20e41e593b971c440e2133149877b8e5/8d239/slides_elements-toolbar.webp 1185w, /static/20e41e593b971c440e2133149877b8e5/864b2/slides_elements-toolbar.webp 1319w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/20e41e593b971c440e2133149877b8e5/9db10/slides_elements-toolbar.jpg 198w, /static/20e41e593b971c440e2133149877b8e5/16a07/slides_elements-toolbar.jpg 395w, /static/20e41e593b971c440e2133149877b8e5/d27a6/slides_elements-toolbar.jpg 790w, /static/20e41e593b971c440e2133149877b8e5/0b93b/slides_elements-toolbar.jpg 1185w, /static/20e41e593b971c440e2133149877b8e5/1a6c7/slides_elements-toolbar.jpg 1319w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/20e41e593b971c440e2133149877b8e5/d27a6/slides_elements-toolbar.jpg" alt="Screenshot of my customized toolbar in Keynote" title="Part of my &lt;a href=&#39;https://support.apple.com/guide/keynote/customize-the-keynote-toolbar-tan81f1db118/mac&#39; target=&#39;_blank&#39;&gt;customized toolbar&lt;/a&gt; in Keynote with added shortcuts for grouping, styling, layer order and locked layers" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Part of my <a href='https://support.apple.com/guide/keynote/customize-the-keynote-toolbar-tan81f1db118/mac' target='_blank'>customized toolbar</a> in Keynote with added shortcuts for grouping, styling, layer order and locked layers</p></figcaption> </figure> <p>Also keep an eye on actions you commonly perform in the design process, including those that feel really tedious, and check if there are keyboard shortcuts or buttons that you can add to your toolbar for easy access. (For example, Keynote’s support for <a href="https://www.designbeginswithl.com/2020/05/font-tips-how-to-access-and-use-glyphs.html">alternate glyphs</a>, i.e. different versions of the same letter in fonts that support it, isn’t super convenient, but I was pleased to discover I could at least toggle the typography panel with <code>⌘</code>+<code>T</code>.)</p> <h3>Use an asset manager</h3> <p>Once you start collecting design assets like illustrations, patterns or textures, you need a way to store and organize them. I use <a href="https://eagle.cool/">Eagle</a>, which is available for a one-time license fee and comes with a great UI for categorizing, tagging, searching and viewing design files. It supports all common file formats, including Photoshop and Illustrator files, automatically creates preview images and lets you drag and drop assets into your design or presentation tool. There’s also a browser <a href="https://eagle.cool/extensions">extension</a> that makes it easy to save screenshots and images from the web. I currently have two libraries: one for inspiration and screenshots, and one for design assets.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/f9d5afa2aeea41a189910a06e5911091/e2603/slides_elements-eagle.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 54.04040404040404%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwABBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe2TEJbH/8QAGBABAQADAAAAAAAAAAAAAAAAAAEREiH/2gAIAQEAAQUCbJxWEf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAAICAwEAAAAAAAAAAAAAAAABESFBUXHR/9oACAEBAAE/IfSUZnomzfSqIF1Z/9oADAMBAAIAAwAAABDjD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExYUGR/9oACAEBAAE/ELbh3UcUiBG63fjk3TCM4P2Zrk3P/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/f9d5afa2aeea41a189910a06e5911091/55fac/slides_elements-eagle.webp 198w, /static/f9d5afa2aeea41a189910a06e5911091/5b4d3/slides_elements-eagle.webp 395w, /static/f9d5afa2aeea41a189910a06e5911091/848e4/slides_elements-eagle.webp 790w, /static/f9d5afa2aeea41a189910a06e5911091/8d239/slides_elements-eagle.webp 1185w, /static/f9d5afa2aeea41a189910a06e5911091/888d0/slides_elements-eagle.webp 1580w, /static/f9d5afa2aeea41a189910a06e5911091/aaf86/slides_elements-eagle.webp 2055w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/f9d5afa2aeea41a189910a06e5911091/9db10/slides_elements-eagle.jpg 198w, /static/f9d5afa2aeea41a189910a06e5911091/16a07/slides_elements-eagle.jpg 395w, /static/f9d5afa2aeea41a189910a06e5911091/d27a6/slides_elements-eagle.jpg 790w, /static/f9d5afa2aeea41a189910a06e5911091/0b93b/slides_elements-eagle.jpg 1185w, /static/f9d5afa2aeea41a189910a06e5911091/8f04a/slides_elements-eagle.jpg 1580w, /static/f9d5afa2aeea41a189910a06e5911091/e2603/slides_elements-eagle.jpg 2055w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/f9d5afa2aeea41a189910a06e5911091/d27a6/slides_elements-eagle.jpg" alt="slides elements eagle" title="My design asset library and custom folders in &lt;a href=&#39;https://eagle.cool&#39; target=&#39;_blank&#39;&gt;Eagle&lt;/a&gt; (I clearly had a lot of fun organizing my files!)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>My design asset library and custom folders in <a href='https://eagle.cool' target='_blank'>Eagle</a> (I clearly had a lot of fun organizing my files!)</p></figcaption> </figure> <p>In <a href="/blog/beginners-guide-beautiful-slides-talks">part 1</a>, I already recommended using a font manager like <a href="https://rightfontapp.com">RightFont</a> or <a href="https://fontba.se">FontBase</a> once you get serious about collecting fonts, and an asset manager is a great complement to that. If you’re working in an organization with a dedicated design team, you can also check in with them to see which tools they already use and if you can get in on it.</p> <hr> <h2>Resources</h2> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>🖼️ <strong>Textures</strong></span></td> <td><a href="https://www.freepik.com/search?format=search&#x26;last_filter=query&#x26;last_value=texture&#x26;query=texture">Freepik</a>, <a href="https://creativemarket.com/graphics/textures">Creative Market</a></td> </tr> <tr> <td><span>🎨 <strong>Gradients</strong></span></td> <td><a href="https://uigradients.com">uiGradients</a>, <a href="https://gradienthunt.com">Gradient Hunt</a>, <a href="https://coolors.co/gradients">Coolors</a></td> </tr> <tr> <td><span>🧩 <strong>Patterns</strong></span></td> <td><a href="https://www.freepik.com/search?term=seamless+pattern">Freepik</a>, <a href="https://creativemarket.com/graphics/patterns">Creative Market</a></td> </tr> <tr> <td><span>😀 <strong>Emoji</strong></span></td> <td><a href="https://emojipedia.org">Emojipedia</a>, <a href="https://thenounproject.com">The Noun Project</a></td> </tr> <tr> <td><span>✍️ <strong>Stackable Fonts</strong></span></td> <td><a href="https://www.myfonts.com/pages/tags/stackable-fonts">MyFonts</a>, <a href="https://creativemarket.com/search/layered-font">Creative Market</a></td> </tr> <tr> <td><span>🗃️ <strong>File Managers</strong></span></td> <td><a href="https://eagle.cool">Eagle</a>, <a href="https://rightfontapp.com">RightFont</a>, <a href="https://fontba.se">FontBase</a></td> </tr> <tr> <td><span>👩‍🎨 <strong>Design</strong></span></td> <td><a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, <a href="https://www.adobe.com/products/illustrator.html">Illustrator</a>, <a href="https://www.figma.com">Figma</a>, <a href="https://www.sketch.com">Sketch</a>, <a href="https://canva.com">Canva</a></td> </tr> <tr> <td><span>💻 <strong>Presentation</strong></span></td> <td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.microsoft.com/en-us/microsoft-365/powerpoint">PowerPoint</a>, <a href="https://workspace.google.com/products/slides/">Google Slides</a></td> </tr> </tbody> </table> <p><link-button href="/blog/beautiful-slides-talks-part-5-sharing-presentations" icon="right">Part 5: Sharing your presentations</link-button></p><![CDATA[Making beautiful slides for your talks, part 3: Technical content]]>https://ines.io/blog/beautiful-slides-talks-part-3-technical-contenthttps://ines.io/blog/beautiful-slides-talks-part-3-technical-contentFri, 14 Feb 2025 00:00:00 GMT<p>Software engineering, and Artificial Intelligence in particular, may sound exciting, but in reality, the problems you solve in your day-to-day work are often quite dry. In a talk, you may need to explain algorithms and mathematical equations, present results tables or walk through an implementation in code. And the great solution you’re showcasing isn’t always very visual – it’s often a program that prints a number and exits or outputs some <em>really good</em> vectors. In this post, I’ll share some tips and inspiration for presenting technical content in your slides and making “boring” topics more fun and engaging. I’ve also included some examples from the community again.</p> <p>🎨 <strong>Part 1:</strong> <a href="/blog/beginners-guide-beautiful-slides-talks">Design tips for beginners</a> ✨ <strong>Part 2:</strong> <a href="/blog/beautiful-slides-talks-part-2-aesthetics">All about aesthetics</a> 🛠️ <strong>Part 3: Technical content</strong> 🧩 <strong>Part 4:</strong> <a href="/blog/beautiful-slides-talks-part-4-design-elements">Design elements</a> 💌 <strong>Part 5:</strong> <a href="/blog/beautiful-slides-talks-part-5-sharing-presentations">Sharing your presentations</a></p> <p><em><strong>Disclaimer</strong> (since my previous post also got widely shared outside of my circles): This blog post series is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p> <hr> <h2>Vitaly Meursault: “Bonds are from Venus, Stocks are from Mars”</h2> <p><a href="https://vmeursault.com">Vitaly</a> is an economist at the Federal Reserve Bank of Philadelphia, where he conducts academic research in economics with a focus on machine learning and natural language processing. </p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/dfe20a4d3d2497dbc01c41928f96cdb7/e3932/slides_technical-vitaly.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUE/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgAD/9oADAMBAAIQAxAAAAHU2xS6KK1v/8QAHBAAAQQDAQAAAAAAAAAAAAAAAQACAwQRExRB/9oACAEBAAEFAjCS1rtY6YwvbJxYX//EABcRAQADAAAAAAAAAAAAAAAAAAABEiH/2gAIAQMBAT8BjVH/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8BZH//xAAcEAABBAMBAAAAAAAAAAAAAAABAAIQIRExUaH/2gAIAQEABj8CxSDHbHFZ8gx//8QAGxABAAICAwAAAAAAAAAAAAAAAQARITFhcbH/2gAIAQEAAT8hLgD3AUUWdiayDxAw1Bq68jnLVz//2gAMAwEAAgADAAAAEEzf/8QAFxEBAQEBAAAAAAAAAAAAAAAAEQEAIf/aAAgBAwEBPxCUXRdd/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/EMAjC//EABoQAQADAQEBAAAAAAAAAAAAAAEAESExcUH/2gAIAQEAAT8QNHLzm/Y/YIAQu3vkMmnBEr5EarkuiwKZlJuEka0T/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/dfe20a4d3d2497dbc01c41928f96cdb7/55fac/slides_technical-vitaly.webp 198w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/5b4d3/slides_technical-vitaly.webp 395w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/848e4/slides_technical-vitaly.webp 790w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/8d239/slides_technical-vitaly.webp 1185w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/8717d/slides_technical-vitaly.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/dfe20a4d3d2497dbc01c41928f96cdb7/9db10/slides_technical-vitaly.jpg 198w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/16a07/slides_technical-vitaly.jpg 395w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/d27a6/slides_technical-vitaly.jpg 790w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/0b93b/slides_technical-vitaly.jpg 1185w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/e3932/slides_technical-vitaly.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/dfe20a4d3d2497dbc01c41928f96cdb7/d27a6/slides_technical-vitaly.jpg" alt="Screenshots from the talk slides" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>✨ <strong>Aesthetic</strong></span></td> <td>fine arts / baroque / high-contrast / neobrutalism</td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#ebd767"></span> mustard yellow, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#f5cbcc"></span> rose, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#d2ecff"></span> light blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#f68688"></span> light coral, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#52b6ff"></span> blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#e7e7e7"></span> grey</td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://fonts.google.com/specimen/PT+Serif">PT Serif</a> (titles), <a href="https://fonts.google.com/specimen/Fira+Sans">Fira Sans</a> (body)</td> </tr> <tr> <td><span>🛠️ <strong>Tools</strong></span></td> <td><a href="https://www.microsoft.com/en-us/microsoft-365/powerpoint">PowerPoint</a>, <a href="https://www.pixelmator.com/pro/">Pixelmator Pro</a>, <a href="https://www.midjourney.com">Midjourney</a></td> </tr> </tbody> </table> <blockquote> <p>“My presentation merges art across eras - from Botticelli’s <a href="https://en.wikipedia.org/wiki/The_Birth_of_Venus">‘Birth of Venus’</a> and Velázquez’s <a href="https://en.wikipedia.org/wiki/Mars_Resting">‘Mars Resting’</a> to contemporary works - unified by the exploration of contrasts, reflecting the paper’s focus on divergent investor worldviews. I combine the artworks with modernist elements inspired by neobrutalism, featuring text on pastel-colored blocks with drop shadows. The design uses a Mars-red and Venus-blue color scheme that both distinguishes between stocks and bonds and focuses the attention on the main takeaways. For key points, I incorporate additional design elements like crowns and roses, generated in Midjourney to match the classical artworks’ style.</p> <p>The most challenging aspect was making dense tables with analysis results (a staple in my field) accessible and engaging. I addressed this through dynamic color highlighting in tables, using animated rectangles to guide attention to specific data points.”</p> </blockquote> <p><link-button href="https://speakerdeck.com/vmeursault/venus-and-mars" icon="text">Slides</link-button></p> <hr> <h2>Sofie Van Landeghem: “spaCy v3: Custom Trainable Component for Named Entity Relation Extraction”</h2> <p>I collaborated on these slides with <a href="https://bsky.app/profile/oxykodit.bsky.social">Sofie</a> and they were used in a <a href="https://www.youtube.com/watch?v=8HL-Ap5_Axo">video tutorial</a> showing how to implement a named entity relation extraction component from scratch with <a href="https://spacy.io">spaCy</a> and <a href="https://github.com/explosion/thinc">Thinc</a>.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/5aa061ef04cdefea58ee849d1dc575a6/e3932/slides_technical-sofie.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUCBP/EABYBAQEBAAAAAAAAAAAAAAAAAAQAAf/aAAwDAQACEAMQAAABdU7KR3ElZ//EABsQAAICAwEAAAAAAAAAAAAAAAACAxEBEyIy/9oACAEBAAEFAroWZFTfGN7bHR//xAAYEQADAQEAAAAAAAAAAAAAAAAAAQIRE//aAAgBAwEBPwGXjO9H/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAECERP/2gAIAQIBAT8BkrMkf//EABkQAAIDAQAAAAAAAAAAAAAAAAERAAIQIf/aAAgBAQAGPwJPsFTZHRn/xAAdEAACAgEFAAAAAAAAAAAAAAAAARFBIRAxYXGR/9oACAEBAAE/Ib8A7NBS5ILfhmje+BTf1p//2gAMAwEAAgADAAAAEFMf/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERUXH/2gAIAQMBAT8QVMqMz//EABcRAQADAAAAAAAAAAAAAAAAAAEQEVH/2gAIAQIBAT8QQ07H/8QAGxABAAIDAQEAAAAAAAAAAAAAAQARITFBYXH/2gAIAQEAAT8QQQPArjKx5Vk2vJoN/wBwXJoC7jEMh17FVtn/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/5aa061ef04cdefea58ee849d1dc575a6/55fac/slides_technical-sofie.webp 198w, /static/5aa061ef04cdefea58ee849d1dc575a6/5b4d3/slides_technical-sofie.webp 395w, /static/5aa061ef04cdefea58ee849d1dc575a6/848e4/slides_technical-sofie.webp 790w, /static/5aa061ef04cdefea58ee849d1dc575a6/8d239/slides_technical-sofie.webp 1185w, /static/5aa061ef04cdefea58ee849d1dc575a6/8717d/slides_technical-sofie.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/5aa061ef04cdefea58ee849d1dc575a6/9db10/slides_technical-sofie.jpg 198w, /static/5aa061ef04cdefea58ee849d1dc575a6/16a07/slides_technical-sofie.jpg 395w, /static/5aa061ef04cdefea58ee849d1dc575a6/d27a6/slides_technical-sofie.jpg 790w, /static/5aa061ef04cdefea58ee849d1dc575a6/0b93b/slides_technical-sofie.jpg 1185w, /static/5aa061ef04cdefea58ee849d1dc575a6/e3932/slides_technical-sofie.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/5aa061ef04cdefea58ee849d1dc575a6/d27a6/slides_technical-sofie.jpg" alt="Screenshots from the talk slides" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>✨ <strong>Aesthetic</strong></span></td> <td>blueprint / drawing board / spaCy</td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#0096db"></span> celestial blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#22212c"></span> off-black, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#ffffff"></span> white, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#a1fe4c"></span> yellow-green, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#ff7c7b"></span> light red, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#ff68e5"></span> magenta, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#3ee9fe"></span> cyan</td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://learn.microsoft.com/de-de/typography/font-list/arial-rounded-mt">Arial Rounded MT</a> (body), <a href="https://hanken.co/products/hk-grotesk">HK Grotesk</a> (accents), <a href="https://www.jetbrains.com/lp/mono/">JetBrains Mono</a> (code)</td> </tr> <tr> <td><span>🛠️ <strong>Tools</strong></span></td> <td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a></td> </tr> </tbody> </table> <blockquote> <p>“We used the blueprint style for all our ‘behind the scenes’ content about spaCy. The color scheme mirrors the spaCy <a href="https://spacy.io/styleguide#colors">blue</a> and the slides also use the same fonts as the <a href="https://spacy.io">documentation</a>. The most challenging part was to present a complex machine learning model implementation, and visualize <a href="http://matrixmultiplication.xyz/">matrix multiplication</a> and how token vectors are composed.</p> <p>To illustrate how the vectors flow through the model, we went with a color-coded approach, using an <a href="https://venngage.com/blog/accessible-colors/">accessible</a> palette of color pairs. This makes it easier to follow the vectors of two example tokens from the embedding step to the final classification layer that predicts a relation label. The implementations are presented as step-by-step flowcharts, with flexible arrows that can also be used to provide explanations along the way.”</p> </blockquote> <p><link-button href="https://speakerdeck.com/sofievl/2021-02-01-rel-video" icon="text">Slides</link-button> <link-button href="https://www.youtube.com/watch?v=8HL-Ap5_Axo" icon="video">Video</link-button></p> <hr> <h2>Flowcharts and diagrams</h2> <p>Flowcharts and diagrams are my go-to design elements for explaining technical concepts and logic. They can be introduced step by step and use illustrations or icons as visual guides. Creating flowcharts can hugely benefit your talk, even before you present it: the process really forces you to break things down in simple terms. My personal rule of thumb: if the idea is too complex for a flowchart, it’s likely too complex in general and needs to be simplified before it can go into my talk.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/2d3f50bf7a10ebc04d0b97dd054d5b40/e3932/slides_technical-flowcharts.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwT/2gAMAwEAAhADEAAAAb4wm0BUf//EABkQAAEFAAAAAAAAAAAAAAAAAAABAxExNP/aAAgBAQABBQJab0Qf/8QAFREBAQAAAAAAAAAAAAAAAAAAEEH/2gAIAQMBAT8Bh//EABYRAAMAAAAAAAAAAAAAAAAAAAQQMf/aAAgBAgEBPwEeL//EABgQAAIDAAAAAAAAAAAAAAAAAABxAQIQ/9oACAEBAAY/ApRZZ//EABoQAAMAAwEAAAAAAAAAAAAAAAABETFBYZH/2gAIAQEAAT8hWQ0LzFdP0//aAAwDAQACAAMAAAAQBA//xAAXEQADAQAAAAAAAAAAAAAAAAABELHB/9oACAEDAQE/EDuL/8QAFhEAAwAAAAAAAAAAAAAAAAAAELHR/9oACAECAQE/EGwf/8QAGhABAAMAAwAAAAAAAAAAAAAAAQARIVFhcf/aAAgBAQABPxA7hKK3uNMrefkEMMj/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/2d3f50bf7a10ebc04d0b97dd054d5b40/55fac/slides_technical-flowcharts.webp 198w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/5b4d3/slides_technical-flowcharts.webp 395w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/848e4/slides_technical-flowcharts.webp 790w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/8d239/slides_technical-flowcharts.webp 1185w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/8717d/slides_technical-flowcharts.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/2d3f50bf7a10ebc04d0b97dd054d5b40/9db10/slides_technical-flowcharts.jpg 198w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/16a07/slides_technical-flowcharts.jpg 395w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/d27a6/slides_technical-flowcharts.jpg 790w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/0b93b/slides_technical-flowcharts.jpg 1185w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/e3932/slides_technical-flowcharts.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/2d3f50bf7a10ebc04d0b97dd054d5b40/d27a6/slides_technical-flowcharts.jpg" alt="Screenshots from the talk slides" title="Examples of flowcharts from my talks (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of flowcharts from my talks (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#3</a>)</p></figcaption> </figure> <p>Many technical processes you’re trying to visualize are dynamic: <em>something happens</em>, code is executed in sequence, or data flows from A to B. Whenever you’re describing a process, consider if you can present it as a diagram instead of plain text. I often start by designing diagrams right after I’ve planned out my talk structure with <a href="/blog/beautiful-slides-talks-part-2-aesthetics/">statement</a> slides.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/7a14784c299a0fb3ffa24c1214ffc9f5/fdb5a/slides_technical-flowchart-example.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 30.303030303030305%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3KAH/8QAFxABAAMAAAAAAAAAAAAAAAAAAAERQf/aAAgBAQABBQLUW//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAAQIf/aAAgBAQAGPwJU/8QAGhAAAgMBAQAAAAAAAAAAAAAAASEAETFBUf/aAAgBAQABPyGi/IQSdUWV1V5P/9oADAMBAAIAAwAAABDwD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAAIDAQAAAAAAAAAAAAAAAAERADFBcf/aAAgBAQABPxADICGNTIEy3FWbW8N7P//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/7a14784c299a0fb3ffa24c1214ffc9f5/55fac/slides_technical-flowchart-example.webp 198w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/5b4d3/slides_technical-flowchart-example.webp 395w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/848e4/slides_technical-flowchart-example.webp 790w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/8d239/slides_technical-flowchart-example.webp 1185w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/888d0/slides_technical-flowchart-example.webp 1580w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/548e7/slides_technical-flowchart-example.webp 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/7a14784c299a0fb3ffa24c1214ffc9f5/9db10/slides_technical-flowchart-example.jpg 198w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/16a07/slides_technical-flowchart-example.jpg 395w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/d27a6/slides_technical-flowchart-example.jpg 790w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/0b93b/slides_technical-flowchart-example.jpg 1185w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/8f04a/slides_technical-flowchart-example.jpg 1580w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/fdb5a/slides_technical-flowchart-example.jpg 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/7a14784c299a0fb3ffa24c1214ffc9f5/d27a6/slides_technical-flowchart-example.jpg" alt="Comparison of slide with list vs. same content with flowchart" title="Comparison of the same content as a list and visualized as a flowchart" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Comparison of the same content as a list and visualized as a flowchart</p></figcaption> </figure> <p>Associating elements with icons is another useful technique for making abstract concepts more visual. For example, several of my recent <a href="https://speakerdeck.com/inesmontani">talks</a> explain the process of <a href="https://explosion.ai/blog/human-in-the-loop-distillation">human-in-the-loop distillation</a> and the relationships between Large Language Models (LLMs) and distilled task-specific components. To illustrate this, I introduced different graphics (a blob or crystal ball, and a cube or package) representing those model types early on in the talk, which I then reference across the following slides.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/467683910eef378a8663c909701e987d/e3932/slides_technical-distillation.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.878787878787875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAID/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECBP/aAAwDAQACEAMQAAAB3k2SDP/EABgQAAMBAQAAAAAAAAAAAAAAAAABAxMh/9oACAEBAAEFAnZG47d//8QAFxEBAAMAAAAAAAAAAAAAAAAAAAEREv/aAAgBAwEBPwHUrf/EABYRAAMAAAAAAAAAAAAAAAAAAAABEv/aAAgBAgEBPwGESj//xAAZEAACAwEAAAAAAAAAAAAAAAAAoQEiMTL/2gAIAQEABj8CirOWYz//xAAZEAACAwEAAAAAAAAAAAAAAAAAARExQSH/2gAIAQEAAT8hhNpZQSVLgVMv/9oADAMBAAIAAwAAABADz//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/EBT/xAAXEQEBAQEAAAAAAAAAAAAAAAARAAEx/9oACAECAQE/EMULD5f/xAAcEAABBQADAAAAAAAAAAAAAAARAAEhMUFhocH/2gAIAQEAAT8QZgXcusqeLUkIRy6QpmMeL//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/467683910eef378a8663c909701e987d/55fac/slides_technical-distillation.webp 198w, /static/467683910eef378a8663c909701e987d/5b4d3/slides_technical-distillation.webp 395w, /static/467683910eef378a8663c909701e987d/848e4/slides_technical-distillation.webp 790w, /static/467683910eef378a8663c909701e987d/8d239/slides_technical-distillation.webp 1185w, /static/467683910eef378a8663c909701e987d/8717d/slides_technical-distillation.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/467683910eef378a8663c909701e987d/9db10/slides_technical-distillation.jpg 198w, /static/467683910eef378a8663c909701e987d/16a07/slides_technical-distillation.jpg 395w, /static/467683910eef378a8663c909701e987d/d27a6/slides_technical-distillation.jpg 790w, /static/467683910eef378a8663c909701e987d/0b93b/slides_technical-distillation.jpg 1185w, /static/467683910eef378a8663c909701e987d/e3932/slides_technical-distillation.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/467683910eef378a8663c909701e987d/d27a6/slides_technical-distillation.jpg" alt="Screenshots from the talk slides" title="Examples of repeated icons associated with model types (&lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of repeated icons associated with model types (<a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#2</a>)</p></figcaption> </figure> <hr> <h2>Formulas and equations</h2> <p><a href="https://speakerdeck.com/vmeursault/venus-and-mars">Vitaly’s slides</a> include great examples of mathematical equations, which are seamlessly embedded alongside the text. He used <a href="https://support.microsoft.com/en-us/office/write-an-equation-or-formula-1d01cabc-ceb1-458d-bc70-7f9737722702">PowerPoint</a>’s built-in support for inserting <a href="https://www.latex-project.org/">LaTeX</a> and also added boxes in alternating colors to separate individual points, with matching text background colors to highlight key terms (which are also a nod to the Venus vs. Mars theme).</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/44258af2e24c46272c73815faf074488/e3932/slides_technical-formulas.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 32.82828282828283%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAC/9oADAMBAAIQAxAAAAHXgLip/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAECECH/2gAIAQEAAQUCWklX/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BZ//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/ASf/xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAaEAACAgMAAAAAAAAAAAAAAAAAARExIUFR/9oACAEBAAE/IVWhkUcFVs//2gAMAwEAAgADAAAAEIQf/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERITH/2gAIAQMBAT8QrhLP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/EANhf//EABkQAAIDAQAAAAAAAAAAAAAAAAERADGBIf/aAAgBAQABPxC2UKBFQCmxx1oXP//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/44258af2e24c46272c73815faf074488/55fac/slides_technical-formulas.webp 198w, /static/44258af2e24c46272c73815faf074488/5b4d3/slides_technical-formulas.webp 395w, /static/44258af2e24c46272c73815faf074488/848e4/slides_technical-formulas.webp 790w, /static/44258af2e24c46272c73815faf074488/8d239/slides_technical-formulas.webp 1185w, /static/44258af2e24c46272c73815faf074488/8717d/slides_technical-formulas.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/44258af2e24c46272c73815faf074488/9db10/slides_technical-formulas.jpg 198w, /static/44258af2e24c46272c73815faf074488/16a07/slides_technical-formulas.jpg 395w, /static/44258af2e24c46272c73815faf074488/d27a6/slides_technical-formulas.jpg 790w, /static/44258af2e24c46272c73815faf074488/0b93b/slides_technical-formulas.jpg 1185w, /static/44258af2e24c46272c73815faf074488/e3932/slides_technical-formulas.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/44258af2e24c46272c73815faf074488/d27a6/slides_technical-formulas.jpg" alt="Screenshots from the talk slides" title="Examples of formulas and mathematical equations in &lt;a href=&#39;https://speakerdeck.com/vmeursault/venus-and-mars&#39; target=&#39;_blank&#39;&gt;Vitaly’s slides&lt;/a&gt;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of formulas and mathematical equations in <a href='https://speakerdeck.com/vmeursault/venus-and-mars' target='_blank'>Vitaly’s slides</a></p></figcaption> </figure> <p>Depending on the content, there may be no way around using LaTeX via <a href="https://www.overleaf.com/learn/latex/Beamer">Beamer</a>, which limits the design possibilities and makes complex styling more difficult. (Unfortunately, I can’t give advice here, since I don’t use it much.) However, you can always combine Beamer slides with your own designs created in a different program, and matching fonts and colors in your <a href="https://www.overleaf.com/learn/latex/Beamer#Themes_and_colorthemes">theme</a> is relatively straightforward and ensures visual consistency.</p> <p>Pro tip: If you’re less experienced with LaTeX, try using ChatGPT or Claude to generate it for you! <a href="https://support.apple.com/guide/keynote/add-mathematical-equations-tan72a69d01f/mac">Keynote</a> and <a href="https://support.microsoft.com/en-us/office/write-an-equation-or-formula-1d01cabc-ceb1-458d-bc70-7f9737722702">PowerPoint</a> support inserting LaTeX out of the box and there’s an <a href="https://workspace.google.com/marketplace/app/autolatex_equations/850293439076">add-on</a> for Google that should work in <a href="https://workspace.google.com/products/slides/">Google Slides</a>. If you decide to go with images or screenshots instead, keep a close eye on the image quality and export in the highest reolution or, even better, as vector graphics (SVG).</p> <hr> <h2>Results and tables</h2> <p>Experiment results and figures can be an important part of your talk, but also challenging to present. In Vitaly’s <a href="https://speakerdeck.com/vmeursault/venus-and-mars">slides</a>, he used highlight colors and animated rectangles to guide attention to important data points, as well as boxes to add context. In some of my talks, I included speech bubbles to annotate rows, background colors to highlight individual figures and color-coded charts to visualize accuracy numbers.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/45a9a5090eb10c5ca49637baad05dd26/e3932/slides_technical-results.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAADAP/aAAwDAQACEAMQAAAB6mFVQILRE//EABoQAAICAwAAAAAAAAAAAAAAAAECABIhIjH/2gAIAQEAAQUCustsyMSuCOT/xAAYEQACAwAAAAAAAAAAAAAAAAAAAQIDEv/aAAgBAwEBPwGFjZpn/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAC/9oACAECAQE/ARjbf//EABkQAAIDAQAAAAAAAAAAAAAAAAABESAhQf/aAAgBAQAGPwIhNacp/8QAGxAAAgIDAQAAAAAAAAAAAAAAAAERMRAhQZH/2gAIAQEAAT8hXNvwa2CsolgsqzZZx//aAAwDAQACAAMAAAAQFz//xAAWEQEBAQAAAAAAAAAAAAAAAAAAAUH/2gAIAQMBAT8QHca//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/EFFMf//EAB0QAQEAAgEFAAAAAAAAAAAAAAERACExQXGRoeH/2gAIAQEAAT8QJeu3UYp6GRZSfHAwEzbxXtja88sd2y19uG7c/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/45a9a5090eb10c5ca49637baad05dd26/55fac/slides_technical-results.webp 198w, /static/45a9a5090eb10c5ca49637baad05dd26/5b4d3/slides_technical-results.webp 395w, /static/45a9a5090eb10c5ca49637baad05dd26/848e4/slides_technical-results.webp 790w, /static/45a9a5090eb10c5ca49637baad05dd26/8d239/slides_technical-results.webp 1185w, /static/45a9a5090eb10c5ca49637baad05dd26/8717d/slides_technical-results.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/45a9a5090eb10c5ca49637baad05dd26/9db10/slides_technical-results.jpg 198w, /static/45a9a5090eb10c5ca49637baad05dd26/16a07/slides_technical-results.jpg 395w, /static/45a9a5090eb10c5ca49637baad05dd26/d27a6/slides_technical-results.jpg 790w, /static/45a9a5090eb10c5ca49637baad05dd26/0b93b/slides_technical-results.jpg 1185w, /static/45a9a5090eb10c5ca49637baad05dd26/e3932/slides_technical-results.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/45a9a5090eb10c5ca49637baad05dd26/d27a6/slides_technical-results.jpg" alt="Screenshots from talk slides" title="Examples of results tables and charts on slides (&lt;a href=&#39;https://speakerdeck.com/vmeursault/venus-and-mars&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/workshop-half-hour-of-labeling-power-can-we-beat-gpt&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production-europython-keynote&#39; target=&#39;_blank&#39;&gt;#4&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of results tables and charts on slides (<a href='https://speakerdeck.com/vmeursault/venus-and-mars' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/workshop-half-hour-of-labeling-power-can-we-beat-gpt' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#3</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production-europython-keynote' target='_blank'>#4</a>)</p></figcaption> </figure> <p>Rather than screenshotting tables from papers and other sources, I typically re-create them in Keynote so I have more <a href="https://support.apple.com/guide/keynote/use-table-styles-tan6cbe92ac3/mac">styling</a> flexibility. Most slide design tools also support different <a href="https://support.apple.com/guide/keynote/add-or-delete-a-chart-tan1a8924264/mac">chart</a> styles based on tabular data that can be animated to show one line or bar at a time. While charts can be great to visualize figures in comparison and in a style that matches your talk’s aesthetic, use them wisely. Just because something is visual, it doesn’t mean it’s easier to understand. (The <a href="https://www.reddit.com/r/dataisugly/top/?t=all">Data Is Ugly</a> subreddit has some great inspiration for what <em>not</em> to do!)</p> <hr> <h2>Code and pseudocode</h2> <p>The main purpose of showing code on a slide is to explain what’s happening and how it works. It doesn’t necessarily have to be executable. I’ve found that it’s generally fine to leave out boilerplate or use ellipses <code>…</code> if it simplifies the code and makes it easier to follow. Speech bubbles and arrows are good ways to annotate your code and provide more context. For other tips for presenting visually appealing code, see <a href="/blog/beginners-guide-beautiful-slides-talks">part 1</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/193bd55cdbb6b2e37c9e2a4dad1f7e34/e3932/slides_technical-code.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgD/2gAMAwEAAhADEAAAAaxHJDX/xAAZEAACAwEAAAAAAAAAAAAAAAAAAgEDERL/2gAIAQEAAQUCqXLGTkjT/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BJ//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/ASf/xAAdEAABAgcAAAAAAAAAAAAAAAABAAIDEiExMlFx/9oACAEBAAY/Ark9UR07qjayK//EABsQAAICAwEAAAAAAAAAAAAAAAABESExQXHR/9oACAEBAAE/IY7WeUlaa2U6LhJ6n//aAAwDAQACAAMAAAAQB+//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAVEQEBAAAAAAAAAAAAAAAAAAAQMf/aAAgBAgEBPxCz/8QAGxAAAgMAAwAAAAAAAAAAAAAAESEAATFBUbH/2gAIAQEAAT8QB/ZKD7mfaU4laLKFvqf/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/193bd55cdbb6b2e37c9e2a4dad1f7e34/55fac/slides_technical-code.webp 198w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/5b4d3/slides_technical-code.webp 395w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/848e4/slides_technical-code.webp 790w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/8d239/slides_technical-code.webp 1185w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/8717d/slides_technical-code.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/193bd55cdbb6b2e37c9e2a4dad1f7e34/9db10/slides_technical-code.jpg 198w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/16a07/slides_technical-code.jpg 395w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/d27a6/slides_technical-code.jpg 790w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/0b93b/slides_technical-code.jpg 1185w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/e3932/slides_technical-code.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/193bd55cdbb6b2e37c9e2a4dad1f7e34/d27a6/slides_technical-code.jpg" alt="Screenshots from the talk slides" title="Examples of annotated code from my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/let-them-write-code-keynote-pycon-india-2019&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of annotated code from my slides (<a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#1</a>, <a href='https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/let-them-write-code-keynote-pycon-india-2019' target='_blank'>#3</a>)</p></figcaption> </figure> <p>If you’re speaking to an audience of programmers, <a href="https://en.wikipedia.org/wiki/Pseudocode">pseudocode</a> can also be effective for describing logical concepts. After all, that’s what code was designed for! For example, in <a href="https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines">Matt’s talk</a> about bootstrapping information extraction pipelines, we used <code>for</code> loops in Python to illustrate how to structure annotation workflows and reduce cognitive load for the annotator:</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/63cb1148981904affdffb3b1a7dc018f/e3932/slides_technical-pseudocode.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 36.36363636363637%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGamGqE/8QAGRABAQADAQAAAAAAAAAAAAAAAwECBBIT/9oACAEBAAEFAszf3futpywP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHRAAAgIBBQAAAAAAAAAAAAAAAhEAARIhMTJBgf/aAAgBAQAGPwKyHKxb5w7ReFNXv3P/xAAaEAEAAgMBAAAAAAAAAAAAAAABACERMUGR/9oACAEBAAE/IT6FRQ8iODeCkneStsz/2gAMAwEAAgADAAAAEPPf/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8QR//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAAIDAQEBAAAAAAAAAAAAAAERACFBMWGB/9oACAEBAAE/EAyoCgIOrxigmFWDRTWOADtSfGd+T//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/63cb1148981904affdffb3b1a7dc018f/55fac/slides_technical-pseudocode.webp 198w, /static/63cb1148981904affdffb3b1a7dc018f/5b4d3/slides_technical-pseudocode.webp 395w, /static/63cb1148981904affdffb3b1a7dc018f/848e4/slides_technical-pseudocode.webp 790w, /static/63cb1148981904affdffb3b1a7dc018f/8d239/slides_technical-pseudocode.webp 1185w, /static/63cb1148981904affdffb3b1a7dc018f/8717d/slides_technical-pseudocode.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/63cb1148981904affdffb3b1a7dc018f/9db10/slides_technical-pseudocode.jpg 198w, /static/63cb1148981904affdffb3b1a7dc018f/16a07/slides_technical-pseudocode.jpg 395w, /static/63cb1148981904affdffb3b1a7dc018f/d27a6/slides_technical-pseudocode.jpg 790w, /static/63cb1148981904affdffb3b1a7dc018f/0b93b/slides_technical-pseudocode.jpg 1185w, /static/63cb1148981904affdffb3b1a7dc018f/e3932/slides_technical-pseudocode.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/63cb1148981904affdffb3b1a7dc018f/d27a6/slides_technical-pseudocode.jpg" alt="Screenshot from the talk slides" title="Tips for keeping annotation tasks small and reducing cognitive load, illustrated as pseudocode in &lt;a href=&#39;https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines&#39; target=&#39;_blank&#39;&gt;Matt’s slides&lt;/a&gt;. The concepts described here aren’t actually code but multi-step workflows performed by a human." loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Tips for keeping annotation tasks small and reducing cognitive load, illustrated as pseudocode in <a href='https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines' target='_blank'>Matt’s slides</a>. The concepts described here aren’t actually code but multi-step workflows performed by a human.</p></figcaption> </figure> <hr> <p>If your talk is very academic in nature, an aesthetics-based approach might simply not be a good fit, and that’s fine. But for many technical conference talks, sprinkling in a bit of your personality through visual elements can make your content more interesting and in turn, engage your audience and make it easier to get your points across.</p> <p><em>P.S.: I really appreciate you all reaching out and sharing your slides inspired by my blog posts! If you’ve created your own slides, feel free to email me – I’d love to check them out</em> 🖤</p> <p><link-button href="/blog/beautiful-slides-talks-part-4-design-elements" icon="right">Part 4: Design elements</link-button></p><![CDATA[My Year in Review 2024]]>https://ines.io/blog/year-in-review-2024https://ines.io/blog/year-in-review-2024Sat, 14 Dec 2024 00:00:00 GMT<p>2024 was an eventful but also difficult year for me. We made the decision to <a href="https://explosion.ai/blog/back-to-our-roots-company-update">go back to</a> running Explosion as an independent-minded, self-sufficient company, and the transition wasn’t easy. Doing open source in a sustainable way is a still a big challenge, and supporting the company with product and services revenue required many difficult decisions. On the bright side, we finally got approved for a substantial R&#x26;D government grant this year! I also got to travel a lot and met many cool people, and it’s been incredibly motivating to see that our vision for applied NLP resonates so much with the developer community.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/f9d63e7895231ec68e7bba809dcf4005/aaf92/2024_ines.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 39.3939393939394%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQD/2gAMAwEAAhADEAAAAZe4NAR//8QAGRAAAwADAAAAAAAAAAAAAAAAAQIDERIh/9oACAEBAAEFAp41ggKDq//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAMAAwAAAAAAAAAAAAAAAAABERIxQf/aAAgBAQAGPwLg3RZbh//EABgQAAMBAQAAAAAAAAAAAAAAAAERIQBB/9oACAEBAAE/IanQtxLMXAOTMaTRv//aAAwDAQACAAMAAAAQc/8A/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFREBAQAAAAAAAAAAAAAAAAAAEEH/2gAIAQIBAT8Qp//EABkQAQEAAwEAAAAAAAAAAAAAAAERACExUf/aAAgBAQABPxCsrZgbSe5NYpQlV33Ct9hUZrhrmf/Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/f9d63e7895231ec68e7bba809dcf4005/55fac/2024_ines.webp 198w, /static/f9d63e7895231ec68e7bba809dcf4005/5b4d3/2024_ines.webp 395w, /static/f9d63e7895231ec68e7bba809dcf4005/848e4/2024_ines.webp 790w, /static/f9d63e7895231ec68e7bba809dcf4005/8d239/2024_ines.webp 1185w, /static/f9d63e7895231ec68e7bba809dcf4005/888d0/2024_ines.webp 1580w, /static/f9d63e7895231ec68e7bba809dcf4005/0b34d/2024_ines.webp 1920w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/f9d63e7895231ec68e7bba809dcf4005/9db10/2024_ines.jpg 198w, /static/f9d63e7895231ec68e7bba809dcf4005/16a07/2024_ines.jpg 395w, /static/f9d63e7895231ec68e7bba809dcf4005/d27a6/2024_ines.jpg 790w, /static/f9d63e7895231ec68e7bba809dcf4005/0b93b/2024_ines.jpg 1185w, /static/f9d63e7895231ec68e7bba809dcf4005/8f04a/2024_ines.jpg 1580w, /static/f9d63e7895231ec68e7bba809dcf4005/aaf92/2024_ines.jpg 1920w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/f9d63e7895231ec68e7bba809dcf4005/d27a6/2024_ines.jpg" alt="Photos of me" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <h2>Conferences and talks</h2> <p>This year, I decided to say yes to as many invitations as I could fit into my schedule. This meant a substantial amount of travelling, writing a <a href="https://speakerdeck.com/inesmontani">bunch of talks</a> and meeting lots and lots of people (which I love). Of course, I won’t be able to keep up this pace long-term, so in 2025, I’ll take it easier. I will be speaking at <a href="https://www.data-unplugged.de/festival">data:unplugged</a> in Münster in April and giving a talk in German for a change, and otherwise my focus will be on my favourite community and ecosystem conferences (current shortlist: PyCon DE, PyCon Italy and PyData Amsterdam).</p> <ul> <li><strong>Keynotes:</strong> PyCon Lithuania · DataHack Summit India · EuroSciPy · PyData Amsterdam · PyCon FR</li> <li><strong>Talks:</strong> QCon London · PyCon DE &#x26; PyData Berlin · PyCon Italy · Budapest ML Forum · PyData London · InfoQ Dev Summit Munich · PyBerlin · dotAI Paris</li> <li><strong>Roundups &#x26; Highlights:</strong> <a href="https://www.linkedin.com/posts/inesmontani_its-a-wrap-what-a-great-pyconde-pydata-activity-7188936519850622976-k7XP">Berlin</a> (PyCon &#x26; PyData) · <a href="https://www.linkedin.com/posts/inesmontani_thanks-for-a-great-pycon-italia-so-happy-activity-7200792507138404353-203A">Florence</a> (PyCon) · <a href="https://www.linkedin.com/posts/inesmontani_had-a-lovely-time-at-immergutrocken-ev-activity-7202944658526609409-nTQa">Immergut Festival</a> · <a href="https://www.linkedin.com/posts/inesmontani_llms-oss-ml-activity-7208392808263487488-sAzq">London</a> (PyData) · <a href="https://www.linkedin.com/posts/inesmontani_datahacksummit2024-nlp-genai-activity-7227930126775193600-CWAf">Bengaluru</a> (DataHack Summit) · <a href="https://www.linkedin.com/posts/inesmontani_genai-nlp-activity-7243203363926855680-_lTn">Amsterdam</a> (PyData) · <a href="https://www.linkedin.com/posts/inesmontani_nlp-genai-llms-activity-7246064796687548416-yA1M">Munich</a> (InfoQ Dev Summit) · <a href="https://www.linkedin.com/posts/inesmontani_dotai2024-ai-oss-activity-7253692456007876608-isfK">Paris</a> (dotAI)</li> </ul> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/546ad2bcbfb29922055e1d7b7c7d4c0a/b1c0f/2024_slides.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 57.07070707070707%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIEBf/EABYBAQEBAAAAAAAAAAAAAAAAAAIDBP/aAAwDAQACEAMQAAABWmBthvMoif/EABoQAAIDAQEAAAAAAAAAAAAAAAECABESEzH/2gAIAQEAAQUCWsowx1QEeWRDP//EABYRAAMAAAAAAAAAAAAAAAAAAAABEv/aAAgBAwEBPwG2Wz//xAAWEQADAAAAAAAAAAAAAAAAAAADEDH/2gAIAQIBAT8BJF//xAAZEAACAwEAAAAAAAAAAAAAAAAAEQECEKH/2gAIAQEABj8CIqxPmQs//8QAGxABAAICAwAAAAAAAAAAAAAAAQARIVExQWH/2gAIAQEAAT8ho4jtndCtRUSx6ibEsJJiK22f/9oADAMBAAIAAwAAABDsP//EABgRAAIDAAAAAAAAAAAAAAAAAAABESFh/9oACAEDAQE/EIrMEf/EABgRAAIDAAAAAAAAAAAAAAAAAAAxARFR/9oACAECAQE/ELtpCP/EABsQAQADAAMBAAAAAAAAAAAAAAEAESFBUaHR/9oACAEBAAE/EFsMdm+QJGmzTQLeah4aqR+EABxl1J1Yioq6rzP/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/546ad2bcbfb29922055e1d7b7c7d4c0a/55fac/2024_slides.webp 198w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/5b4d3/2024_slides.webp 395w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/848e4/2024_slides.webp 790w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/8d239/2024_slides.webp 1185w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/888d0/2024_slides.webp 1580w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/f63cc/2024_slides.webp 3900w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/546ad2bcbfb29922055e1d7b7c7d4c0a/9db10/2024_slides.jpg 198w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/16a07/2024_slides.jpg 395w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/d27a6/2024_slides.jpg 790w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/0b93b/2024_slides.jpg 1185w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/8f04a/2024_slides.jpg 1580w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/b1c0f/2024_slides.jpg 3900w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/546ad2bcbfb29922055e1d7b7c7d4c0a/d27a6/2024_slides.jpg" alt="Screenshots of title slides from the presentations" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <ul> <li><a href="https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms"><strong>The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs</strong></a><br />With the latest advancements in NLP and LLMs, and big companies like OpenAI dominating the space, many people wonder: Are we heading further into a black box era with larger and larger models, obscured behind APIs controlled by big tech monopolies? I don’t think so, and in this talk, I show you why.</li> <li><a href="https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation"><strong>Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation</strong></a><br />LLMs have enormous potential, but also challenge existing workflows in industry that require modularity, transparency and data privacy. In this talk, I show some practical solutions for using the latest models in real-world applications and distilling their knowledge into smaller and faster components that you can run and maintain in-house.</li> <li><a href="https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai"><strong>Applied NLP in the Age of Generative AI</strong></a><br />In this talk, I share the most important lessons we’ve learned from solving real-world information extraction problems in industry, and show you a new approach and mindset for designing robust and modular NLP pipelines in the age of Generative AI.</li> <li><a href="https://speakerdeck.com/inesmontani/10-years-of-open-source-navigating-the-next-ai-revolution"><strong>10 Years of Open Source: Navigating the Next AI Revolution</strong></a><br />In this talk, I share the most important lessons we’ve learned in 10 years of working on open-source software, our core philosophies that helped us adapt to an ever-changing AI landscape and why open source and interoperability still wins over black-box, proprietary APIs.</li> </ul> <p><link-button href="https://speakerdeck.com/inesmontani" icon="text">View all talks</link-button> <link-button href="https://explosion.ai/events" icon="calendar">Calendar</link-button> <br /><br /></p> <h2>Interviews and discussions</h2> <ul> <li><a href="https://se-radio.net/2024/04/se-radio-611-ines-montani-on-natural-language-processing/">Ines Montani on Natural Language Processing</a> (Software Engineering Radio)</li> <li><a href="https://www.linkedin.com/posts/inesmontani_had-a-lovely-time-at-immergutrocken-ev-activity-7202944658526609409-nTQa/">AI – The Artistic Intelligence?</a> (Immergut Festival)</li> <li><a href="https://talkpython.fm/episodes/show/465/the-ai-revolution-wont-be-monopolized">The AI Revolution Won’t Be Monopolized</a> (TalkPython)</li> <li><a href="https://www.youtube.com/watch?v=BXVxsUdlmMs">Building the Future of NLP: Insights on spaCy, Prodigy and Generative AI</a> (Leading With Data)</li> <li><a href="https://www.youtube.com/watch?v=-6o5-3cP0ik">The NLP and AI Revolution with the spaCy Creators</a> (Vanishing Gradients)</li> <li><a href="https://www.youtube.com/watch?v=neJ4J4PfdCE">Accelerate your Career with Open-Source AI</a> (dotAI)</li> <li><a href="https://www.youtube.com/watch?v=V73KeBCzXpM">PyLadies entrepreneurs and career development</a> (PyLadiesCon)</li> </ul> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/5412e8ef42d35d254781edcdd6b2744b/62db5/2024_websites.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 25.757575757575758%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB2aCgf//EABYQAAMAAAAAAAAAAAAAAAAAABARIf/aAAgBAQABBQKsf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAABD/2gAIAQEABj8Cf//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/IbT7jG72BzZ//9oADAMBAAIAAwAAABCDz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAQEBAAMAAAAAAAAAAAAAAAERACExYf/aAAgBAQABPxAkAEElpgqo46MgCn3f/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/5412e8ef42d35d254781edcdd6b2744b/55fac/2024_websites.webp 198w, /static/5412e8ef42d35d254781edcdd6b2744b/5b4d3/2024_websites.webp 395w, /static/5412e8ef42d35d254781edcdd6b2744b/848e4/2024_websites.webp 790w, /static/5412e8ef42d35d254781edcdd6b2744b/8d239/2024_websites.webp 1185w, /static/5412e8ef42d35d254781edcdd6b2744b/888d0/2024_websites.webp 1580w, /static/5412e8ef42d35d254781edcdd6b2744b/8b256/2024_websites.webp 2295w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/5412e8ef42d35d254781edcdd6b2744b/9db10/2024_websites.jpg 198w, /static/5412e8ef42d35d254781edcdd6b2744b/16a07/2024_websites.jpg 395w, /static/5412e8ef42d35d254781edcdd6b2744b/d27a6/2024_websites.jpg 790w, /static/5412e8ef42d35d254781edcdd6b2744b/0b93b/2024_websites.jpg 1185w, /static/5412e8ef42d35d254781edcdd6b2744b/8f04a/2024_websites.jpg 1580w, /static/5412e8ef42d35d254781edcdd6b2744b/62db5/2024_websites.jpg 2295w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/5412e8ef42d35d254781edcdd6b2744b/d27a6/2024_websites.jpg" alt="Screenshots of ines.io and explosion.ai" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <h2>Blog posts and writing</h2> <p>I wrote quite a few blog posts this year and especially enjoyed putting together practical <strong>case studies</strong> of NLP use cases with <a href="https://spacy.io">spaCy</a> and <a href="https://prodi.gy">Prodigy</a>, including projects from S&#x26;P Global, GitLab and Nesta. I would love to do more of those, so if you’re using spaCy and/or Prodigy at work and are open to sharing your use case, <a href="mailto:ines@explosion.ai">get in touch</a>!</p> <ul> <li><a href="https://ines.io/blog/beginners-guide-beautiful-slides-talks/">A beginner’s guide to making beautiful slides for your talks</a> (February)</li> <li><a href="https://explosion.ai/blog/nesta-skills">How Nesta uses NLP to process 7m job ads and shed light on the UK’s labor market</a> (February, Explosion)</li> <li><a href="https://ines.io/blog/three-transformative-tools/">Three transformative tools: a review of my favourite apps</a> (June)</li> <li><a href="https://ines.io/blog/beautiful-slides-talks-part-2-aesthetics/">Making beautiful slides for your talks, part 2: All about aesthetics</a> (June)</li> <li><a href="https://explosion.ai/blog/sp-global-commodities">How S&#x26;P Global is making markets more transparent with NLP, spaCy and Prodigy</a> (June, Explosion)</li> <li><a href="https://explosion.ai/blog/human-in-the-loop-distillation">A practical guide to human-in-the-loop distillation</a> (June, Explosion)</li> <li><a href="https://explosion.ai/blog/back-to-our-roots-company-update">Back to our roots: Company update and future plans</a> (July, Explosion)</li> <li><a href="https://ines.io/blog/window-knocking-machine-test/">The Window-Knocking Machine Test</a> (August)</li> <li><a href="https://explosion.ai/blog/gitlab-support-insights">How GitLab uses spaCy to analyze support tickets and empower their community</a> (September, Explosion)</li> <li><a href="https://explosion.ai/blog/modal-prodigy-serverless-nlp">Serverless custom NLP with LLMs, Modal and Prodigy</a> (October, Explosion)</li> <li><a href="https://explosion.ai/blog/pdfs-nlp-structured-data">From PDFs to AI-ready structured data: a deep dive</a> (December, Explosion)</li> </ul> <h2>Focus of my work and vision</h2> <p>🔮 distilling Large Language Models into smaller, task-specific components 🔮 developing new workflows to bring modularity and software engineering best practices to modern AI development 🔮 making specialised training workflows and UX around them as approachable as writing prompts 🔮 using clever automation to create better data faster 🔮 data privacy 🔮 strategies for refactoring code <em>and</em> data 🔮 taking Generative AI beyond just chat bots and natural language interfaces 🔮 structured data 🔮 helping developers take back control 🔮 scaling <em>down</em>, not just up</p> <hr> <h2>Personal</h2> <p>As I mentioned in my productivity tools <a href="/blog/three-transformative-tools">review</a>, I’m very much obsessed with tracking things and logging everything I do, watch, listen to, read and like. I also love my <a href="https://ouraring.com">Oura ring</a>, which I wear 24/7. The most notable change was that my morning routine and schedule has shifted and I wake up much earlier now. Maybe it’s age, or <a href="/blog/raspberry-pi-python-cats">cats</a> waking me up demanding their breakfast. Thanks to my bike, living in a super <a href="/blog/berlin-guide">walkable city</a> and my modest home gym, I’ve also been able to stay reasonably active.</p> <p>I listen to <strong>podcasts</strong> almost daily, mostly on topics completely unrelated to tech. It helps me unwind and makes chores and travelling less dull. My favourite genres include investigative journalism, true crime (I know, I know) and interesting cultural stories and audio reporting. I listened to over 150 this year alone, although this is counting every podcast I listened to at least one episode of.</p> <p>I don’t watch a lot of <strong>TV</strong>, but some series and films that stood out this year: <a href="https://en.wikipedia.org/wiki/Sh%C5%8Dgun_(2024_TV_series)"><em>Shōgun</em></a>, <a href="https://en.wikipedia.org/wiki/The_Zone_of_Interest_(film)"><em>The Zone of Interest</em></a>, <a href="https://en.wikipedia.org/wiki/The_Completely_Made-Up_Adventures_of_Dick_Turpin"><em>The Completely Made-Up Adventures of Dick Turpin</em></a> (definitely recommended for fellow fans of the <a href="https://en.wikipedia.org/wiki/The_Mighty_Boosh">Mighty Boosh</a>) and the new season of <a href="https://en.wikipedia.org/wiki/MasterChef:_The_Professionals"><em>MasterChef Professionals</em></a>, which started this autumn. Plus, my ultimate guilty pleasure when staying in hotels by myself (which I did a lot of this year): watching <em>Antiques Roadshow</em> or the German equivalent, curled up in bed with a snack.</p> <p>I also started several <strong>books</strong>, but finished very few. One of my favourites was the long-anticipated <a href="https://www.goodreads.com/book/show/211102398-rath"><em>Rath</em></a> by Volker Kutscher, the 10th and final part of a <a href="https://www.goodreads.com/series/82533-gereon-rath">series</a> that was also the basis for the neo-noir show <a href="https://en.wikipedia.org/wiki/Babylon_Berlin"><em>Babylon Berlin</em></a>, set in 1920s to 1930s Berlin. (Highly recommended! Outside of Germany, you should be able to watch it on Netflix with English subs.)</p> <p>In 2025, I really want to get back into <strong>music</strong> again. I’ve never been able to listen to music while working and programming, not even instrumental songs, so this limits the time I have to actually enjoy it. I did go to quite a few <strong>concerts</strong>, though, most notably several shows of my favourite German band <a href="https://en.wikipedia.org/wiki/Die_%C3%84rzte">Die Ärzte</a>, which would have made teenage me so proud and excited. I also took part in a panel discussion on AI and the music industry at Immergut Festival, combining my work with my love for live music – never thought those two worlds would ever collide!</p><![CDATA[The Window-Knocking Machine Test]]>https://ines.io/blog/window-knocking-machine-testhttps://ines.io/blog/window-knocking-machine-testWed, 07 Aug 2024 00:00:00 GMT<p>AI is making futurists of us all. With the dizzying speed of new innovations, it’s clear that our lives and work are going to change. So what’s next? How will technology shape our world going forward? And what tools and products should we build? When imagining what the future could look like, it helps to look <em>back</em> in time and compare past visions to our reality today. The following paintings were created in the early 1900s and depict the artist’s ideas for what life could look like in the year 2000, assisted by new technology.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/e6932478a0a731eb7a600ab9a2dcd074/04bec/window-knocking_1900.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 29.7979797979798%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAID/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgAB/9oADAMBAAIQAxAAAAHeAINv/8QAFxAAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAQABBQJKlw//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwFn/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/AYx//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAEQMf/aAAgBAQAGPwJTD//EABkQAAIDAQAAAAAAAAAAAAAAAAERACFBYf/aAAgBAQABPyEwkTkDIrwx8VP/2gAMAwEAAgADAAAAEPAf/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAhMf/aAAgBAwEBPxAGRy//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAECAQE/EH1kH//EABsQAQACAgMAAAAAAAAAAAAAAAEAMREhUbHh/9oACAEBAAE/EKaKazZ7DEYczsinSroqs//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/e6932478a0a731eb7a600ab9a2dcd074/55fac/window-knocking_1900.webp 198w, /static/e6932478a0a731eb7a600ab9a2dcd074/5b4d3/window-knocking_1900.webp 395w, /static/e6932478a0a731eb7a600ab9a2dcd074/848e4/window-knocking_1900.webp 790w, /static/e6932478a0a731eb7a600ab9a2dcd074/8d239/window-knocking_1900.webp 1185w, /static/e6932478a0a731eb7a600ab9a2dcd074/888d0/window-knocking_1900.webp 1580w, /static/e6932478a0a731eb7a600ab9a2dcd074/64296/window-knocking_1900.webp 1600w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/e6932478a0a731eb7a600ab9a2dcd074/9db10/window-knocking_1900.jpg 198w, /static/e6932478a0a731eb7a600ab9a2dcd074/16a07/window-knocking_1900.jpg 395w, /static/e6932478a0a731eb7a600ab9a2dcd074/d27a6/window-knocking_1900.jpg 790w, /static/e6932478a0a731eb7a600ab9a2dcd074/0b93b/window-knocking_1900.jpg 1185w, /static/e6932478a0a731eb7a600ab9a2dcd074/8f04a/window-knocking_1900.jpg 1580w, /static/e6932478a0a731eb7a600ab9a2dcd074/04bec/window-knocking_1900.jpg 1600w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/e6932478a0a731eb7a600ab9a2dcd074/d27a6/window-knocking_1900.jpg" alt="Illustration of a woman using a machine operating a broom, and a group of flying firefighters with wings rescuing people from a burning house" title="How people in 1900 imagined the year 2000 (Source: &lt;a href=&#39;https://www.washingtonpost.com/news/wonk/wp/2015/10/04/what-people-in-1900-thought-the-year-2000-would-look-like&#39; target=&#39;_blank&#39;&gt;The Washington Post&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>How people in 1900 imagined the year 2000 (Source: <a href='https://www.washingtonpost.com/news/wonk/wp/2015/10/04/what-people-in-1900-thought-the-year-2000-would-look-like' target='_blank'>The Washington Post</a>)</p></figcaption> </figure> <p>Now 2000 has long gone and we know what life really looked like. What all of these visions have in common is that they imagine very literal translations of human-shaped tasks into technology. We did indeed solve many of these problems with technology, but we did it quite differently. We invented vacuum cleaners and robotic mops instead of sweeping machines that operate brooms. Other innovations tackled different problems altogether: we didn’t just engineer fire trucks, planes and drones, but also introduced smoke detectors, modern construction techniques and fireproof materials to prevent fires from breaking out in the first place.</p> <p>During the Industrial Revolution and up until the 1950s (!), people in Europe would employ so called <a href="https://en.wikipedia.org/wiki/Knocker-up">“knocker-uppers”</a>, who would walk around the neighbourhood with a long stick and knock on windows to ensure their clients woke up in time. This peculiar profession was of course made entirely obsolete by technology when alarm clocks became reliable enough and affordable for everyone. However, knocking on windows was simply a means to an end – we didn’t build window-knocking machines. We built alarm clocks that solved the same problem in a <em>different</em> and much more effective way. Just like how humans knocking on windows was the most effective way before.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/4798c5e9d8dac5e0c17c258b7c3ada02/a24e6/wired-brain_knockerupper.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 39.8989898989899%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAED/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABZBQf/8QAGRAAAgMBAAAAAAAAAAAAAAAAAhIAAxEx/9oACAEBAAEFAuQ9I62X/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRAAAwADAAAAAAAAAAAAAAAAAAERAiGh/9oACAEBAAY/ArBM1j0//8QAGBABAQEBAQAAAAAAAAAAAAAAAREAIUH/2gAIAQEAAT8hWuiQ8yiWQuSN5n//2gAMAwEAAgADAAAAEPAP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGRAAAwEBAQAAAAAAAAAAAAAAAREhADGB/9oACAEBAAE/EKwgkniJYUjDEEQpT5o+U5G//9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/4798c5e9d8dac5e0c17c258b7c3ada02/55fac/wired-brain_knockerupper.webp 198w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/5b4d3/wired-brain_knockerupper.webp 395w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/848e4/wired-brain_knockerupper.webp 790w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/cf465/wired-brain_knockerupper.webp 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/4798c5e9d8dac5e0c17c258b7c3ada02/9db10/wired-brain_knockerupper.jpg 198w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/16a07/wired-brain_knockerupper.jpg 395w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/d27a6/wired-brain_knockerupper.jpg 790w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/a24e6/wired-brain_knockerupper.jpg 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/4798c5e9d8dac5e0c17c258b7c3ada02/d27a6/wired-brain_knockerupper.jpg" alt="Old photographs of knocker-uppers in front of buildings, using a long stick to knock on the windows" title="“Knocker-uppers” at work (Source: &lt;a href=&#39;http://mashable.com/2016/09/04/knockers-up/&#39; target=&#39;_blank&#39;&gt;Mashable&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>“Knocker-uppers” at work (Source: <a href='http://mashable.com/2016/09/04/knockers-up/' target='_blank'>Mashable</a>)</p></figcaption> </figure> <p>When designing new technological solutions, it’s easy to fall into the trap of imagining them as human-shaped replacements because that’s all we know. But the most successful innovations don’t usually work this way. So whenever you’re tasked with developing a system to replace and automate a human task, ask yourself:</p> <blockquote> <p>Am I building a window-knocking machine or an alarm clock?</p> </blockquote> <hr> <p>Around 2015 when deep learning was widely adopted and conversational AI became more viable, the industry got <em>very</em> excited about chat bots. Compared to what we can do today, the capabilities were still pretty limited, but optimism and all the new possibilities led to many ambitious product ideas and attempts to make modern workplaces more productive.</p> <p>Some of the most attractive use cases were centered around automating tasks of personal assistants: placing orders, coordinating people or scheduling appointments. The latter is especially painful and time-consuming, as everyone who’s worked in a role with frequent meetings can attest to. So what if we could make a chat bot take over that conversation?</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/48d44a5ff16a732583c79a0756bf472d/84cd2/window-knocking_calendly.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 44.94949494949495%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwABBf/EABQBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAeowsylsF//EABkQAAMAAwAAAAAAAAAAAAAAAAACMgEDIf/aAAgBAQABBQLZnqSPSSf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQQf/aAAgBAwEBPwGn/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAECAQE/ATF//8QAFhAAAwAAAAAAAAAAAAAAAAAAASAh/9oACAEBAAY/AoW//8QAHBAAAwABBQAAAAAAAAAAAAAAAAERMRAhUYHR/9oACAEBAAE/IWqYc7+j1a72QzmPT//aAAwDAQACAAMAAAAQW8//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPxAWP//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/ECBn/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARsRAxkaH/2gAIAQEAAT8QsLRdKmsitVWlocjfu/ZhyfQ8f//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/48d44a5ff16a732583c79a0756bf472d/55fac/window-knocking_calendly.webp 198w, /static/48d44a5ff16a732583c79a0756bf472d/5b4d3/window-knocking_calendly.webp 395w, /static/48d44a5ff16a732583c79a0756bf472d/848e4/window-knocking_calendly.webp 790w, /static/48d44a5ff16a732583c79a0756bf472d/8d239/window-knocking_calendly.webp 1185w, /static/48d44a5ff16a732583c79a0756bf472d/888d0/window-knocking_calendly.webp 1580w, /static/48d44a5ff16a732583c79a0756bf472d/a14d8/window-knocking_calendly.webp 2415w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/48d44a5ff16a732583c79a0756bf472d/9db10/window-knocking_calendly.jpg 198w, /static/48d44a5ff16a732583c79a0756bf472d/16a07/window-knocking_calendly.jpg 395w, /static/48d44a5ff16a732583c79a0756bf472d/d27a6/window-knocking_calendly.jpg 790w, /static/48d44a5ff16a732583c79a0756bf472d/0b93b/window-knocking_calendly.jpg 1185w, /static/48d44a5ff16a732583c79a0756bf472d/8f04a/window-knocking_calendly.jpg 1580w, /static/48d44a5ff16a732583c79a0756bf472d/84cd2/window-knocking_calendly.jpg 2415w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/48d44a5ff16a732583c79a0756bf472d/d27a6/window-knocking_calendly.jpg" alt="A chat bot trying to schedule a meeting vs. the Calendly app" title="Two solutions for scheduling meetings: a chat bot and the Calendly app" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Two solutions for scheduling meetings: a chat bot and the Calendly app</p></figcaption> </figure> <p>An alternative approach was introduced by <a href="https://calendly.com">Calendly</a>, a product I love and highly recommend. The premise is simple: Calendly syncs with your calendars and gives you a booking link that lets others schedule appointments in a few clicks, optionally syncing with their calendars, too, and automatically converting time zones. It’s an incredibly effective solution that doesn’t even require AI at its core – it simply reframes the problem and solves it at the root, rather than translating the task performed by a human assistant. You could also say: Calendly is the alarm clock to the window-knocking machine of the chat bot.</p> <p>Now don’t get me wrong, there are many applications that really benefit from conversational interfaces. But natural language is exactly that: <a href="https://explosion.ai/blog/natural-user-interface">another interface</a>. Whether or not it’s the <em>right</em> interface is a decision you can’t make without considering the specifics of your application and its intended users.</p> <p>The more recent developments around LLMs and Generative AI have enabled a big leap in natural language understanding technology and also reignited the excitement around chat bots. <a href="https://en.wikipedia.org/wiki/Retrieval-augmented_generation">Retrieval-Augmented Generation</a> (RAG) lets users interact with applications and their specific underlying data, for instance to translate natural language questions into real-time database queries. If you want to know your company’s revenue figures, you can simply ask your bot, instead of looking at a table of numbers.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/6ac9f2556874bd9d2720cc3a8066f11b/1a782/window-knocking_rag.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 45.45454545454545%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdi6pEMH/8QAGBAAAgMAAAAAAAAAAAAAAAAAAQIRIEH/2gAIAQEAAQUCKycp/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bh//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/Aaf/xAAVEAEBAAAAAAAAAAAAAAAAAAAgMf/aAAgBAQAGPwKr/8QAHBAAAgICAwAAAAAAAAAAAAAAAREAIRAxQVHR/9oACAEBAAE/IXhG3b9goXSEFhg7nOf/2gAMAwEAAgADAAAAEFTP/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAR/9oACAEDAQE/EADpP//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxBaYz//xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhMbFhof/aAAgBAQABPxDGtbInnyhUCu5y21X17GGBBYmodR0w0T//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/6ac9f2556874bd9d2720cc3a8066f11b/55fac/window-knocking_rag.webp 198w, /static/6ac9f2556874bd9d2720cc3a8066f11b/5b4d3/window-knocking_rag.webp 395w, /static/6ac9f2556874bd9d2720cc3a8066f11b/848e4/window-knocking_rag.webp 790w, /static/6ac9f2556874bd9d2720cc3a8066f11b/8d239/window-knocking_rag.webp 1185w, /static/6ac9f2556874bd9d2720cc3a8066f11b/888d0/window-knocking_rag.webp 1580w, /static/6ac9f2556874bd9d2720cc3a8066f11b/8b966/window-knocking_rag.webp 2495w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/6ac9f2556874bd9d2720cc3a8066f11b/9db10/window-knocking_rag.jpg 198w, /static/6ac9f2556874bd9d2720cc3a8066f11b/16a07/window-knocking_rag.jpg 395w, /static/6ac9f2556874bd9d2720cc3a8066f11b/d27a6/window-knocking_rag.jpg 790w, /static/6ac9f2556874bd9d2720cc3a8066f11b/0b93b/window-knocking_rag.jpg 1185w, /static/6ac9f2556874bd9d2720cc3a8066f11b/8f04a/window-knocking_rag.jpg 1580w, /static/6ac9f2556874bd9d2720cc3a8066f11b/1a782/window-knocking_rag.jpg 2495w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/6ac9f2556874bd9d2720cc3a8066f11b/d27a6/window-knocking_rag.jpg" alt="A chat bot to query revenue and customer data vs. a visual interface" title="Two solutions for querying revenue and customer data: a chat bot and a graphical user interface" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Two solutions for querying revenue and customer data: a chat bot and a graphical user interface</p></figcaption> </figure> <p>The decision between alarm clock and window-knocking machine is much less clear-cut in this example and depends a lot on the intended usage. Natural language questions can be much more intuitive for non-experts, but they probably won’t replace the need for structured data as a source of truth that analysts can work with directly. If this is too inefficient, the answer isn’t to abstract it away behind a conversational interface – it indicates that the existing interface needs to be better.</p> <p>I believe a common misconception about professional tools is that providing a good user experience and making things “simple” requires <a href="https://speakerdeck.com/inesmontani/let-them-write-code-keynote-pycon-india-2019?slide=56">abstracting away</a> as many layers as possible. That’s how we end up with “one click” or “one line of code” solutions that sound great in theory, but have users hit a wall as soon as they want to do things the developers had not considered or intended. Just because a user is “non-technical” (whatever this means), it doesn’t mean they’re unable or unwilling to use complex professional products – it’s just that those products need to be designed well and get the job done efficiently.</p> <p>The latest AI technologies have a lot of potential to make humans more productive – but just like with past innovations, the way they’ll translate into products and solutions will likely be very different from our limited imagination of human-shaped tasks. We’re currently seeing a lot of window-knocking machines being built, but only the alarm clocks will remain.</p><![CDATA[Making beautiful slides for your talks, part 2: All about aesthetics]]>https://ines.io/blog/beautiful-slides-talks-part-2-aestheticshttps://ines.io/blog/beautiful-slides-talks-part-2-aestheticsSat, 22 Jun 2024 00:00:00 GMT<p>After I published my <a href="/blog/beginners-guide-beautiful-slides-talks">beginner’s guide to making beautiful slides for your talks</a>, I got a lot of great feedback and I especially loved that others had already used it for their talks – some of which I even got to see in person! So in this post, I want to showcase two examples from the community, as well as my most recent talk, and dive deeper into the aesthetics and slide design process. Thanks to <a href="https://t-redactyl.io/">Jodie</a> and <a href="https://vickiboykis.com/">Vicki</a> for participating!</p> <p>🎨 <strong>Part 1:</strong> <a href="/blog/beginners-guide-beautiful-slides-talks">Design tips for beginners</a> ✨ <strong>Part 2: All about aesthetics</strong> 🛠️ <strong>Part 3:</strong> <a href="/blog/beautiful-slides-talks-part-3-technical-content">Technical content</a> 🧩 <strong>Part 4:</strong> <a href="/blog/beautiful-slides-talks-part-4-design-elements">Design elements</a> 💌 <strong>Part 5:</strong> <a href="/blog/beautiful-slides-talks-part-5-sharing-presentations">Sharing your presentations</a></p> <p><em><strong>Disclaimer</strong> (since my <a href="/blog/beginners-guide-beautiful-slides-talks">previous post</a> also got widely shared outside of my circles): This blog post series is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p> <hr> <h2>Jodie Burchell: “Mirror, mirror: LLMs and the illusion of humanity” (PyCon Italy keynote)</h2> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/95b06b9b59d990d931522d93ffb2bc08/e3932/slides_aesthetics-jodie.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAAB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAQaZ9A7I/8QAGRABAQEAAwAAAAAAAAAAAAAAAgMBABMi/9oACAEBAAEFAsfnrdtckNPJ0QN3rp//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwEn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHBAAAgICAwAAAAAAAAAAAAAAAhEAARASIjJx/9oACAEBAAY/Aus2EXESG/ccbUZW5//EABwQAAMAAQUAAAAAAAAAAAAAAAABESExQVFhcf/aAAgBAQABPyGaJI5p2LH1FTlLIxvJ2DxDNUkP/9oADAMBAAIAAwAAABCX7//EABcRAQADAAAAAAAAAAAAAAAAAAEAESH/2gAIAQMBAT8QF4Skyf/EABYRAQEBAAAAAAAAAAAAAAAAACEAEf/aAAgBAgEBPxDEm//EABwQAQEBAQACAwAAAAAAAAAAAAERIQAxQYGhsf/aAAgBAQABPxA0iCIPC764KIhAoYSfXX4widDnl7DLs4Mellv06XRAYGfHf//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/95b06b9b59d990d931522d93ffb2bc08/55fac/slides_aesthetics-jodie.webp 198w, /static/95b06b9b59d990d931522d93ffb2bc08/5b4d3/slides_aesthetics-jodie.webp 395w, /static/95b06b9b59d990d931522d93ffb2bc08/848e4/slides_aesthetics-jodie.webp 790w, /static/95b06b9b59d990d931522d93ffb2bc08/8d239/slides_aesthetics-jodie.webp 1185w, /static/95b06b9b59d990d931522d93ffb2bc08/8717d/slides_aesthetics-jodie.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/95b06b9b59d990d931522d93ffb2bc08/9db10/slides_aesthetics-jodie.jpg 198w, /static/95b06b9b59d990d931522d93ffb2bc08/16a07/slides_aesthetics-jodie.jpg 395w, /static/95b06b9b59d990d931522d93ffb2bc08/d27a6/slides_aesthetics-jodie.jpg 790w, /static/95b06b9b59d990d931522d93ffb2bc08/0b93b/slides_aesthetics-jodie.jpg 1185w, /static/95b06b9b59d990d931522d93ffb2bc08/e3932/slides_aesthetics-jodie.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/95b06b9b59d990d931522d93ffb2bc08/d27a6/slides_aesthetics-jodie.jpg" alt="Screenshots from the talk slides" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>✨ <strong>Aesthetic</strong></span></td> <td>cyberpunk / neon / retro futuristic</td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#110A36"></span> dark navy blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#FF41FF"></span> bubblegum pink, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#72FDFF"></span> electric blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#D883FF"></span> light violet, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#0096FF"></span> dodger blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#fff"></span> white</td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://fonts.google.com/specimen/Audiowide">Audiowide</a> (title slides), <a href="https://fonts.google.com/specimen/Michroma">Michroma</a> (titles), <a href="https://fonts.google.com/specimen/Rajdhani">Rajdhani</a> (body), <a href="https://www.jetbrains.com/lp/mono/">JetBrains Mono</a> (code), <a href="https://fonts.google.com/specimen/Roboto">Roboto</a> (ChatGPT slide)</td> </tr> <tr> <td><span>🛠️ <strong>Tools</strong></span></td> <td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.pixelmator.com/pro/">Pixelmator Pro</a>, <a href="https://support.apple.com/guide/digital-color-meter/welcome/mac">Digital Colour Meter</a></td> </tr> </tbody> </table> <blockquote> <p>“Due to my talk topic, I already had a “sci-fi” kind of theme in mind. Following Ines’ advice, I trawled through Google Fonts, looking for something that looked kind of retro but futuristic, and Audiowide jumped out at me. However, as this font is very distinctive and heavy I knew I’d need to use it sparingly. To get my title and body fonts, I just googled for fonts that go with Audiowide, and after a bit of trial and error settled on Michroma and Rajdhani. As I’m not great at design, I tend to google for ideas like this a lot - there are many people who have generously offered up their expertise, and you can use this to really polish your own designs.</p> <p>To fit with the talk title, I started looking for “futuristic” images that involved a mirror, and fell in love with the one I used for my title slide. Once I had that, I just used Mac’s built-in Digital Color Meter to extract the different colors used in that photo, and voila! I had my color palette ready made from that!</p> <p>When working out how to put together the title slide, I found a <a href="https://www.youtube.com/watch?v=jlfLEUj3MC8">cool video</a> where someone showed how to make a neon effect just using the built-in tools in Keynote. I messed around with this until I was happy with the result, and ended up using this quite heavily throughout the presentation. I think this additional detail (although it took ages to do!) really helped underscore the cyberpunk theme I was going for, and popped really nicely on the dark background!”</p> </blockquote> <p><link-button href="https://github.com/t-redactyl/mirror-mirror/blob/main/talk-materials/mirror-mirror-slides.pdf" icon="text">Slides</link-button></p> <hr> <h2>Vicki Boykis: “Closer to the Metal” (PyCon Italy keynote)</h2> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/a1108a8cb2d86ed93a276cbbb64e1acd/e3932/slides_aesthetics-vicki.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAAF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAULxWy60ST//xAAaEAEBAAIDAAAAAAAAAAAAAAABAgASISQx/9oACAEBAAEFAod5WWJ8OJk6gs5//8QAFhEBAQEAAAAAAAAAAAAAAAAAIQIQ/9oACAEDAQE/AaHP/8QAFxEBAAMAAAAAAAAAAAAAAAAAARARIf/aAAgBAgEBPwEbyP/EABsQAAMAAwEBAAAAAAAAAAAAAAABAhEhYTFR/9oACAEBAAY/AnNPS+EtU+HuTXCWYR//xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhQWEx4f/aAAgBAQABPyEabyrARoYWmYe3TE6GIINYl76wy2j5P//aAAwDAQACAAMAAAAQcx//xAAWEQEBAQAAAAAAAAAAAAAAAAAAESH/2gAIAQMBAT8QwJX/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQIBAT8QZ4hv/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARMSFxUf/aAAgBAQABPxC7gVjqrvA21gDXq3pXfuSoAL0WdWKMIezg8QRQZJ4tboXZ/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/a1108a8cb2d86ed93a276cbbb64e1acd/55fac/slides_aesthetics-vicki.webp 198w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/5b4d3/slides_aesthetics-vicki.webp 395w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/848e4/slides_aesthetics-vicki.webp 790w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/8d239/slides_aesthetics-vicki.webp 1185w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/8717d/slides_aesthetics-vicki.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/a1108a8cb2d86ed93a276cbbb64e1acd/9db10/slides_aesthetics-vicki.jpg 198w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/16a07/slides_aesthetics-vicki.jpg 395w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/d27a6/slides_aesthetics-vicki.jpg 790w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/0b93b/slides_aesthetics-vicki.jpg 1185w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/e3932/slides_aesthetics-vicki.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/a1108a8cb2d86ed93a276cbbb64e1acd/d27a6/slides_aesthetics-vicki.jpg" alt="Screenshots from the talk slides" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>✨ <strong>Aesthetic</strong></span></td> <td>minimalist / robotic / pixel / classical art / renaissance</td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#4C84E9"></span> blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#FEAB3E"></span> orange, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#0097A7"></span> turqoise, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#EEFF41"></span> green-yellow, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#000"></span> black, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#fff"></span> white</td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://fonts.google.com/specimen/Jersey+25">Jersey 25</a> (titles), <a href="https://fonts.google.com/specimen/Jersey+15">Jersey 15</a> (titles), <a href="https://fonts.google.com/specimen/Roboto">Roboto</a> (body)</td> </tr> <tr> <td><span>🛠️ <strong>Tools</strong></span></td> <td><a href="https://www.google.com/slides/about/">Google Slides</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a></td> </tr> </tbody> </table> <blockquote> <p>“My general aesthetic is to keep the slide design process as minimal as possible because I’m not much of a designer and I don’t want people to know :D.</p> <p>But my overall approaches in any content I produce are to use real human art. I’m not sure when I started doing this, but adding some art to technology content always feels balanced to me: we are not just sitting here writing classes and configuration files and worrying about scaling strategies. Even as technologists we are part of the tradition of makers and creators in humanity and I always want to tie my content back to that. Also I just really like looking at paintings and artwork. I knew that I’d especially be using Renaissance and other related artwork for a talk given in Florence.</p> <p>At the same time, this was also a talk about LLMs, very deep technical dives into codebases, machine learning, and statistics. Hence the combination of the robotic-style fonts with the artwork and code and math displayed in monospaced/scientific fonts for clarity.</p> <p>Finally, I want people to come to my talks to feel entertained. We are here doing serious things, but if we take ourselves too seriously, it takes all the joy and fun out of tech. We’re here to build stuff, break stuff, learn together, and laugh afterwards. That’s why a lot of my slides feel like meme templates, and also why I picked the title slide art as an image from a US public service poster from World War 2 and played with the effects using Photoshop Actions.”</p> </blockquote> <p><link-button href="https://docs.google.com/presentation/d/1PL6xG0F5FuPSeudAELCXLgDnPaBGvSmtDod4gaaIRRE/edit#slide=id.p" icon="text">Slides</link-button> <link-button href="https://vickiboykis.com/2024/05/20/dont-worry-about-llms/" icon="text">Blog post</link-button></p> <hr> <h2>Ines Montani: “Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation”</h2> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/cb6e0308c9901b4b6c043894820c7d39/e3932/slides_aesthetics-ines.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAACAQP/2gAMAwEAAhADEAAAAdAS3RqSKf/EABoQAAEFAQAAAAAAAAAAAAAAAAEAAgMQMRH/2gAIAQEAAQUC22DkgR3/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwFH/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEQAjH/2gAIAQEABj8C6KaFP//EABgQAQEBAQEAAAAAAAAAAAAAAAEAESEx/9oACAEBAAE/IcFwOQD6uawLDNhhOFf/2gAMAwEAAgADAAAAECsv/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERIXH/2gAIAQMBAT8QtvBSP//EABcRAAMBAAAAAAAAAAAAAAAAAAABMRH/2gAIAQIBAT8Q2ih//8QAHBABAAMAAgMAAAAAAAAAAAAAAQARITFBUaHR/9oACAEBAAE/EA2kOhqfIqzZSAu5UeM2XApIancJQbh7mWeZ/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/cb6e0308c9901b4b6c043894820c7d39/55fac/slides_aesthetics-ines.webp 198w, /static/cb6e0308c9901b4b6c043894820c7d39/5b4d3/slides_aesthetics-ines.webp 395w, /static/cb6e0308c9901b4b6c043894820c7d39/848e4/slides_aesthetics-ines.webp 790w, /static/cb6e0308c9901b4b6c043894820c7d39/8d239/slides_aesthetics-ines.webp 1185w, /static/cb6e0308c9901b4b6c043894820c7d39/8717d/slides_aesthetics-ines.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/cb6e0308c9901b4b6c043894820c7d39/9db10/slides_aesthetics-ines.jpg 198w, /static/cb6e0308c9901b4b6c043894820c7d39/16a07/slides_aesthetics-ines.jpg 395w, /static/cb6e0308c9901b4b6c043894820c7d39/d27a6/slides_aesthetics-ines.jpg 790w, /static/cb6e0308c9901b4b6c043894820c7d39/0b93b/slides_aesthetics-ines.jpg 1185w, /static/cb6e0308c9901b4b6c043894820c7d39/e3932/slides_aesthetics-ines.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/cb6e0308c9901b4b6c043894820c7d39/d27a6/slides_aesthetics-ines.jpg" alt="Screenshots from the talk slides" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>✨ <strong>Aesthetic</strong></span></td> <td>iridescent / bubbly / chrome / gradient / Y2K</td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#DAAFF4"></span> lavender purple, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#A0B5F8"></span> light blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#EEB4F0"></span> pastel pink, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#FAEFAF"></span> light yellow-orange, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#180B28"></span> purple off-black, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#fff"></span> white</td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://creativemarket.com/SamParrett/11022092-Wubble-SVG-Font-Letterset">Wubble</a> (title accents), <a href="https://fonts.google.com/specimen/Poppins">Poppins</a> Extra Bold (titles), <a href="https://klim.co.nz/retail-fonts/calibre/">Calibre</a> (body), <a href="https://www.jetbrains.com/lp/mono/">JetBrains Mono</a> (code)</td> </tr> <tr> <td><span>🛠️ <strong>Tools</strong></span></td> <td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a></td> </tr> </tbody> </table> <blockquote> <p>“I’ve always wanted to create a modern take on a Y2K-inspired aesthetic and was looking for an opportunity to use that bubbly font, which is too much for full texts, but works nicely as an accent. It all came together when I found a set of iridescent chrome shapes, including cubes, blobs, rings and spheres, which felt like a good way to illustrate different types of NLP models. The concept of distilling large general-purpose models into smaller components is fairly abstract and I figured it’d help to introduce different shapes that I could keep referencing throughout the talk.</p> <p>The subtly grainy background gradient uses similar colors and adds some life to slides that are otherwise very empty, with an opaque white background or shadows to keep text readable. To separate external references, like my work in the intro and the example case studies, I used a design with a dark background instead. I had a lot of fun making the slides and seeing those bubbly shapes made me happy every time, which was great for staying motivated, and finish writing and putting together the content.”</p> </blockquote> <p><link-button href="https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation" icon="text">Slides</link-button> <link-button href="https://explosion.ai/blog/human-in-the-loop-distillation" icon="text">Blog post</link-button></p> <hr> <h2>Picking an aesthetic</h2> <p>I guess you could call my approach to making slides very aesthetics-driven. It’s not for everyone, but it works well for the types of talks I do, and it helps bring some life into technical topics and higher-level strategic concepts that are otherwise pretty dry and abstract. I like the element of surprise it adds, and maybe it can even make someone’s conference day a little bit less draining and exhausting. There’s something about us as humans that makes us enjoy themed experiences – it’s probably the same reason we like theme parks or other types of “immersive” escapism.</p> <p>Your visual aesthetic is a great opportunity to sprinkle in a little bit of your personality, which you don’t always get to do in tech. If you’re going all-in on an idea, I’d recommend making sure it’s something that the audience will likely get or that still conveys a more general, recognizable theme. For example, you can reference your favorite obscure video game if it’s still recognizable as a video game aesthetic or hell, even Taylor Swift album art if it still reads as <a href="https://en.wikipedia.org/wiki/Midnights">minimalist Helvetica</a> or <a href="https://en.wikipedia.org/wiki/Reputation_(album)">grunge newspaper clippings</a>. There’s obviously somewhat of a bias towards nerdy retro vibes at tech conferences, which you can totally lean into if you like.</p> <p>Another source of inspiration is the topic or venue of your talk. Deep tech topics like AI can be tricky to illustrate if you take them too literally (and you probably want to avoid all that generic ”<a href="/blog/wired-brain-ai-powered-future/">glowing brain</a>” imagery – Jodie solved this well by going for a more Blade-Runner-esque retro futuristic theme). You can also take it one step further. Maybe your talk uses practical examples from an industry associated with a certain visual style – like newspaper or magazine design for media, or <a href="https://creativemarket.com/search/x-ray-effect?categoryIDs=0">X-ray effects</a> for the medical field. In Vicki’s keynote, she used the historic <a href="https://en.wikipedia.org/wiki/House_of_Medici">House of Medici</a> of Florence (where the conference was held) as inspiration for a fictional “Medici Corp” who are exploring the use of AI and LLMs. This established a great storyline for the talk and naturally suggested the use of historic paintings, reminiscent of the great <a href="https://www.amazon.de/-/en/Nicole-Tersigni/dp/1797202839">“Men to Avoid in Art and Life”</a> book. The bold pixel font provides a nice contrast and brings it back around to technology.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/ec4e1a68703b5690119bd6bcf75aaf2a/e3932/tools_arc-easels.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 45.95959595959596%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHaSlEUCP/EABkQAAEFAAAAAAAAAAAAAAAAAAEAEBExQf/aAAgBAQABBQLJKFB//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhAAAwAAAAAAAAAAAAAAAAAAACBB/9oACAEBAAY/Air/AP/EABwQAQACAQUAAAAAAAAAAAAAAAEAETEQIUGBkf/aAAgBAQABPyFs2j7BOB3LUvMydf/aAAwDAQACAAMAAAAQZP8A/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8QJ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQADAAMBAAAAAAAAAAAAAAEAESExQaGR/9oACAEBAAE/EHdQi4UY7SpoN8/IMGqaXfs9k6jzP//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/ec4e1a68703b5690119bd6bcf75aaf2a/55fac/tools_arc-easels.webp 198w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/5b4d3/tools_arc-easels.webp 395w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/848e4/tools_arc-easels.webp 790w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/8d239/tools_arc-easels.webp 1185w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/8717d/tools_arc-easels.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/ec4e1a68703b5690119bd6bcf75aaf2a/9db10/tools_arc-easels.jpg 198w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/16a07/tools_arc-easels.jpg 395w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/d27a6/tools_arc-easels.jpg 790w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/0b93b/tools_arc-easels.jpg 1185w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/e3932/tools_arc-easels.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/ec4e1a68703b5690119bd6bcf75aaf2a/d27a6/tools_arc-easels.jpg" alt="Easels in Arc: visual inspiration for my talks" title="Early version of a moodboard collecting inspiration for my talk" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Early version of a moodboard collecting inspiration for my talk</p></figcaption> </figure> <p>I recently wrote about my <a href="/blog/three-transformative-tools">favorite tools</a> and how I use the <a href="https://arc.net/gift/d36640d6">Arc</a> browser and its “Easels” feature to plan out my talks. It comes with a very smooth and intuitive interface for moodboards and lets you “capture” any content from the web while browsing. Of course, you can also do something similar in any other note-taking app – but I recommend collecting all inspiration and references visually and in a single place, as it makes it so much easier to write your talk once you’re ready. If looking at your moodboard gets you excited, you’re in the perfect mindset to smash out those slides and tick that talk off your todo list.</p> <hr> <h2>Statement slides</h2> <p>Adding “statement slides” throughout your talk is a great way to summarize the most important takeaways and break down your content. They’re especially useful in talks that function as opinion pieces or present strategic advice or lessons learned from solving a particular problem. Sometimes I even start with them when writing a new talk and first establish a through line with statement slides, then fill in the sections.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/a6497d14da4385232fd9f651b9298826/e3932/slides_aesthetics-statement.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUDBv/EABUBAQEAAAAAAAAAAAAAAAAAAAEA/9oADAMBAAIQAxAAAAFpNuhPdAn/xAAbEAEAAgIDAAAAAAAAAAAAAAACAQQAAxETIf/aAAgBAQABBQKEcPMt1tzQmeqt7Vz/xAAVEQEBAAAAAAAAAAAAAAAAAAARAP/aAAgBAwEBPwEJv//EABYRAQEBAAAAAAAAAAAAAAAAAAARAf/aAAgBAgEBPwGJj//EAB4QAAICAAcAAAAAAAAAAAAAAAECABEDEBIhImGR/9oACAEBAAY/AiwxG8mviwYbXCy1R7jRby//xAAaEAEBAQEBAQEAAAAAAAAAAAABEQAxIVGx/9oACAEBAAE/IUMZV78whShWLPHfAidzdjwxJ17+4AIE3//aAAwDAQACAAMAAAAQXB//xAAXEQEBAQEAAAAAAAAAAAAAAAABABFB/9oACAEDAQE/EA5TsIv/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREx/9oACAECAQE/EIKaj//EABsQAAIDAQEBAAAAAAAAAAAAAAERACExQVFx/9oACAEBAAE/EBzhMOsfDHqsxsFA5Yz5HezMEwxqPbsABeQ5CLs7vsGgg8AU/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/a6497d14da4385232fd9f651b9298826/55fac/slides_aesthetics-statement.webp 198w, /static/a6497d14da4385232fd9f651b9298826/5b4d3/slides_aesthetics-statement.webp 395w, /static/a6497d14da4385232fd9f651b9298826/848e4/slides_aesthetics-statement.webp 790w, /static/a6497d14da4385232fd9f651b9298826/8d239/slides_aesthetics-statement.webp 1185w, /static/a6497d14da4385232fd9f651b9298826/8717d/slides_aesthetics-statement.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/a6497d14da4385232fd9f651b9298826/9db10/slides_aesthetics-statement.jpg 198w, /static/a6497d14da4385232fd9f651b9298826/16a07/slides_aesthetics-statement.jpg 395w, /static/a6497d14da4385232fd9f651b9298826/d27a6/slides_aesthetics-statement.jpg 790w, /static/a6497d14da4385232fd9f651b9298826/0b93b/slides_aesthetics-statement.jpg 1185w, /static/a6497d14da4385232fd9f651b9298826/e3932/slides_aesthetics-statement.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/a6497d14da4385232fd9f651b9298826/d27a6/slides_aesthetics-statement.jpg" alt="Examples of statement slides" title="Examples of statement slides from my talks (&lt;a href=&#39;https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;), Jodie (&lt;a href=&#39;https://github.com/t-redactyl/mirror-mirror/blob/main/talk-materials/mirror-mirror-slides.pdf&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;) and Vicki (&lt;a href=&#39;https://docs.google.com/presentation/d/1PL6xG0F5FuPSeudAELCXLgDnPaBGvSmtDod4gaaIRRE/edit#slide=id.p&#39; target=&#39;_blank&#39;&gt;#4&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of statement slides from my talks (<a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#2</a>), Jodie (<a href='https://github.com/t-redactyl/mirror-mirror/blob/main/talk-materials/mirror-mirror-slides.pdf' target='_blank'>#3</a>) and Vicki (<a href='https://docs.google.com/presentation/d/1PL6xG0F5FuPSeudAELCXLgDnPaBGvSmtDod4gaaIRRE/edit#slide=id.p' target='_blank'>#4</a>)</p></figcaption> </figure> <p>Your statement slides can contain as little as a word or single, punchy sentence in a large font, or short bullet points or speech bubbles for compact summaries. This also means they’re more likely to turn out okay in pictures if listeners want to snap a quick photo as a reminder, even if the conference uses a lower-resolution projector or unideal lighting. (Pro tip: If you’re new to speaking, a well-presented statement slide also increases the likelihood of someone sharing photos from your talk on social media!)</p> <hr> <h2>Closing slide</h2> <p>This one is pretty standard and should be the last slide of your presentation. Here, you can thank your audience and include further links and your social profiles. I typically choose a design similar to the title slide, which makes for a nice visual closure.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/1d137502344d23c84c11f946c9151790/e3932/slides_aesthetics-final.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 27.77777777777778%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMB/8QAFgEBAQEAAAAAAAAAAAAAAAAABAID/9oADAMBAAIQAxAAAAGWjpoMif/EABgQAAIDAAAAAAAAAAAAAAAAAAABAhEh/9oACAEBAAEFAkyVow//xAAWEQADAAAAAAAAAAAAAAAAAAADEDH/2gAIAQMBAT8BNF//xAAVEQEBAAAAAAAAAAAAAAAAAAADEP/aAAgBAgEBPwFZ/8QAGBAAAgMAAAAAAAAAAAAAAAAAABEiMaH/2gAIAQEABj8CSI6Uf//EABoQAQEAAgMAAAAAAAAAAAAAAAERACExQWH/2gAIAQEAAT8hEkke81iOPWDBds//2gAMAwEAAgADAAAAEIf/AP/EABoRAAEFAQAAAAAAAAAAAAAAAAABITFRccH/2gAIAQMBAT8Qg3ijUf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAIVH/2gAIAQIBAT8QSIFvb//EABkQAQEBAQEBAAAAAAAAAAAAAAERACExkf/aAAgBAQABPxAhXE4KYKsgPFblhgqXr93/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/1d137502344d23c84c11f946c9151790/55fac/slides_aesthetics-final.webp 198w, /static/1d137502344d23c84c11f946c9151790/5b4d3/slides_aesthetics-final.webp 395w, /static/1d137502344d23c84c11f946c9151790/848e4/slides_aesthetics-final.webp 790w, /static/1d137502344d23c84c11f946c9151790/8d239/slides_aesthetics-final.webp 1185w, /static/1d137502344d23c84c11f946c9151790/8717d/slides_aesthetics-final.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/1d137502344d23c84c11f946c9151790/9db10/slides_aesthetics-final.jpg 198w, /static/1d137502344d23c84c11f946c9151790/16a07/slides_aesthetics-final.jpg 395w, /static/1d137502344d23c84c11f946c9151790/d27a6/slides_aesthetics-final.jpg 790w, /static/1d137502344d23c84c11f946c9151790/0b93b/slides_aesthetics-final.jpg 1185w, /static/1d137502344d23c84c11f946c9151790/e3932/slides_aesthetics-final.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/1d137502344d23c84c11f946c9151790/d27a6/slides_aesthetics-final.jpg" alt="Examples of closing slides" title="Examples of closing slides from my talks (&lt;a href=&#39;https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of closing slides from my talks (<a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data' target='_blank'>#2</a>)</p></figcaption> </figure> <p>For <a href="https://linkedin.com/in/inesmontani">my LinkedIn</a>, I like to include a QR code so people can connect instantly. You can download yours by <a href="https://www.linkedin.com/help/linkedin/answer/a525286/using-a-linkedin-qr-code-to-connect-with-members">clicking the button</a> in the search bar on the mobile app and saving the image. Alternatively, you can also use a QR code pointing to additional resources, like a GitHub repo, although I’d recommend keeping it to one or two codes max so your slide doesn’t feel overwhelming. Also make sure that the code isn’t too small, so it can still be scanned from the back of the room.</p> <p><a href="https://www.qrcode-monkey.com/">This generator</a> makes it easy to create your own QR code and even customize its style to fit your slide design. You can also experiment with <a href="https://huggingface.co/spaces/huggingface-projects/QR-code-AI-art-generator">this generator</a>, which uses a stable diffusion model (thanks to <a href="https://twitter.com/summerscope">Laura</a> for the tip, you can see it in action in her also well-designed talk <a href="https://youtu.be/n88ZmqsTKig?si=Jeg9MmhfTgOjHrzN&#x26;t=1660">here</a>).</p> <p>If your talk is followed by a Q&#x26;A session, conferences will often leave your final slide on, which gives people in the audience time to check out your links, scan QR codes and connect with you on social media.</p> <hr> <p>If you want to go for an aesthetics-based approach, there are very few limits. If you’re worried about your slides becoming too gimmicky, start small and subtle – like with a themed font or illustration style for content you were planning to include anyway (see my <a href="/blog/beginners-guide-beautiful-slides-talks">previous post</a> for tips). Make it a habit to collect inspiration and any visuals you like, even outside of your work and conference talks – often, the best inspiration comes from everyday life and when you least expect it.</p> <p><link-button href="/blog/beautiful-slides-talks-part-3-technical-content/" icon="right">Part 3: Technical content</link-button></p><![CDATA[Three transformative tools: a review of my favourite apps]]>https://ines.io/blog/three-transformative-toolshttps://ines.io/blog/three-transformative-toolsSun, 09 Jun 2024 00:00:00 GMT<p>There’s this feeling of joy and excitement you sometimes get when you start using a new tool, discover the little details that make a product great and feel the rush of motivation and new ideas that comes with it. It’s what I’ve always aspired to do with <a href="https://explosion.ai/software">our products</a>, too, and it’s what motivated this blog post. I use many tools in my day-to-day life and work, but these three have had the biggest impact recently.</p> <hr> <h2>Arc: Reinventing the browser</h2> <p>It’s a bold move to just go and reinvent something as fundamental as the web browser. But that’s exactly what NYC’s <a href="https://thebrowser.company/">The Browser Company</a> are doing with <a href="https://arc.net/gift/d36640d6">Arc</a>, and the result is pretty stunning and a breath of fresh air in the otherwise quite boring and cookie-cutter browser landscape.</p> <p>I’ve switched browsers a couple of times in my life: Internet Explorer because there weren’t many options, then Firefox when it was new and cool, over to Chrome, which felt much fresher and snappier at the time, then back to <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a> for better speed and privacy. And now I’m using Arc, which is based on <a href="https://www.chromium.org/">Chromium</a> under the hood.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/37ad97c646e9add90b8ab7df95ed75f9/e3932/tools_arc-spaces.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 58.080808080808076%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe3c0YD/xAAYEAEBAAMAAAAAAAAAAAAAAAABABARIf/aAAgBAQABBQIyT0DV/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAERIP/aAAgBAQAGPwJYhEf/xAAYEAEBAQEBAAAAAAAAAAAAAAABABExQf/aAAgBAQABPyHU2MzuwMIDLjAfC//aAAwDAQACAAMAAAAQoB//xAAWEQEBAQAAAAAAAAAAAAAAAAAAAWH/2gAIAQMBAT8QXH//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEBAQEBAQAAAAAAAAAAAAABEQAxQVH/2gAIAQEAAT8QLOodyRRED2YIRH6uUiVPbjBoRMBCDhv/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/37ad97c646e9add90b8ab7df95ed75f9/55fac/tools_arc-spaces.webp 198w, /static/37ad97c646e9add90b8ab7df95ed75f9/5b4d3/tools_arc-spaces.webp 395w, /static/37ad97c646e9add90b8ab7df95ed75f9/848e4/tools_arc-spaces.webp 790w, /static/37ad97c646e9add90b8ab7df95ed75f9/8d239/tools_arc-spaces.webp 1185w, /static/37ad97c646e9add90b8ab7df95ed75f9/8717d/tools_arc-spaces.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/37ad97c646e9add90b8ab7df95ed75f9/9db10/tools_arc-spaces.jpg 198w, /static/37ad97c646e9add90b8ab7df95ed75f9/16a07/tools_arc-spaces.jpg 395w, /static/37ad97c646e9add90b8ab7df95ed75f9/d27a6/tools_arc-spaces.jpg 790w, /static/37ad97c646e9add90b8ab7df95ed75f9/0b93b/tools_arc-spaces.jpg 1185w, /static/37ad97c646e9add90b8ab7df95ed75f9/e3932/tools_arc-spaces.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/37ad97c646e9add90b8ab7df95ed75f9/d27a6/tools_arc-spaces.jpg" alt="My spaces setup in Arc: pinned global tabs for socials and spaces for personal, work, random browsing and talks with pinned space tabs organised in folders" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>The concept of tab containers and separate spaces or profiles isn’t new, but Arc implements it very well, with nice visual customisations to tell your spaces apart, keyboard shortcuts to switch between them and per-space bookmarks pinned to the sidebar.</p> <p>Which leads me to the elephant in the room and the main difference you’ll notice immediately, compared to conventional browser designs: the sidebar. It’s definitely the one feature that took me the longest to get used to, but it makes a lot of sense conceptually as a more natural way to organise tabs and bookmarks. It can be toggled using keyboard shortcuts, giving you a clean, fullscreen experience of the web. Clicking links with <code>shift</code> lets you peek before opening a new tab (nice little detail: the visual indicator of open peeks in the sidebar!), and split mode lets you view multiple tabs side-by-side.</p> <p>”<a href="https://resources.arc.net/hc/en-us/articles/19235387524503-Little-Arc-Quick-Lookups-Instant-Triaging">Little Arc</a>” is a simple browser window for opening links from other applications, which you can optionally move to the main browser. It’s a smart solution to the otherwise almost inevitable “tab hell” where important work pages mix freely with that one meme someone sent you two weeks ago.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/ec4e1a68703b5690119bd6bcf75aaf2a/e3932/tools_arc-easels.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 45.95959595959596%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHaSlEUCP/EABkQAAEFAAAAAAAAAAAAAAAAAAEAEBExQf/aAAgBAQABBQLJKFB//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhAAAwAAAAAAAAAAAAAAAAAAACBB/9oACAEBAAY/Air/AP/EABwQAQACAQUAAAAAAAAAAAAAAAEAETEQIUGBkf/aAAgBAQABPyFs2j7BOB3LUvMydf/aAAwDAQACAAMAAAAQZP8A/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8QJ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQADAAMBAAAAAAAAAAAAAAEAESExQaGR/9oACAEBAAE/EHdQi4UY7SpoN8/IMGqaXfs9k6jzP//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/ec4e1a68703b5690119bd6bcf75aaf2a/55fac/tools_arc-easels.webp 198w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/5b4d3/tools_arc-easels.webp 395w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/848e4/tools_arc-easels.webp 790w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/8d239/tools_arc-easels.webp 1185w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/8717d/tools_arc-easels.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/ec4e1a68703b5690119bd6bcf75aaf2a/9db10/tools_arc-easels.jpg 198w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/16a07/tools_arc-easels.jpg 395w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/d27a6/tools_arc-easels.jpg 790w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/0b93b/tools_arc-easels.jpg 1185w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/e3932/tools_arc-easels.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/ec4e1a68703b5690119bd6bcf75aaf2a/d27a6/tools_arc-easels.jpg" alt="Easels in Arc: visual inspiration for my talks" title="My Easels collecting inspiration for my talks" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>My Easels collecting inspiration for my talks</p></figcaption> </figure> <p>Do we need <em>even more</em> note-taking tools? Arguably not, but when it’s about capturing content from the web, we might as well do it in the browser. ”<a href="https://resources.arc.net/hc/en-us/articles/19231142050071-Easels-Capture-Create">Easels</a>” are essentially whiteboards that you can write and draw on, and use to collect links and images. It’s only tangentially related to web browsing, but Arc just casually gives you one of the smoothest user interfaces for organising content: it <em>just works</em>, aligns and looks good out-of-the-box. This feature is what first got me interested in Arc and I started using it for planning my <a href="/blog/beginners-guide-beautiful-slides-talks/">talks and slides</a> and for collecting moodboard-style visual inspiration and resources.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/dbc0bf17fbecfd068990870880d2bb8a/e3932/tools_arc-custom.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 57.57575757575757%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAECAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB1rU4ZiLP/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEREiH/2gAIAQEAAQUCvRGVRH//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwFn/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BJ//EABYQAQEBAAAAAAAAAAAAAAAAAEEgMf/aAAgBAQAGPwLVr//EABcQAQEBAQAAAAAAAAAAAAAAAAEAETH/2gAIAQEAAT8hVnAcM5PSy1Jc3//aAAwDAQACAAMAAAAQ/M//xAAWEQADAAAAAAAAAAAAAAAAAAAQITH/2gAIAQMBAT8QpD//xAAWEQEBAQAAAAAAAAAAAAAAAAABERD/2gAIAQIBAT8QLI5//8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFhcZH/2gAIAQEAAT8QEF1QXJuHcWi8z6MENqt7TT1MtV9nP7P/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/dbc0bf17fbecfd068990870880d2bb8a/55fac/tools_arc-custom.webp 198w, /static/dbc0bf17fbecfd068990870880d2bb8a/5b4d3/tools_arc-custom.webp 395w, /static/dbc0bf17fbecfd068990870880d2bb8a/848e4/tools_arc-custom.webp 790w, /static/dbc0bf17fbecfd068990870880d2bb8a/8d239/tools_arc-custom.webp 1185w, /static/dbc0bf17fbecfd068990870880d2bb8a/8717d/tools_arc-custom.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/dbc0bf17fbecfd068990870880d2bb8a/9db10/tools_arc-custom.jpg 198w, /static/dbc0bf17fbecfd068990870880d2bb8a/16a07/tools_arc-custom.jpg 395w, /static/dbc0bf17fbecfd068990870880d2bb8a/d27a6/tools_arc-custom.jpg 790w, /static/dbc0bf17fbecfd068990870880d2bb8a/0b93b/tools_arc-custom.jpg 1185w, /static/dbc0bf17fbecfd068990870880d2bb8a/e3932/tools_arc-custom.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/dbc0bf17fbecfd068990870880d2bb8a/d27a6/tools_arc-custom.jpg" alt="UI customization in Arc" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>If you know me, you know I’m a sucker for excessive UI and design customisations (which is also why tools I build tend to have <a href="https://prodi.gy/docs/api-web-app#themes">a lot of it</a>). It just makes me happy to adjust the look and feel of my apps. Does a browser sidebar <em>need</em> multi-colour gradient backgrounds with adjustable levels of grain effect? Probably not, but Arc just has it and it looks great.</p> <p>There are many browser extensions (e.g. <a href="https://en.wikipedia.org/wiki/Greasemonkey">Greasemonkey</a>) for changing the look of websites, either for fun or to fix accessibility issues and improve readability, or to get rid of annoying content, non-blockable ads and other elements that websites added because it’s good for “engagement” or whatever. Arc’s version of this is called ”<a href="https://arc.net/boosts">Boosts</a>” and ships out-of-the-box with an intuitive visual interface. You can adjust colours, contrast, fonts and zoom levels on a per-website basis, “zap” elements to hide them, and even add fully custom CSS and JavaScript. Now that it’s so easy, I definitely want to use it more.</p> <p>In general, there are many features that Arc confidently takes out of the extension space and into the core application. It increases the scope of what a browser can and wants to do, but it makes for a consistent user experience with the same attention to detail across all parts of the app. The opt-in AI features, called ”<a href="https://arc.net/max">Max</a>”, are tasteful and include some nice and practical ideas, including summarisation, in-page question answering and automated tab tidying, plus a shortcut for ChatGPT in your command bar. The <a href="https://resources.arc.net/hc/en-us/articles/19228534606743-Share-Spaces-Folders-Splits-with-Anyone#sharequote">quote sharing</a> feature feels very useful, too: if you highlight text on a website, you can auto-generate a sharable link that points right to the highlight. I also love Arc’s visual identity, and the playfully designed release notes that double up as a kind of newsletter are a joy to read. I don’t think I’ve ever looked forward to updating my browser this much.</p> <p>A development philosophy we’ve set for ourselves <a href="https://speakerdeck.com/inesmontani/let-them-write-code-keynote-pycon-india-2019?slide=33">a couple of years ago</a> is “You can reinvent the wheel, but don’t reinvent the road.” What this means is: it’s okay reimagine something that already exists to make it better, but don’t lock users into your new end-to-end way of doing things. (One could argue that this is what Google is doing by controlling Chrome, search and navigation, and not-so-subtly forcing the web to adopt <a href="https://en.wikipedia.org/wiki/Accelerated_Mobile_Pages#Google_control">AMP</a>.) Arc sticks to reinventing the wheel and it’s refreshing.</p> <!-- _Disclaimer: We're currently working with the Arc team on some cool NLP stuff over at [Explosion](https://explosion.ai), but I had already adopted the browser before that. If you use my [referral link](https://arc.net/gift/d36640d6), I get fancy new [app icons](https://resources.arc.net/hc/en-us/articles/19335111735959-Share-Arc-with-Friends)._ --> <p><link-button href="https://arc.net/gift/d36640d6" icon="globe">Arc</link-button></p> <hr> <h2>Missive: Collaborative email</h2> <p>There are many tools that promise to help you get in control of your email, which can become overwhelming, especially once you add user and customer support to the mix. We did a bunch of research to find the best-suited collaborative email tool for <a href="https://explosion.ai">Explosion</a> and eventually ended up with <a href="https://missiveapp.com">Missive</a>, which integrates with Gmail and provides a web, desktop and mobile app. There’s something about tools built by small independent teams that we naturally seem to gravitate towards: you can just tell that somebody <em>cared</em>, and it’s reflected across the product and its user experience. Missive really was a game changer for me and I honestly couldn’t imagine my day-to-day work without it.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/3d2e007652130b9a9f007aa1e53880b6/fdb5a/tools_missive.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 58.080808080808076%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAezVymgf/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAEQEkH/2gAIAQEAAQUCdhQjT//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABoQAAICAwAAAAAAAAAAAAAAABAhAAERMYH/2gAIAQEABj8CV45Gdj//xAAaEAEBAQEAAwAAAAAAAAAAAAABEQAxEEGB/9oACAEBAAE/ITRMfWKdV9wzuM2ojx//2gAMAwEAAgADAAAAECfP/8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQMBAT8Qh//EABcRAQADAAAAAAAAAAAAAAAAAAEQESH/2gAIAQIBAT8QLcj/xAAdEAABBAIDAAAAAAAAAAAAAAABABEhMRBBYZHR/9oACAEBAAE/ECY4S9naBWtmXKCd4BccAAPEbX//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/3d2e007652130b9a9f007aa1e53880b6/55fac/tools_missive.webp 198w, /static/3d2e007652130b9a9f007aa1e53880b6/5b4d3/tools_missive.webp 395w, /static/3d2e007652130b9a9f007aa1e53880b6/848e4/tools_missive.webp 790w, /static/3d2e007652130b9a9f007aa1e53880b6/8d239/tools_missive.webp 1185w, /static/3d2e007652130b9a9f007aa1e53880b6/888d0/tools_missive.webp 1580w, /static/3d2e007652130b9a9f007aa1e53880b6/548e7/tools_missive.webp 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/3d2e007652130b9a9f007aa1e53880b6/9db10/tools_missive.jpg 198w, /static/3d2e007652130b9a9f007aa1e53880b6/16a07/tools_missive.jpg 395w, /static/3d2e007652130b9a9f007aa1e53880b6/d27a6/tools_missive.jpg 790w, /static/3d2e007652130b9a9f007aa1e53880b6/0b93b/tools_missive.jpg 1185w, /static/3d2e007652130b9a9f007aa1e53880b6/8f04a/tools_missive.jpg 1580w, /static/3d2e007652130b9a9f007aa1e53880b6/fdb5a/tools_missive.jpg 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/3d2e007652130b9a9f007aa1e53880b6/d27a6/tools_missive.jpg" alt="Overview of Missive app" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>At the core of Missive is a collaborative-first design: email threads can be shared with individual people or teams, <a href="https://missiveapp.com/help/assignment">assigned</a> to others and discussed inline. Team members are then able to collaborate on drafts, create todo-style <a href="https://missiveapp.com/help/missive-tips-and-tricks/how-to-use-tasks">tasks</a> within a thread and upload files. The chat history is preserved so you can always see the internal discussion that led up to a reply. This cuts out a huge amount of fragmented communication that would otherwise happen on Slack or elsewhere, and removes the need for email forwarding or disjointed inboxes.</p> <p>Need someone to find you a file to attach to an email? Assign them a task on the email thread and they can upload it right there. Want feedback on a draft reply? Share it with the team. A new purchase order comes in? Assign it to the operations team and move it out of your inbox. Got multiple emails related to the same conversation? Link or merge them into a single thread.</p> <p>Having good automation is probably the single most important trick for staying productive and efficient as a small team and we try to take advantage of it wherever we can. Different types of emails are automatically routed to different <a href="https://missiveapp.com/help/team-inboxes/overview">inboxes</a> and shared with different people, specific <a href="https://missiveapp.com/help/labels/overview">labels</a> can auto-snooze threads for a given period of time and <a href="https://missiveapp.com/help/responses/overview">canned responses</a> with variables make it easy to handle common questions and requests.</p> <p>When looking at tools to adopt, a <a href="https://missiveapp.com/help/api-documentation/overview">developer API</a> is always a big plus because we know that we can add our own automations if needed. For Missive, we built integrations to automatically stream in GitHub issues, discussion posts and <a href="https://support.prodi.gy">Prodigy forum</a> threads and also connected it to Typeform, e.g. for our <a href="https://explosion.ai/tailored-solutions">consulting application</a> form, making Missive the central hub for all communication.</p> <p><link-button href="https://missiveapp.com/?ref_id=E2930605B536" icon="globe">Missive</link-button></p> <hr> <h2>DayOne: More than just a diary</h2> <p>It might be the nerd in me, but I’m low-key obsessed with tracking various things I do. I take a lot of random photos, document how I feel, where I went, what I read, watched or listened to, and my <a href="https://ouraring.com/">Oura ring</a> logs my sleep phases, heart rate and body temperature day and night. Will I ever care about what podcast I listened to or what I had for dinner last Tuesday? Maybe? Maybe not? Aside from leaving an enormous digital footprint and possibly helping me establish an alibi should I ever need one, there’s little purpose to it. But hey, people say that journalling helps with general wellbeing and mindfulness, which is about as far as I’m willing to go in terms of <a href="/blog/i-fell-for-self-help-so-you-dont-have-to/">self-help</a>.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/a19594c4ba8eeaeeb0f198e114f84e0d/d58d1/tools_dayone.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 57.57575757575757%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB20thEGF//8QAGhAAAwEAAwAAAAAAAAAAAAAAAAECEQMSIf/aAAgBAQABBQLPSeSWs06oUSj/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAYEAACAwAAAAAAAAAAAAAAAAAQMQABIf/aAAgBAQAGPwJhnKn/xAAaEAADAQEBAQAAAAAAAAAAAAAAAREhMWHR/9oACAEBAAE/Ia6Zmx/TLVHHhHR5l+KrrP/aAAwDAQACAAMAAAAQXw//xAAVEQEBAAAAAAAAAAAAAAAAAAAREP/aAAgBAwEBPxAJ/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Qp//EAB0QAQACAgIDAAAAAAAAAAAAAAEAESExUWFxobH/2gAIAQEAAT8QSOdHr5LwLUvN8eY7zs0ik3sjoLrUA17Qw2B2PM//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/a19594c4ba8eeaeeb0f198e114f84e0d/55fac/tools_dayone.webp 198w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/5b4d3/tools_dayone.webp 395w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/848e4/tools_dayone.webp 790w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/8d239/tools_dayone.webp 1185w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/f3efb/tools_dayone.webp 1536w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/a19594c4ba8eeaeeb0f198e114f84e0d/9db10/tools_dayone.jpg 198w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/16a07/tools_dayone.jpg 395w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/d27a6/tools_dayone.jpg 790w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/0b93b/tools_dayone.jpg 1185w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/d58d1/tools_dayone.jpg 1536w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/a19594c4ba8eeaeeb0f198e114f84e0d/d27a6/tools_dayone.jpg" alt="Overview of DayOne" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>I’ve cycled through <em>so</em> many todo list and note taking apps in my life and occasionally dabbled in diary writing, but nothing ever stuck until I tried out <a href="https://dayoneapp.com">DayOne</a>. It’s marketed as a journalling and diary app for web, desktop and mobile, but I mainly use it as a daily planner, todo list and multi-media life log. My “daily check-in” <a href="https://dayoneapp.com/guides/tips-and-tutorials/templates/">template</a> includes sections for short-term and long-term tasks, a log for what I listened to, watched or read, bullet-point thoughts and photos (I try to add at least one a day, even if it’s just a <a href="/blog/raspberry-pi-python-cats/">cat</a> picture).</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/1e8870305f3c37d5ee263603b1e8e071/e3932/tools_dayone-map.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 38.888888888888886%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIE/8QAFAEBAAAAAAAAAAAAAAAAAAAAAv/aAAwDAQACEAMQAAABxSMSA//EABgQAAMBAQAAAAAAAAAAAAAAAAABAiES/9oACAEBAAEFAqeR0zT/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwEJ/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRAAAgMBAAAAAAAAAAAAAAAAAAEREiFB/9oACAEBAAY/Ap0bdjp//8QAGRAAAwEBAQAAAAAAAAAAAAAAAAERIVGB/9oACAEBAAE/IXLTwO2hOF2f/9oADAMBAAIAAwAAABCD7//EABYRAAMAAAAAAAAAAAAAAAAAABARIf/aAAgBAwEBPxCCH//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxBcJ//EABsQAQEAAQUAAAAAAAAAAAAAAAERACExQVFh/9oACAEBAAE/ELgajCrclydiavmFYdzy5//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/1e8870305f3c37d5ee263603b1e8e071/55fac/tools_dayone-map.webp 198w, /static/1e8870305f3c37d5ee263603b1e8e071/5b4d3/tools_dayone-map.webp 395w, /static/1e8870305f3c37d5ee263603b1e8e071/848e4/tools_dayone-map.webp 790w, /static/1e8870305f3c37d5ee263603b1e8e071/8d239/tools_dayone-map.webp 1185w, /static/1e8870305f3c37d5ee263603b1e8e071/8717d/tools_dayone-map.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/1e8870305f3c37d5ee263603b1e8e071/9db10/tools_dayone-map.jpg 198w, /static/1e8870305f3c37d5ee263603b1e8e071/16a07/tools_dayone-map.jpg 395w, /static/1e8870305f3c37d5ee263603b1e8e071/d27a6/tools_dayone-map.jpg 790w, /static/1e8870305f3c37d5ee263603b1e8e071/0b93b/tools_dayone-map.jpg 1185w, /static/1e8870305f3c37d5ee263603b1e8e071/e3932/tools_dayone-map.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/1e8870305f3c37d5ee263603b1e8e071/d27a6/tools_dayone-map.jpg" alt="Map view in DayOne" title="Map view of my journal" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Map view of my journal</p></figcaption> </figure> <p>Although the <a href="https://dayoneapp.com/guides/tips-and-tutorials/tagging-guide/">tagging</a> system is fairly basic, I’ve come up with my own hierarchy for everything from mood to various activities. DayOne also includes location data and I get a nice overview of places I’ve been. A second “meta” journal I’ve created gives me a place to store other lists that accumulated over the years, like the hundreds of concerts I’ve been to since 2004, which I started as a <a href="/blog/how-i-started-coding/">teenager</a> and meticulously updated on my Livejournal profile back in the day.</p> <p>I’m currently on a 750-day streak of daily updates and preparing my check-in has become a nice and consistent morning routine while I’m getting ready for the day and loading up on caffeine. Perhaps future me will thank me for it one day.</p> <p><link-button href="https://dayoneapp.com" icon="globe">DayOne</link-button></p><![CDATA[A beginner’s guide to making beautiful slides for your talks]]>https://ines.io/blog/beginners-guide-beautiful-slides-talkshttps://ines.io/blog/beginners-guide-beautiful-slides-talksSat, 17 Feb 2024 00:00:00 GMT<p>I’ve done quite a bit of conference <a href="/#talks">speaking</a> over the years, and I love designing <a href="https://speakerdeck.com/inesmontani">slides</a> and coming up with a new visual theme for each topic. It’s fun and keeps me motivated to put in the work and actually write my talks. People often ask me for tips and tooling recommendations, so in this guide, I’m sharing some of my not-so-secret secrets and <strong>three beginner-friendly steps</strong> for how you can up your slides game for the upcoming conference season!</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/94d2f7c43e4e2ffcb586a8245edc273a/33266/slides_styles.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.37373737373737%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgED/9oADAMBAAIQAxAAAAGtDQZAM//EABoQAAICAwAAAAAAAAAAAAAAAAACAwQREhP/2gAIAQEAAQUCSFVLD4j6an//xAAYEQACAwAAAAAAAAAAAAAAAAAAEQITIf/aAAgBAwEBPwFvCuJ//8QAGBEAAgMAAAAAAAAAAAAAAAAAAAIREkH/2gAIAQIBAT8BjS7H/8QAGhAAAgIDAAAAAAAAAAAAAAAAAAEREgJRcf/aAAgBAQAGPwKyymr0dZCSP//EABkQAQADAQEAAAAAAAAAAAAAAAEAESFhgf/aAAgBAQABPyFMXxTSZlHrG7C4s//aAAwDAQACAAMAAAAQBD//xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAEDAQE/EDBXJd1L/8QAFxEBAQEBAAAAAAAAAAAAAAAAAREAUf/aAAgBAgEBPxAE6LgCDv/EABsQAQADAAMBAAAAAAAAAAAAAAEAESExUZGh/9oACAEBAAE/EGEe5Q6F58hmXAG3Eu0ht0Ps/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/94d2f7c43e4e2ffcb586a8245edc273a/55fac/slides_styles.webp 198w, /static/94d2f7c43e4e2ffcb586a8245edc273a/5b4d3/slides_styles.webp 395w, /static/94d2f7c43e4e2ffcb586a8245edc273a/848e4/slides_styles.webp 790w, /static/94d2f7c43e4e2ffcb586a8245edc273a/8d239/slides_styles.webp 1185w, /static/94d2f7c43e4e2ffcb586a8245edc273a/95f20/slides_styles.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/94d2f7c43e4e2ffcb586a8245edc273a/9db10/slides_styles.jpg 198w, /static/94d2f7c43e4e2ffcb586a8245edc273a/16a07/slides_styles.jpg 395w, /static/94d2f7c43e4e2ffcb586a8245edc273a/d27a6/slides_styles.jpg 790w, /static/94d2f7c43e4e2ffcb586a8245edc273a/0b93b/slides_styles.jpg 1185w, /static/94d2f7c43e4e2ffcb586a8245edc273a/33266/slides_styles.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/94d2f7c43e4e2ffcb586a8245edc273a/d27a6/slides_styles.jpg" alt="Example slide designs" title="Some of my slides designs over the years" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Some of my slides designs over the years</p></figcaption> </figure> <p>🎨 <strong>Part 1: Design tips for beginners</strong> ✨ <strong>Part 2:</strong> <a href="/blog/beautiful-slides-talks-part-2-aesthetics">All about aesthetics</a> 🛠️ <strong>Part 3:</strong> <a href="/blog/beautiful-slides-talks-part-3-technical-content">Technical content</a> 🧩 <strong>Part 4:</strong> <a href="/blog/beautiful-slides-talks-part-4-design-elements">Design elements</a> 💌 <strong>Part 5:</strong> <a href="/blog/beautiful-slides-talks-part-5-sharing-presentations">Sharing your presentations</a></p> <p><em><strong>Disclaimer</strong> (since this post also got widely shared outside of my circles): This blog post is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p> <hr> <h2>1. A good font can make a world of difference</h2> <p>Fonts are truly a secret weapon and it’s my number one recommendation for a quick and easy way to spice up your slides. Even if you do nothing else, a good font can add a lot of personality, and discovering new fonts is a lot of fun. (Just be careful because it can become <em>very</em> addictive – if you enjoy buying domains you don’t need, you’ll love shopping for fonts!).</p> <p>Two recent sets of slides I made are almost entirely carried by their respective font: <a href="https://creativemarket.com/SamParrett/58623442-Mangrove-Font-Duo">Mangrove</a> Sans and Script for <a href="https://speakerdeck.com/honnibal/how-many-labelled-examples-do-you-need-for-a-bert-sized-model-to-beat-gpt-4-on-predictive-tasks">Matt’s talk</a> on beating GPT-4 on predictive tasks, and <a href="https://creativemarket.com/tantype/7261366-TAN-MARJORIE">Marjorie</a> for <a href="https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production-europython-keynote">my keynote</a> on LLMs from prototype to production. I also took inspiration from the examples provided of the fonts in context and used some of them in the overall design to really use the fonts to their full potential.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/c5fbed9250af59badfc85f7098b954d9/33266/slides_fonts.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.06060606060607%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEDBAX/xAAXAQADAQAAAAAAAAAAAAAAAAAAAQID/9oADAMBAAIQAxAAAAHS10KJkBaf/8QAGhABAQEAAwEAAAAAAAAAAAAAAgEAAxMiMv/aAAgBAQABBQK8N3QsRTI1cPRX1//EABcRAQEBAQAAAAAAAAAAAAAAAAEAAyH/2gAIAQMBAT8BexgX/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAIBAxL/2gAIAQIBAT8BauVMn//EABwQAAICAgMAAAAAAAAAAAAAAAABAhEhIjFBUv/aAAgBAQAGPwJ3Jc+iO/RtKzImxn//xAAbEAACAgMBAAAAAAAAAAAAAAAAARFRITFBcf/aAAgBAQABPyHZKZbIbLUi7kikuzKsm/EdoY8yWf/aAAwDAQACAAMAAAAQGx//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREx/9oACAEDAQE/EEiMi0//xAAXEQEAAwAAAAAAAAAAAAAAAAAAAREh/9oACAECAQE/EIXVH//EABwQAQEAAgMBAQAAAAAAAAAAAAERADEhUWFB0f/aAAgBAQABPxDj1EGl5wZBpH4UId33GplbRIdZU7IfywAmhF196Ma5Yg8DP//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/c5fbed9250af59badfc85f7098b954d9/55fac/slides_fonts.webp 198w, /static/c5fbed9250af59badfc85f7098b954d9/5b4d3/slides_fonts.webp 395w, /static/c5fbed9250af59badfc85f7098b954d9/848e4/slides_fonts.webp 790w, /static/c5fbed9250af59badfc85f7098b954d9/8d239/slides_fonts.webp 1185w, /static/c5fbed9250af59badfc85f7098b954d9/95f20/slides_fonts.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/c5fbed9250af59badfc85f7098b954d9/9db10/slides_fonts.jpg 198w, /static/c5fbed9250af59badfc85f7098b954d9/16a07/slides_fonts.jpg 395w, /static/c5fbed9250af59badfc85f7098b954d9/d27a6/slides_fonts.jpg 790w, /static/c5fbed9250af59badfc85f7098b954d9/0b93b/slides_fonts.jpg 1185w, /static/c5fbed9250af59badfc85f7098b954d9/33266/slides_fonts.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/c5fbed9250af59badfc85f7098b954d9/d27a6/slides_fonts.jpg" alt="Slide examples carried by fonts" title="Example of slides almost entirely carried by fonts" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Example of slides almost entirely carried by fonts</p></figcaption> </figure> <p>Of course, you don’t need to pick or buy a new font for every talk – if there’s a font you particularly like, it can become your “signature font” and it will give your slides a unique, but consistent look. For instance, I’ve been using <a href="https://www.grillitype.com/typeface/gt-walsheim">GT Walsheim</a> on this site since pretty much the beginning, and <a href="https://klim.co.nz/retail-fonts/calibre/">Calibre</a> has been the primary font for most of my slides and <a href="https://explosion.ai">Explosion</a>’s websites for years.</p> <h3>Budget option: free fonts</h3> <p>Over the years, <a href="https://fonts.google.com/">Google Fonts</a> has amassed a significant collection of free fonts you can try out in the browser and download for use in your project, and even find suitable font pairings for. If you’re looking for interesting fonts for slide titles, the “Display” category is a good one to start browsing through, and you can also define more fine-grained filtering. The site also provides a handy <a href="https://fonts.google.com/knowledge/glossary">glossary</a> that explains all relevant font terminology.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/33266/slides_google.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 25.252525252525253%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3AUH/8QAFhABAQEAAAAAAAAAAAAAAAAAAAEx/9oACAEBAAEFAlyP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAFxABAQEBAAAAAAAAAAAAAAAAAAFBUf/aAAgBAQABPyGuCrr/2gAMAwEAAgADAAAAEAgP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAQACAwAAAAAAAAAAAAAAAREAIUFRYf/aAAgBAQABPxBRNcZcKjqYwau+vDP/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/55fac/slides_google.webp 198w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/5b4d3/slides_google.webp 395w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/848e4/slides_google.webp 790w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/8d239/slides_google.webp 1185w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/95f20/slides_google.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/9db10/slides_google.jpg 198w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/16a07/slides_google.jpg 395w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/d27a6/slides_google.jpg 790w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/0b93b/slides_google.jpg 1185w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/33266/slides_google.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/d27a6/slides_google.jpg" alt="Google Fonts" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>For a less curated and more hit-or-miss selection, there’s also <a href="https://www.dafont.com/">Dafont</a>, which offers over 80k and mostly free fonts including many niche types of styles.</p> <h3>Premium fonts</h3> <p>High-quality fonts available on sites like <a href="https://www.fonts.com/">Fonts.com</a> can sometimes get pretty expensive but marketplaces like <a href="https://creativemarket.com/fonts">Creative Market</a> offer many great alternatives by independent creators, often for under $20 per font family. As a nice bonus, many font stores include not only plain examples of the font itself but also designs showing the font in use that you can take inspiration from.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/57c3b7c2295c3568ebe88a48ec9007a4/33266/slides_creativemarket.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 28.787878787878785%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAv/aAAwDAQACEAMQAAABvhGNgFf/xAAZEAACAwEAAAAAAAAAAAAAAAABAwIEERL/2gAIAQEAAQUCV1rQw2BE5//EABURAQEAAAAAAAAAAAAAAAAAAAIQ/9oACAEDAQE/ARP/xAAWEQADAAAAAAAAAAAAAAAAAAACEDH/2gAIAQIBAT8BKr//xAAaEAACAgMAAAAAAAAAAAAAAAAAAgERIXLh/9oACAEBAAY/AssPTTWx0//EABsQAAICAwEAAAAAAAAAAAAAAAABESExQVGx/9oACAEBAAE/IVzTrooFtLqKIifZ/9oADAMBAAIAAwAAABAD3//EABgRAAIDAAAAAAAAAAAAAAAAAAABETFx/9oACAEDAQE/EHvSEf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QH//EABsQAQEAAgMBAAAAAAAAAAAAAAERADEhQWFx/9oACAEBAAE/ECwXyW1PlyuWCTTOgm8skqgr4Z//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/57c3b7c2295c3568ebe88a48ec9007a4/55fac/slides_creativemarket.webp 198w, /static/57c3b7c2295c3568ebe88a48ec9007a4/5b4d3/slides_creativemarket.webp 395w, /static/57c3b7c2295c3568ebe88a48ec9007a4/848e4/slides_creativemarket.webp 790w, /static/57c3b7c2295c3568ebe88a48ec9007a4/8d239/slides_creativemarket.webp 1185w, /static/57c3b7c2295c3568ebe88a48ec9007a4/95f20/slides_creativemarket.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/57c3b7c2295c3568ebe88a48ec9007a4/9db10/slides_creativemarket.jpg 198w, /static/57c3b7c2295c3568ebe88a48ec9007a4/16a07/slides_creativemarket.jpg 395w, /static/57c3b7c2295c3568ebe88a48ec9007a4/d27a6/slides_creativemarket.jpg 790w, /static/57c3b7c2295c3568ebe88a48ec9007a4/0b93b/slides_creativemarket.jpg 1185w, /static/57c3b7c2295c3568ebe88a48ec9007a4/33266/slides_creativemarket.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/57c3b7c2295c3568ebe88a48ec9007a4/d27a6/slides_creativemarket.jpg" alt="Fonts on Creative Market" title="Preview of fonts and design examples on Creative Market (&lt;a href=&#39;https://creativemarket.com/Aiyari/3338445-Lucidity-Extras&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://creativemarket.com/MehmetRehaTugcu/42280946-Rampage-Typeface&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Preview of fonts and design examples on Creative Market (<a href='https://creativemarket.com/Aiyari/3338445-Lucidity-Extras' target='_blank'>#1</a>, <a href='https://creativemarket.com/MehmetRehaTugcu/42280946-Rampage-Typeface' target='_blank'>#2</a>)</p></figcaption> </figure> <p>Remember that fonts are made by people and require significant design effort, so please don’t pirate them. You can always try them out interactively in your browser, and many fonts also offer free trial versions with limited character sets so you can test them in your project before you commit.</p> <h3>Pro tip: Get a font manager</h3> <p>The default font apps that come with standard operating systems aren’t particularly nice so if you’ve already downloaded a lot of fonts, it can be helpful to install a font manager with features for previewing, sorting, filtering, organizing and activating your fonts. I use <a href="https://rightfontapp.com/">RightFont</a> for Mac, which integrates with Google Fonts out of the box, and there’s also <a href="https://fontba.se/">FontBase</a>, which is free and supports Windows and Linux as well.</p> <hr> <h2>2. Focus on the most powerful editing features</h2> <p>You don’t need to become an expert at graphic design to make beautiful slides! I wouldn’t even consider myself a designer because there’s <em>so</em> much I can’t do and I rely a lot on existing design assets – the only advantage I have, really, is that I’ve been hacking around with Photoshop and web design since I was a <a href="/blog/how-i-started-coding/">teenager</a>.</p> <h3>Using effects in Adobe Photoshop</h3> <p><a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> can be intimidating at first because there’s just <em>so much</em> that’s possible and so many tools and features. But once you have a basic grasp of the controls, moving things around, copy-pasting and working with layers (you can find many beginner tutorials online), there are really only two killer features you need to know to take your visuals to the next level: <strong>actions and smart objects</strong>.</p> <p><a href="https://www.adobe.com/products/photoshop/actions.html">Actions</a> are essentially programmed workflows that perform a series of steps on your image. There are many cool effects you can buy and download from sites like <a href="https://creativemarket.com">Creative Market</a> to transform images or text into cool designs in a single click.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/3d04c0b77d71e16fdf92aac3bba91f6e/33266/slides_effects.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 33.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABnXAohP/EABoQAAICAwAAAAAAAAAAAAAAAAEDAAIEERL/2gAIAQEAAQUCoU9qG8Sf/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BJ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAQACAwAAAAAAAAAAAAAAAAEAAgMQgf/aAAgBAQAGPwJbnJjNf//EABoQAAICAwAAAAAAAAAAAAAAAAABESExQXH/2gAIAQEAAT8hlDhqk0yHXTR3J//aAAwDAQACAAMAAAAQ8D//xAAWEQEBAQAAAAAAAAAAAAAAAAABECH/2gAIAQMBAT8Qyk//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAcEAEBAAICAwAAAAAAAAAAAAABEQAhMUFRccH/2gAIAQEAAT8QIrHQsr1Hie8TWzLxoV+GFhp5TP/Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/3d04c0b77d71e16fdf92aac3bba91f6e/55fac/slides_effects.webp 198w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/5b4d3/slides_effects.webp 395w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/848e4/slides_effects.webp 790w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/8d239/slides_effects.webp 1185w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/95f20/slides_effects.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/3d04c0b77d71e16fdf92aac3bba91f6e/9db10/slides_effects.jpg 198w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/16a07/slides_effects.jpg 395w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/d27a6/slides_effects.jpg 790w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/0b93b/slides_effects.jpg 1185w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/33266/slides_effects.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/3d04c0b77d71e16fdf92aac3bba91f6e/d27a6/slides_effects.jpg" alt="Different effects on Creative Market" title="Different Photoshop effects with examples available on Creative Market (&lt;a href=&#39;https://creativemarket.com/cursedesign/6478021-Liquid-Melting-Text-Effects-Vol.1&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://creativemarket.com/bangingjoints/7187170-GhostScan-Photoshop-Plugin&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Different Photoshop effects with examples available on Creative Market (<a href='https://creativemarket.com/cursedesign/6478021-Liquid-Melting-Text-Effects-Vol.1' target='_blank'>#1</a>, <a href='https://creativemarket.com/bangingjoints/7187170-GhostScan-Photoshop-Plugin' target='_blank'>#2</a>)</p></figcaption> </figure> <p><a href="https://www.adobe.com/products/photoshop/smart-objects.html">Smart objects</a> are editable containers for images and text that are then used or transformed as part of a larger design – so basically, a Photoshop file within a Photoshop file. Many pre-made design assets come with smart objects that you can edit by double-clicking on the layer and saving when you’re done. A classic example of this are <a href="https://creativemarket.com/mockups">mockups</a>: you copy your content into the smart object, and it’s transformed into a realistic-looking paper flyer, book or even an embroidered patch or enamel pin.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/06b9a7a5b112c7183c449466c94b9786/33266/slides_mockups.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 39.8989898989899%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGu4AP/xAAZEAACAwEAAAAAAAAAAAAAAAACEQASFCL/2gAIAQEAAQUCDQ+4N1//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPwFn/8QAGhAAAQUBAAAAAAAAAAAAAAAAAAECIjFhwf/aAAgBAQAGPwJ/RCV4f//EABsQAAEEAwAAAAAAAAAAAAAAACEAARFBMYGx/9oACAEBAAE/IXOyzIrpOBEyu3ov/9oADAMBAAIAAwAAABAID//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/ECf/xAAWEQADAAAAAAAAAAAAAAAAAAABECH/2gAIAQIBAT8Qor//xAAcEAEAAgEFAAAAAAAAAAAAAAARASEAMUFxgZH/2gAIAQEAAT8Qroo1QLl4BiCNIQTJT3kAatjxn//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/06b9a7a5b112c7183c449466c94b9786/55fac/slides_mockups.webp 198w, /static/06b9a7a5b112c7183c449466c94b9786/5b4d3/slides_mockups.webp 395w, /static/06b9a7a5b112c7183c449466c94b9786/848e4/slides_mockups.webp 790w, /static/06b9a7a5b112c7183c449466c94b9786/8d239/slides_mockups.webp 1185w, /static/06b9a7a5b112c7183c449466c94b9786/95f20/slides_mockups.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/06b9a7a5b112c7183c449466c94b9786/9db10/slides_mockups.jpg 198w, /static/06b9a7a5b112c7183c449466c94b9786/16a07/slides_mockups.jpg 395w, /static/06b9a7a5b112c7183c449466c94b9786/d27a6/slides_mockups.jpg 790w, /static/06b9a7a5b112c7183c449466c94b9786/0b93b/slides_mockups.jpg 1185w, /static/06b9a7a5b112c7183c449466c94b9786/33266/slides_mockups.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/06b9a7a5b112c7183c449466c94b9786/d27a6/slides_mockups.jpg" alt="Different mockups on Creative Market" title="Mockups for realistic-looking patches and enamel pins using smart objects (&lt;a href=&#39;https://creativemarket.com/MrMockup/4825446-Patch-Mockups-Embroidery-Generator&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://creativemarket.com/MrMockup/3759809-Logo-Pin-Enamel-Mockup&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Mockups for realistic-looking patches and enamel pins using smart objects (<a href='https://creativemarket.com/MrMockup/4825446-Patch-Mockups-Embroidery-Generator' target='_blank'>#1</a>, <a href='https://creativemarket.com/MrMockup/3759809-Logo-Pin-Enamel-Mockup' target='_blank'>#2</a>)</p></figcaption> </figure> <p>If you know how to use actions and make small edits in Photoshop, there’s an abundance of high-quality design assets and effects for all kinds of different styles to choose from online. You’ll also find many design packs or bundles that consist of different elements: seamless patterns for backgrounds, textures, effects, images, pre-designed vector graphics and sometimes even matching fonts. They also typically come with several examples that show what’s possible and are great for inspiration.</p> <h3>Working with colors</h3> <p>If you’re unsure which colors work well together, there are many tools for creating color palettes, like <a href="https://coolors.co/">Coolors</a>, which is one of my favorites. You can generate random combinations, or add your existing colors, lock them in and generate a matching palette. There’s also <a href="https://uigradients.com">uiGradients</a>, which provides a collection of colorful gradients that can work well as backgrounds to give your slides a more designed touch.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/243f6b9f454d2069acf24f7b4a143f47/33266/slides_colors.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 26.262626262626267%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFgEBAQEAAAAAAAAAAAAAAAAAAwEE/9oADAMBAAIQAxAAAAHUCvYNm//EABkQAAIDAQAAAAAAAAAAAAAAAAECAxESIf/aAAgBAQABBQKVm2XNjo//xAAYEQACAwAAAAAAAAAAAAAAAAAAAQMxcf/aAAgBAwEBPwGe1gj/xAAYEQADAQEAAAAAAAAAAAAAAAAAAQMSIf/aAAgBAgEBPwGPYoyj/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAEQETH/2gAIAQEABj8C1lR//8QAGhAAAgIDAAAAAAAAAAAAAAAAAREAITFRgf/aAAgBAQABPyEKguxeGdtuUCW5/9oADAMBAAIAAwAAABBz3//EABgRAQEAAwAAAAAAAAAAAAAAAAEAITHw/9oACAEDAQE/EAHDZLF//8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERUf/aAAgBAgEBPxBVXo6H/8QAGxABAQACAwEAAAAAAAAAAAAAAREAIUFRYdH/2gAIAQEAAT8QkBuhnGXChdtQ9HWRZkbafM//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/243f6b9f454d2069acf24f7b4a143f47/55fac/slides_colors.webp 198w, /static/243f6b9f454d2069acf24f7b4a143f47/5b4d3/slides_colors.webp 395w, /static/243f6b9f454d2069acf24f7b4a143f47/848e4/slides_colors.webp 790w, /static/243f6b9f454d2069acf24f7b4a143f47/8d239/slides_colors.webp 1185w, /static/243f6b9f454d2069acf24f7b4a143f47/95f20/slides_colors.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/243f6b9f454d2069acf24f7b4a143f47/9db10/slides_colors.jpg 198w, /static/243f6b9f454d2069acf24f7b4a143f47/16a07/slides_colors.jpg 395w, /static/243f6b9f454d2069acf24f7b4a143f47/d27a6/slides_colors.jpg 790w, /static/243f6b9f454d2069acf24f7b4a143f47/0b93b/slides_colors.jpg 1185w, /static/243f6b9f454d2069acf24f7b4a143f47/33266/slides_colors.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/243f6b9f454d2069acf24f7b4a143f47/d27a6/slides_colors.jpg" alt="Coolors palette generator and uiGradients" title="The interactive Coolors palette generator and the uiGradients collection" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>The interactive Coolors palette generator and the uiGradients collection</p></figcaption> </figure> <p>If you’re creating graphs and visualizations, make sure your colors are clearly distinguishable and <strong>accessible</strong> for people with visual impairments. <a href="https://venngage.com/blog/accessible-colors/">This guide</a> has many helpful tips and infographics, as well as a <a href="https://venngage.com/tools/accessible-color-palette-generator">generator</a> for accessible color palettes. As a general strategy, try to <strong>not solely rely on color</strong> to get your point across – in addition, you can use style (like solid versus dotted lines), or emoji and icons (<a href="https://thenounproject.com/">The Noun Project</a> has an icon for everything!).</p> <h3>Pro tip: Presenting code with syntax highlighting</h3> <p>When presenting code on your slides, you want it to be clear and easily understood. Did you know that if you’re using <a href="https://code.visualstudio.com/">Visual Studio Code</a>, your syntax highlighting is automatically copied to your clipboard as well? If you paste it into an app like Keynote, the colors will be preserved and you’ll end up with out-of-the-box pretty code. The same might be true for other code editors as well, but I haven’t tried it.</p> <p>Another option is to use images or screenshots, but be careful here: you can easily end up with lower image quality, which is especially problematic for text. For beautiful high-quality code screenshots, I recommend <a href="https://carbon.now.sh/">Carbon</a>, which supports many languages, themes and customizations in a cool terminal-style look.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/86273d07ff7504347077c8b0e60cef9c/33266/slides_code.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 28.28282828282828%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAd5gkFf/xAAZEAADAAMAAAAAAAAAAAAAAAACAwQAERT/2gAIAQEAAQUCmE90OYDul2f/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAaEAACAgMAAAAAAAAAAAAAAAAAAgESMTOh/9oACAEBAAY/Ams3RlhsGyT/xAAaEAACAgMAAAAAAAAAAAAAAAABEQAhEEFh/9oACAEBAAE/IRXJoKxiyATXMB//2gAMAwEAAgADAAAAEP8A3//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAABBB/9oACAECAQE/EKf/xAAcEAACAgIDAAAAAAAAAAAAAAABEQBBIVExcdH/2gAIAQEAAT8QV6mgMncJDCQANHURwHpeT//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/86273d07ff7504347077c8b0e60cef9c/55fac/slides_code.webp 198w, /static/86273d07ff7504347077c8b0e60cef9c/5b4d3/slides_code.webp 395w, /static/86273d07ff7504347077c8b0e60cef9c/848e4/slides_code.webp 790w, /static/86273d07ff7504347077c8b0e60cef9c/8d239/slides_code.webp 1185w, /static/86273d07ff7504347077c8b0e60cef9c/95f20/slides_code.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/86273d07ff7504347077c8b0e60cef9c/9db10/slides_code.jpg 198w, /static/86273d07ff7504347077c8b0e60cef9c/16a07/slides_code.jpg 395w, /static/86273d07ff7504347077c8b0e60cef9c/d27a6/slides_code.jpg 790w, /static/86273d07ff7504347077c8b0e60cef9c/0b93b/slides_code.jpg 1185w, /static/86273d07ff7504347077c8b0e60cef9c/33266/slides_code.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/86273d07ff7504347077c8b0e60cef9c/d27a6/slides_code.jpg" alt="Code examples in slides" title="Examples of code with syntax highlighting presented in different styles" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of code with syntax highlighting presented in different styles</p></figcaption> </figure> <hr> <h2>3. Less is more</h2> <p>Good design doesn’t mean “more stuff” – it’s often the opposite. When you discover the magic of design elements and effects, it can be tempting to go overboard, like many did with the introduction of <a href="https://www.wired.com/2016/11/express-like-1999-wordart-generator/">Word Art</a> and <a href="https://clipart-library.com/">Clip Arts</a> back in the 90s.</p> <h3>Slides should support your talk</h3> <p>Ultimately, what your talk is about is the <em>content</em>. Anything visual that you add is only there to support your points, keep your listeners interested and help them follow along. There’s a fine line between making your slides stand out and making them work against you.</p> <p>You don’t want your audience to get distracted and stop paying attention to your talk because they’re busy processing the slides or reading long texts instead of listening. I personally prefer slides that only include short summaries of the main points and examples or illustrations, and only use them as a visual guide through what I’m saying while a slide is on. This means that the slides might not always be fully understood on their own and out of context, but I’m okay with that. (Of course, how you handle this depends a lot on the type of talk and venue. For academically-oriented talks, it can be common to include a lot more text and content, whereas keynote speakers at industry conferences may sometimes present with slides showing only supporting images.)</p> <h3>You don’t need fancy animations</h3> <p>Tools like Keynote and PowerPoint offer a lot of options for <a href="https://support.apple.com/guide/keynote/animate-objects-on-a-slide-tanf96d92cb6/mac">animating</a> elements on your slides, but the only built-in animation I ever use is “appear”. Fancier animations can be nice as a little gag, but they’re not only distracting, they also come with a big disadvantage: they only work in your program. I typically export my slides with all animation steps as a PDF as a fallback, in case there are technical issues at the conference and I can’t use my laptop, and so I can upload them to <a href="https://speakerdeck.com/inesmontani/">Speaker Deck</a> later. This won’t support animations anyway, so I don’t bother with them in the first place.</p> <h3>Pick a theme and stick to it</h3> <p>For my talks, I usually decide on a single theme or “aesthetic” that I use consistently across all slides as a visual through line, reflected in the headline fonts, colors, background and style of graphics and illustrations. For example, <a href="https://speakerdeck.com/inesmontani/let-them-write-code-keynote-pycon-india-2019">glitchy analog</a> vibes, <a href="https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020">80s</a>, <a href="https://speakerdeck.com/inesmontani/advanced-nlp-for-diverse-languages">70s</a>, <a href="https://speakerdeck.com/inesmontani/applied-nlp-thinking">paper collage</a> or a <a href="https://speakerdeck.com/inesmontani/workshop-half-hour-of-labeling-power-can-we-beat-gpt">Y2K-inspired</a> design. How playful you want to go with it is up to you, your personality and the type of event. If you feel good about your slides and style, it’ll show and will help you feel more comfortable on stage.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/94d2f7c43e4e2ffcb586a8245edc273a/33266/slides_styles.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.37373737373737%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgED/9oADAMBAAIQAxAAAAGtDQZAM//EABoQAAICAwAAAAAAAAAAAAAAAAACAwQREhP/2gAIAQEAAQUCSFVLD4j6an//xAAYEQACAwAAAAAAAAAAAAAAAAAAEQITIf/aAAgBAwEBPwFvCuJ//8QAGBEAAgMAAAAAAAAAAAAAAAAAAAIREkH/2gAIAQIBAT8BjS7H/8QAGhAAAgIDAAAAAAAAAAAAAAAAAAEREgJRcf/aAAgBAQAGPwKyymr0dZCSP//EABkQAQADAQEAAAAAAAAAAAAAAAEAESFhgf/aAAgBAQABPyFMXxTSZlHrG7C4s//aAAwDAQACAAMAAAAQBD//xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAEDAQE/EDBXJd1L/8QAFxEBAQEBAAAAAAAAAAAAAAAAAREAUf/aAAgBAgEBPxAE6LgCDv/EABsQAQADAAMBAAAAAAAAAAAAAAEAESExUZGh/9oACAEBAAE/EGEe5Q6F58hmXAG3Eu0ht0Ps/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/94d2f7c43e4e2ffcb586a8245edc273a/55fac/slides_styles.webp 198w, /static/94d2f7c43e4e2ffcb586a8245edc273a/5b4d3/slides_styles.webp 395w, /static/94d2f7c43e4e2ffcb586a8245edc273a/848e4/slides_styles.webp 790w, /static/94d2f7c43e4e2ffcb586a8245edc273a/8d239/slides_styles.webp 1185w, /static/94d2f7c43e4e2ffcb586a8245edc273a/95f20/slides_styles.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/94d2f7c43e4e2ffcb586a8245edc273a/9db10/slides_styles.jpg 198w, /static/94d2f7c43e4e2ffcb586a8245edc273a/16a07/slides_styles.jpg 395w, /static/94d2f7c43e4e2ffcb586a8245edc273a/d27a6/slides_styles.jpg 790w, /static/94d2f7c43e4e2ffcb586a8245edc273a/0b93b/slides_styles.jpg 1185w, /static/94d2f7c43e4e2ffcb586a8245edc273a/33266/slides_styles.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/94d2f7c43e4e2ffcb586a8245edc273a/d27a6/slides_styles.jpg" alt="Example slide designs" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>If you’re ever stuck on a slide and not sure how to present a piece of information, take a step back and ask yourself: What styles and elements does my theme and aesthetic have that could fit? Maybe it’s a ripped piece of paper if you’re going for a DIY vibe. Or maybe it’s an asymmetric box, or a browser window illustration with a strong shadow. Maybe your content works best on a minimalistic statement slide with a strong color and no visual distractions. If you’re not sure, go with “less” instead of “more”.</p> <hr> <h2>Resources and tools I use</h2> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>👩‍🎨 <strong>Design</strong></span></td> <td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a>, <a href="https://www.adobe.com/products/illustrator.html">Adobe Illustrator</a>, <a href="https://www.figma.com/">Figma</a>, <a href="https://www.sketch.com/">Sketch</a></td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://creativemarket.com">Creative Market</a>, <a href="https://fonts.google.com">Google Fonts</a>, <a href="https://dafont.com">Dafont</a>, <a href="https://rightfontapp.com/">RightFont</a>, <a href="https://fontba.se/">FontBase</a></td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><a href="https://coolors.co/">Coolors</a>, <a href="https://uigradients.com">uiGradients</a></td> </tr> <tr> <td><span>🖼️ <strong>Assets</strong></span></td> <td><a href="https://creativemarket.com">Creative Market</a>, <a href="https://www.freepik.com/">Freepik</a></td> </tr> <tr> <td><span>ℹ️ <strong>Icons</strong></span></td> <td><a href="https://emojipedia.org/apple">Apple Emoji</a>, <a href="https://github.com/twitter/twemoji">Twemoji</a>, <a href="https://thenounproject.com/">The Noun Project</a></td> </tr> <tr> <td><span>💻 <strong>Code</strong></span></td> <td><a href="https://carbon.now.sh/">Carbon</a>, <a href="https://code.visualstudio.com/">Visual Studio Code</a></td> </tr> <tr> <td><span>🔗 <strong>Sharing</strong></span></td> <td><a href="https://speakerdeck.com">Speaker Deck</a></td> </tr> </tbody> </table> <p><link-button href="/blog/beautiful-slides-talks-part-2-aesthetics/" icon="right">Part 2: All about aesthetics</link-button></p><![CDATA[My Guide to Berlin]]>https://ines.io/blog/berlin-guidehttps://ines.io/blog/berlin-guideFri, 15 Dec 2023 00:00:00 GMT<p>I’ve been living in Berlin since 2010 and making this city my home base and the place to start our company was a very conscious choice. Berlin is vibrant, a bit gritty, very walkable and offers a high quality of life relative to the cost of living. It’s also a city full of culture and history, having been at the centre of modern European history for the past 100+ years, from two world wars to the Cold War and the years spent as a city divided between <a href="https://en.wikipedia.org/wiki/East_Germany">East</a> and <a href="https://en.wikipedia.org/wiki/West_Germany">West</a> Germany.</p> <p>This guide collects some of my personal favourite places and recommendations, including restaurants, cafés, bars, shopping, activities, museums and practical tips. Of course, my selection of places is very biased and heavily centered around the district of <a href="https://en.wikipedia.org/wiki/Kreuzberg">Kreuzberg</a>, where I live and work.</p> <p><em>Use the sidebar to navigate by category or expand the map to view it in a new window. Click on a place for my notes and more info.</em></p> <iframe src="https://www.google.com/maps/d/u/0/embed?mid=1TTPMNoR-g2sdY9ZcRQtP27PgN2bwb4o&ehbc=2E312F&noprof=1" width="100%" height="500"></iframe> <h2>Areas and streets</h2> <p>Sometimes you just want to walk through the city, take in the surroundings, do some shopping and maybe stop for a coffee or food along the way. Berlin’s central districts are very walkable and dense, so here’s a non-exhaustive selection of streets to start on. I recommend starting at a more central point and then walking outwards.</p> <iframe src="https://www.google.com/maps/d/u/0/embed?mid=1Er4jnOZJyEsZ4F2vY0aX8yqajPH2hOA&ehbc=2E312F&noprof=1" width="100%" height="300"></iframe> <ul> <li><strong><a href="https://www.google.com/search?q=Oranienstra%C3%9Fe+Berlin++map">Oranienstraße</a></strong> (Kreuzberg): Vibrant and slightly gritty street at the centre of the alternative Kreuzberg district with many shops, restaurants, cafés and bars.</li> <li><strong><a href="https://www.google.com/search?q=Gr%C3%A4festra%C3%9Fe+Berlin++map">Gräfestraße</a></strong> (Kreuzberg): Street with beautiful architecture and many nice restaurants and some shops, connecting the Hasenheide park to the Landwehr Canal. I used to live around there and it’s still one of my favourite areas of Berlin.</li> <li><strong><a href="https://www.google.com/search?q=Boxhagener+Stra%C3%9Fe+Berlin++map">Boxhagener Straße</a></strong> (Friedrichshain): Street leading you through the alternative and free-spirited district of Friedrichshain and past Boxhagener Platz, a small park surrounded by many restaurants, bars and shops. Also check out the various side streets. I often take this route when shopping for clothes and gifts.</li> <li><strong><a href="https://www.google.com/search?q=Neue+Sch%C3%B6nhauser+Stra%C3%9Fe+Berlin++map">Neue</a> / <a href="https://www.google.com/search?q=Alte+Sch%C3%B6nhauser+Stra%C3%9Fe+Berlin++map">Alte</a> Schönhauser Straße</strong> (Mitte): A slightly more traditional shopping area with international stores and brands like Weekday, &#x26; Other Stories and Doc Martens, mixed with some local shops and cafés. But hey, better than a mall!</li> <li><strong><a href="https://www.google.com/search?q=Bergmannstra%C3%9Fe+Berlin++map">Bergmannstraße</a></strong> (Kreuzberg): Popular street taking you through the “other side” of Kreuzberg, less gritty and with nice architecture and many small side streets, restaurants, cafés, a market hall and independent local shops.</li> <li><strong><a href="https://www.google.com/search?q=Weserstra%C3%9Fe+Berlin+Neuk%C3%B6lln++map">Weserstraße</a></strong> (Neukölln): Although Neukölln is considered one of the hippest districts, its appeal is definitely less obvious compared to Kreuzberg or Friedrichshain. This street is a nice intro and has several cool bars and restaurants. I sometimes take tourist friends for a “Späti” (kiosk) tour through the area: grab a drink for the way (see notes on drinking below) and walk along to the next Späti (there are <em>many</em>).</li> <li><strong><a href="https://www.google.com/search?q=Kurf%C3%BCrstendamm+Berlin++map">Kurfürstendamm</a></strong> (Charlottenburg): Also called “Ku’damm”, this historic boulevard is probably the most famous and touristy street. Likely more of a sightseeing experience, because shopping-wise, it’s mostly big brands and chains, tourist shops and luxury fashion (think Dior and Hermès).</li> </ul> <h2>News and events</h2> <ul> <li><strong><a href="https://mitvergnuegen.com/">Mit Vergnügen</a></strong>: German online magazine keeping you up to date on new places, events and what else is on, with nice themed and seasonal roundups.</li> <li><strong><a href="https://the-berliner.com">The Berliner</a></strong>: English-language city magazine for Berlin (formerly called Exberliner), online and as print edition every other month, available in <a href="https://www.the-berliner.com/berlin/where-to-buy-the-berliner-magazine/">stores</a> across the city.</li> <li><strong><a href="https://www.20percent.berlin">20 Percent</a></strong>: News, updates and commentary about everything that’s happening in the city, published twice a week. Also available as a podcast!</li> <li><strong><a href="https://thenextday.substack.com">The Next Day</a></strong>: Weekend guides released every Wednesday, featuring concerts, culture, arts, cinema and other events.</li> <li><strong><a href="https://www.songkick.com/metro-areas/28443-germany-berlin">Songkick</a></strong>: View all concerts in Berlin for a given day. Pro tip: if you create an account, you can sync it with your Spotify and get personalised recommendations for artists you like.</li> <li><strong><a href="https://ra.co/events/de/berlin">Resident Advisor</a></strong>: Club nights and concerts focused on electronic music.</li> </ul> <h2>Useful apps and websites</h2> <ul> <li><strong><a href="https://citymapper.com/?lang=en">CityMapper</a></strong>: All-in-one transport app for pros that helps you map out your route, including public transport, walking, cycling, scooting, driving and car sharing. My favourite feature: when taking public transport, CityMapper tells you which wagon to get on and which exit to take to get to your destination fast and hassle-free.</li> <li><strong><a href="https://www.free-now.com/de/fahrgast/taxi/">FREE NOW</a></strong>: Support your local taxi drivers, order a real taxi and pay via the app! When ordering, make sure to actually select “taxi”, not “ride” (which is their Uber-like service). Note that unlike with Uber, the price you see when booking is only an estimate and not locked in beforehand, although they did recently introduce an Uber-like fixed price feature.</li> <li><strong><a href="https://www.bvg.de/en">BVG</a></strong>: Berlin’s public transport is one of the best in the world and includes subways, trams, buses and even its own taxi service. Download the app so you can get whatever ticket is right for you when you need it. If you’re planning on getting around a lot, day or week tickets are definitely worth it.</li> <li><strong><a href="https://www.li.me/en-de/vehicles/scooter">Lime</a></strong>: If you want to get an e-scooter, Lime has the best and they can be booked via their app or on Uber. E-scooters are actually a great way to get around as an alternative to biking and public transport, and they’ve really grown on me. Keep an eye on the red areas on the map where parking isn’t allowed, and always park your scooter next to the sidewalk and out of the way of pedestrians.</li> <li><strong><a href="https://wolt.com/en/">Wolt</a></strong>: My favourite delivery app, offering food from some of the best restaurants and all kinds of products from a growing selection of local stores, including groceries, drinks, pet food, beauty products, electronics and even over-the-counter medication from pharmacies. (Note that unlike in the US, medication is not sold in regular drug stores, only in pharmacies.)</li> <li><strong><a href="https://www.goflink.com/en-DE/">Flink</a></strong>: Get groceries and essentials from a large selection delivered to your door in under 30 minutes, depending on your location. Keep in mind that just like supermarkets, the service is closed on Sundays (see below).</li> <li><strong><a href="https://www.flaschenpost.de/">Flaschenpost</a></strong>: App and online shop for ordering drinks and some food and household items, delivered to your door (even to the top floor!) within 2 hours. They even take all your empty bottles and crates with deposit and credit the money.</li> <li><strong><a href="https://www.toogoodtogo.com/en-us">Too Good To Go</a></strong>: Help reduce waste and rescue food from a restaurant or shop near you. After selecting a place, you can then collect your surprise bag at the specified pick-up time. Prices are super cheap and you can discover some real gems.</li> <li><strong><a href="https://urbansportsclub.com/en/venues?city_id=1&#x26;plan_type=1&#x26;show-map">Urban Sports Club</a></strong>: A huge variety of different sports all across the city with a single monthly membership. Especially nice for testing and finding places you like.</li> <li><strong><a href="https://www.treatwell.de/">Treatwell</a></strong>: Need a haircut, cosmetics appointment or massage? This site and app makes it easy to find available salons and appointments nearby, including last-minute slots (especially helpful if you’re only visiting and need something <em>right now</em>)!</li> </ul> <h2>Practical tips</h2> <ul> <li><strong>Cash is king</strong>: Although things have changed a bit, especially after COVID, many places are still big on cash. Especially bars, clubs or takeaway places are often cash-only. So make sure to get enough money out.</li> <li><strong>Language</strong>: Berlin is an international city and you should get by okay with English. However, not everyone speaks English or is comfortable with it, so I’d recommend downloading the German dictionary on Google Translate for offline use, just in case.</li> <li><strong>Wi-Fi</strong>: There’s free wi-fi on public transport and in many cafés and restaurants, but it’s not as developed as you might expect from a big city. I recommend getting a cheap pre-paid (e)SIM just for mobile data.</li> <li><strong>Drinking</strong>: It’s legal to drink alcohol on the streets and there’s even a German word for a beer you have on the way to a place: “Wegbier”. Drinking on the subway is not officially allowed, but common and tolerated. When you’re done, don’t throw your bottle in the trash but place it on the ground below the orange bin. There’s deposit (“Pfand”) on bottles and cans, so if you’re not taking your empties back to a store yourself, make it easy for someone else who needs it to collect them.</li> <li><strong>Smoking</strong>: Despite the general German smoking ban, many bars, pubs and clubs still allow or tolerate smoking inside. If that’s not something you’re into, make sure to check before you head to a place. Cannabis is legal from April 1, 2024, with certain restrictions, so if you’re interested in that, make sure to check online for the latest rules, and don’t buy anything from random people trying to sell it to you in the parks.</li> <li><strong>Sundays</strong>: Shops and supermarkets are closed on Sundays. You may find a “Späti” (kiosk) selling essentials, although that’s not officially allowed for places selling supermarket goods. If you’re desperate, there’s an exception for supermarkets at long-distance train stations, for example <a href="https://maps.app.goo.gl/JLap5DfrorvMwX7z8">Ostbahnhof</a> or <a href="https://maps.app.goo.gl/tWstiF6rhLFdgT7a6">Central Station</a>.</li> <li><strong>Rhythm</strong>: Berlin stays open late and likes to sleep in. It’s not uncommon for people to head out to a club way past midnight (or in the morning, really), and most cafés won’t open before 9 or 10am.</li> </ul><![CDATA[Raspberry Pi, Python and cats: my first foray into embedded development]]>https://ines.io/blog/raspberry-pi-python-catshttps://ines.io/blog/raspberry-pi-python-catsSat, 29 Apr 2023 00:00:00 GMT<p>I love <a href="https://www.reddit.com/r/shittyrobots/">shitty robots</a>. And I love Python, and cats. I never thought I’d be a cat mom myself, but in March 2022 we started hosting a family from Ukraine who brought with them their adorable cat boy Rizhik and we ended up adopting him. And here we are, with two additional fluffy Siberian kittens, Baikal and Tunguska, that we’ll adopt soon to keep him company.</p> <p>The other day, I was in need of a hobby project – preferably “recreational programming” and different from what I normally do in my <a href="https://explosion.ai">day-to-day work</a>. What if I could make it easier for my remote friends and colleagues to get in on the fun of petting our fluffy boy? Build a remotely controlled robot to do the <a href="https://www.reddit.com/r/brushybrushy/">brushy brushy</a>? I’ve always wanted to get more into embedded development and programming a Raspberry Pi, to get inspired and to see what’s possible these days. So I decided to build a shitty <strong>cat petting robot</strong>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/dc744c1d6be38dfedfdfd24aa6fbc5ad/be0d8/raspberry-pi_cats.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 62.121212121212125%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwACBP/EABUBAQEAAAAAAAAAAAAAAAAAAAID/9oADAMBAAIQAxAAAAHtINTZTzH/xAAbEAABBAMAAAAAAAAAAAAAAAABAAMREgIhMf/aAAgBAQABBQITd0SoKGk5zFsU/8QAFREBAQAAAAAAAAAAAAAAAAAAAhD/2gAIAQMBAT8BRn//xAAXEQADAQAAAAAAAAAAAAAAAAABAhAR/9oACAECAQE/AQ2z/8QAHRAAAQQCAwAAAAAAAAAAAAAAAAECETEQIVFxkf/aAAgBAQAGPwJZLiNlp6I7nDej/8QAGRAAAgMBAAAAAAAAAAAAAAAAAREAITFR/9oACAEBAAE/IXELMg1Gyi24QplCpwRWs7cN3t9hL3H/2gAMAwEAAgADAAAAEM8f/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAwEBPxCOlR//xAAWEQEBAQAAAAAAAAAAAAAAAAARAAH/2gAIAQIBAT8QcRt//8QAHRAAAgMAAgMAAAAAAAAAAAAAAREAITFBUWGBkf/aAAgBAQABPxBnBN1LAL6+Rr1LmBaCFvYMcjLgr2vMaohaUNNQxd6k2VcQmMqryzP/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/dc744c1d6be38dfedfdfd24aa6fbc5ad/55fac/raspberry-pi_cats.webp 198w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/5b4d3/raspberry-pi_cats.webp 395w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/848e4/raspberry-pi_cats.webp 790w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/8d239/raspberry-pi_cats.webp 1185w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/888d0/raspberry-pi_cats.webp 1580w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/91ec5/raspberry-pi_cats.webp 1816w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/dc744c1d6be38dfedfdfd24aa6fbc5ad/9db10/raspberry-pi_cats.jpg 198w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/16a07/raspberry-pi_cats.jpg 395w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/d27a6/raspberry-pi_cats.jpg 790w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/0b93b/raspberry-pi_cats.jpg 1185w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/8f04a/raspberry-pi_cats.jpg 1580w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/be0d8/raspberry-pi_cats.jpg 1816w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/dc744c1d6be38dfedfdfd24aa6fbc5ad/d27a6/raspberry-pi_cats.jpg" alt="Photo of Rizhik with my tattoo of him, Tunguska and Baikal" title="Rizhik with my tattoo of him, and little siblings Tunguska and Baikal" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Rizhik with my tattoo of him, and little siblings Tunguska and Baikal</p></figcaption> </figure> <h2>Picking the hardware</h2> <p>This was my first embedded development project so I started off as a complete noob. Enter my brother, Julian. When we were kids, I was more into language, writing and liberal arts-y stuff, so being the younger sibling, he picked a niche for himself that I had nothing to do with: he became an event technician. Over the pandemic, he taught himself programming, too, and has been building cool automations for Raspberry Pi ever since. So he seemed like the perfect person to ask for advice.</p> <p>What I needed for my project felt pretty straightforward: a mechanical arm that’s only able to move horizontally in a straight line, and tilt slightly upwards for the reset. After all, you only pet a cat in the direction of the fur, not backwards. And some way to talk to it over the internet. That must exist, right? Well, it doesn’t really. Julian’s advice: get set up with 3D modelling software, design the arm, get someone to print the parts, assemble it all and trial and error until it works. Or, buy a robot arm kit that does slightly more than I need. I chose the latter and ended up ordering a <a href="https://www.raspberrypi.com/products/raspberry-pi-3-model-b/">Raspberry Pi 3</a> and the <a href="https://www.welectron.com/Waveshare-16376-Robot-Arm-for-Pi-EU">Waveshare 16376 Robot Arm kit</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/6f5ec001d58fba73ec8c83bb4d10efad/3c60f/raspberry-pi_arm.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 29.292929292929294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAb8QSQT/xAAZEAACAwEAAAAAAAAAAAAAAAAAAgEEETL/2gAIAQEAAQUCt61fkl1k/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGxAAAQQDAAAAAAAAAAAAAAAAAAECEUEhMWH/2gAIAQEABj8ClbcZ1ws//8QAGhAAAgIDAAAAAAAAAAAAAAAAAREAITFBYf/aAAgBAQABPyHDFK4INTLQoQoFc//aAAwDAQACAAMAAAAQdC//xAAWEQEBAQAAAAAAAAAAAAAAAAAAATH/2gAIAQMBAT8QuI//xAAWEQEBAQAAAAAAAAAAAAAAAAAAATH/2gAIAQIBAT8Qmq//xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhQXExgf/aAAgBAQABPxC1cqCaBwvbjFtTxd/ZQaGZS3K67P/Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/6f5ec001d58fba73ec8c83bb4d10efad/55fac/raspberry-pi_arm.webp 198w, /static/6f5ec001d58fba73ec8c83bb4d10efad/5b4d3/raspberry-pi_arm.webp 395w, /static/6f5ec001d58fba73ec8c83bb4d10efad/848e4/raspberry-pi_arm.webp 790w, /static/6f5ec001d58fba73ec8c83bb4d10efad/8d239/raspberry-pi_arm.webp 1185w, /static/6f5ec001d58fba73ec8c83bb4d10efad/abbb1/raspberry-pi_arm.webp 1218w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/6f5ec001d58fba73ec8c83bb4d10efad/9db10/raspberry-pi_arm.jpg 198w, /static/6f5ec001d58fba73ec8c83bb4d10efad/16a07/raspberry-pi_arm.jpg 395w, /static/6f5ec001d58fba73ec8c83bb4d10efad/d27a6/raspberry-pi_arm.jpg 790w, /static/6f5ec001d58fba73ec8c83bb4d10efad/0b93b/raspberry-pi_arm.jpg 1185w, /static/6f5ec001d58fba73ec8c83bb4d10efad/3c60f/raspberry-pi_arm.jpg 1218w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/6f5ec001d58fba73ec8c83bb4d10efad/d27a6/raspberry-pi_arm.jpg" alt="Photo of the robot arm and me finding out it needs to be assembled" title="Translation: &quot;Something like this? Woah, so you have to assemble this yourself 😱&quot; – &quot;Haha yeah, what did you expect?&quot;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Translation: “Something like this? Woah, so you have to assemble this yourself 😱” – “Haha yeah, what did you expect?”</p></figcaption> </figure> <h2>Setting up the Raspberry Pi</h2> <p>Two days later, the hardware arrived. I couldn’t wait, so the first thing I tried was connecting to the Raspberry Pi in headless mode, i.e. without a display, keyboard or anything else. After some trial and error and going through various tutorials, I finally found the solution I should have gone with all along: the <a href="https://www.raspberrypi.com/software/">Raspberry Pi Imager</a> app for Mac. It creates a bootable MicroSD and takes care of setting a custom host name, enabling SSH and even connecting to wifi automatically so you can connect to the Raspberry Pi from your computer.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/713577fa09742475f58fc07dab797434/bf788/raspberry-pi_imager.png" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 35.35353535353536%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAACPElEQVR42iWOX0hTcRzFLwX5kpB/ylTIGKURVESUGIRQmxo5r2BCdo0cU3MOtrUt1svc3d2DGoK5B6dEE30oiFAfFILNSvyzcBIpFE642Wqruz3szrva7u6f3zduHTgc+JzzcLDBgceXBgcpn8tFjlFut9f1xON1DXm8FOn2kiQ55ibJZ2aL9eyA3XjB4bCOmExmymazeRwOh8dut3ssFovHZDJRVqt1WK/Xn8RCqysPkgwDSSYBoijB3PQULL58Afm8AMlf//lSINi+HAwaY7EfEIvH4Wc8DjRNQzQahUQiAQzDwB79FeZnZ29h2/TufQT/xDNcSlh7tyxsrn8QWIkXACCnFOHtT/gmHenO5/OQY/f5LM8LfI4XZFlWNor5NJ+Ft+FQI7ZocOoiw9PwbXJO2hryo4/kOPoyOoM+U5NoZ8An7jjHYd7gxF93O3qSoS34k0pLLMuiDMchURQRIKT8kaKLyzDV1teE+Q+e072v64W1O5S03u5GYY0ZRfQU2qjtQgsFtWKg9Do8L6lrHcWO9nyfWVAOi2mWlbnfGTnH87IoCLLCth6OgBsraML8lfW6QGUDLJVrIKi4ogECxzUQKFPDysUO2Lj9CHwV11qfYqq+yMQryEkicPv7EHuzCqndPchwHGQlAbapCaCwYzcxvLCqgiiqbiGKa5qJ4hotUVSt7SxR8rS2o1DVfPewCm88UlV679AJVf/5+i6DBif61TjRdeoy0XvlBmHU4IRB3UIYz1ztbDtQXvYXAHBqQRZkdckAAAAASUVORK5CYII='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/713577fa09742475f58fc07dab797434/55fac/raspberry-pi_imager.webp 198w, /static/713577fa09742475f58fc07dab797434/5b4d3/raspberry-pi_imager.webp 395w, /static/713577fa09742475f58fc07dab797434/848e4/raspberry-pi_imager.webp 790w, /static/713577fa09742475f58fc07dab797434/8d239/raspberry-pi_imager.webp 1185w, /static/713577fa09742475f58fc07dab797434/888d0/raspberry-pi_imager.webp 1580w, /static/713577fa09742475f58fc07dab797434/68526/raspberry-pi_imager.webp 1584w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/713577fa09742475f58fc07dab797434/c7176/raspberry-pi_imager.png 198w, /static/713577fa09742475f58fc07dab797434/50f4b/raspberry-pi_imager.png 395w, /static/713577fa09742475f58fc07dab797434/88e66/raspberry-pi_imager.png 790w, /static/713577fa09742475f58fc07dab797434/4ee41/raspberry-pi_imager.png 1185w, /static/713577fa09742475f58fc07dab797434/7e99c/raspberry-pi_imager.png 1580w, /static/713577fa09742475f58fc07dab797434/bf788/raspberry-pi_imager.png 1584w" sizes="(max-width: 790px) 100vw, 790px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/713577fa09742475f58fc07dab797434/88e66/raspberry-pi_imager.png" alt="Screenshots of the Raspberry Pi Imager app" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>After rebooting my Raspberry Pi, I was finally able to do the following on my Mac and set up Visual Studio Code for <a href="https://code.visualstudio.com/docs/remote/ssh">remote development via SSH</a>.</p> <div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash"><span class="token function">ssh</span> ines@raspberrypi.local ines@raspberrypi:~ $</code></pre></div> <h2>Assembly</h2> <p>This was the part I was most worried about, so I enlisted the help of our 11-year-old Ukrainian guest Yelysei, fellow cat lover and aspiring programmer (he’s pretty good at <a href="https://scratch.mit.edu/">Scratch</a> already) and his 14-year-old sister Emilia, who’s better than me at a lot of things, including making her own clothes and rolling sushi. Over the next couple of hours we actually managed to put it all together, and the only re-adjustments needed were matching up the positions of the little servos to allow the arm to rotate at the correct angles.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/ad1868f0ea28149a66b05fbe17be7c96/e8460/raspberry-pi_assembly.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.37373737373737%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdCcJBL/AP/EABgQAQADAQAAAAAAAAAAAAAAAAECAxIR/9oACAEBAAEFAjXLdkp3o//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/ASf/xAAWEQADAAAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8BbpD/xAAXEAEBAQEAAAAAAAAAAAAAAAAAIQIR/9oACAEBAAY/Aqw5X//EABoQAQEAAwEBAAAAAAAAAAAAAAERACFhMUH/2gAIAQEAAT8hkNILTmPxZd93gZIh8z//2gAMAwEAAgADAAAAEA/v/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAwEBPxBJhT//xAAWEQADAAAAAAAAAAAAAAAAAAAQETH/2gAIAQIBAT8QoQf/xAAdEAEBAAIBBQAAAAAAAAAAAAABEQAhMUFhkbHB/9oACAEBAAE/EA/KUBqu2LApTOmU+OvzJtUgtJye8//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/ad1868f0ea28149a66b05fbe17be7c96/55fac/raspberry-pi_assembly.webp 198w, /static/ad1868f0ea28149a66b05fbe17be7c96/5b4d3/raspberry-pi_assembly.webp 395w, /static/ad1868f0ea28149a66b05fbe17be7c96/848e4/raspberry-pi_assembly.webp 790w, /static/ad1868f0ea28149a66b05fbe17be7c96/8d239/raspberry-pi_assembly.webp 1185w, /static/ad1868f0ea28149a66b05fbe17be7c96/f3741/raspberry-pi_assembly.webp 1338w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/ad1868f0ea28149a66b05fbe17be7c96/9db10/raspberry-pi_assembly.jpg 198w, /static/ad1868f0ea28149a66b05fbe17be7c96/16a07/raspberry-pi_assembly.jpg 395w, /static/ad1868f0ea28149a66b05fbe17be7c96/d27a6/raspberry-pi_assembly.jpg 790w, /static/ad1868f0ea28149a66b05fbe17be7c96/0b93b/raspberry-pi_assembly.jpg 1185w, /static/ad1868f0ea28149a66b05fbe17be7c96/e8460/raspberry-pi_assembly.jpg 1338w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/ad1868f0ea28149a66b05fbe17be7c96/d27a6/raspberry-pi_assembly.jpg" alt="Photo of the parts and us assembling the robot arm" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <h2>Building the front-end</h2> <p>I love front-end and the cat petting UI was the part of the project that was easiest to imagine: a hand that follows your cursor and tracks the start and end position of the cursor as you drag across the screen. I only wanted to allow horizontal petting in one direction, so all the app needed to track is the <code>clientX</code>. Assuming the browser width corresponds to the full pettable cat surface, the <code>start</code> and <code>end</code> position can be calculated as a percentage relative to the full with. It’s all implemented in vanilla JavaScript and you can view the source <a href="https://github.com/ines/shitty-cat-petting-robot/blob/master/app/app.js">on GitHub</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/7e7174c1a06d7e5641d3e6d563a8728a/219e3/raspberry-pi_app.png" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 70.70707070707071%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEBklEQVR42qXM20+bdRwG8Dde7NYL9cILE52LqIscBryMDhgnObScCqXtKn05teNQaKFjhZZTKaOcKYfRAWXTCYOGuTEEFzXDkEWjU8ANUcDh2KK4TF5mGOe+fX+PGdl/4MUnT75PnnypyYnJVzY31gz/bm+a2PUN4+b2nnF7jzNubO0ad138ga2dfePOHmfc2Xcbt3ZdB3Zd7hf4sn0Xb3q2tVPy3fc/vkZ1NjfQj5buYXVlEUvzP2P2zrdY+mUG9+dn8PuLfHR/Hsu/3T24HyzOYWVp7mCzeO8n/PVgEY//XMbD5QVcdQ6eoMKPvk4XhB3eb8k66R6slHMXtNFcb0EEN1Qu5hy6GM4q8+U+NiRz15pOcxMdBdyX3TpuvC2PG66ScdfqlNyVahnXoU/iBxvyd63FcgEl9H2LbsmNcduLk1CV6keqxJ6kMuEoOZ8fRWzZoWSkOoFMtKWS6/UMGWvMJCM1cjLpMJCx1lzitCjJzfZcMmplMFKrcNXrpQIqWfAObcuLddczwaiQ+BGLMhhN6ki0qMJxoy4Om7OF2PlVi8k+KfoKo+GsluFmRx56i0SwMiEoS/QirTlRaNfEuUzZcQIqzv8IbZIEuCvEXrCkehOD6H3UfSRAkyoUq7dzsD2rgXtBh1v9UnTkijDRUYDRNg0cZxLRVRADS1oQaVRFwlaY6MoSBgio2GNv0tro99xliV4oF3uTCokvaqT+6NML8eQHDXYXdCAP9Zi6nIFbfQzG29MxZFaiMy8KTguDq9YM0pAeBJOEdoV5vCqgMkUBdKUi2G1mwtCpjSfnmBDUKE6gSyvEP9MauFbO4NmMBk+ndZgeS8eAWYHxthzUZ4bjvDYeFw0p5JPKNNh0YpfiQ18BlS46Tjeqo9w1yhBc0CeRi+UK9JTKMWjJxN93tMCKHjt3C4EnZ/FZmxxOM4NvHEX4qluL3lI5WnNjyEhdOj6tVroq81IElND/CH1W7O82SmhcKJGQ660a9BvlcFpP43K1GH9MqbE+V4gv+uUwp0fCJPaBTR2Kr3v0GG1UwaqgSa30GOxFCS5DVoKAkob70PbSU1xdViSxG6S8s17Nd+uTeXtJCt+iSeKfdwO1Sr427SRvyxfymhhPXhvryQ9bVbxdK+LNKV7u5qxQMlCdtl+VlySgRP5vH7ekBaNWEQhHqRSXTDJ0FyXAYTyF24Nm9Jemok4RiB5dLMZa1Pi8RQWHUY5LlQyuWBg0qSLQpY3HjXYdytXxQZT3Gy9758Z4Pi4W0+tVTPiaSRbI6oQfsL0VDDvcrGGzw99lM0I92BJZMFvBRLDDjTns1NA51laUwhol/mxJos9amTTwqd2UtqpTxvpRFPXSIYqiDlMU5fE/Pf9x6D8O9njaqvdO7gAAAABJRU5ErkJggg=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/7e7174c1a06d7e5641d3e6d563a8728a/55fac/raspberry-pi_app.webp 198w, /static/7e7174c1a06d7e5641d3e6d563a8728a/5b4d3/raspberry-pi_app.webp 395w, /static/7e7174c1a06d7e5641d3e6d563a8728a/848e4/raspberry-pi_app.webp 790w, /static/7e7174c1a06d7e5641d3e6d563a8728a/8d239/raspberry-pi_app.webp 1185w, /static/7e7174c1a06d7e5641d3e6d563a8728a/888d0/raspberry-pi_app.webp 1580w, /static/7e7174c1a06d7e5641d3e6d563a8728a/fdd3a/raspberry-pi_app.webp 2458w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/7e7174c1a06d7e5641d3e6d563a8728a/c7176/raspberry-pi_app.png 198w, /static/7e7174c1a06d7e5641d3e6d563a8728a/50f4b/raspberry-pi_app.png 395w, /static/7e7174c1a06d7e5641d3e6d563a8728a/88e66/raspberry-pi_app.png 790w, /static/7e7174c1a06d7e5641d3e6d563a8728a/4ee41/raspberry-pi_app.png 1185w, /static/7e7174c1a06d7e5641d3e6d563a8728a/7e99c/raspberry-pi_app.png 1580w, /static/7e7174c1a06d7e5641d3e6d563a8728a/219e3/raspberry-pi_app.png 2458w" sizes="(max-width: 790px) 100vw, 790px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/7e7174c1a06d7e5641d3e6d563a8728a/88e66/raspberry-pi_app.png" alt="Screenshot of the app showing a hand cursor" title="The final app: it allows you to click and drag to pet" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>The final app: it allows you to click and drag to pet</p></figcaption> </figure> <h2>Writing the back-end code</h2> <p>The robot arm I chose came with <a href="https://www.waveshare.com/wiki/Robot_Arm_for_Pi">sample Python code</a>, which was very helpful to get started. However, it was also slightly messy and didn’t use type hints or follow the consistent style I normally like to use in my projects. So as a first step, I started to rewrite it. Refactoring, documenting and adding type hints is one of my go-to ways to get across a new code base.</p> <p>Good editor support is crucial here and I can’t recommend it enough. Visual Studio Code and the <a href="https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance">Pylance</a> extension do an excellent job at inferring types from existing functions. Once everything is neatly organised and typed, it’s much easier to understand what’s going on, and how data flows through the robot arm driver. To better manage the interactions I needed, I implemented a custom <code>Controller</code> class with the methods <code>reset</code> (reset arm to start position), <code>set</code> (set arm position) and <code>move</code> (move arm from current position).</p> <p>While the original code sample uses websockets, which adds another layer of complexity, I figured I’d be fine with a simpler REST API powered by <a href="https://fastapi.tiangolo.com/">FastAPI</a>, <a href="https://docs.pydantic.dev/">Pydantic</a> and <a href="https://www.uvicorn.org/">Uvicorn</a>. What I really needed was one endpoint to submit the start and end position to:</p> <div class="gatsby-highlight" data-language="python"><pre class="language-python"><code class="language-python"><span class="token decorator annotation punctuation">@app<span class="token punctuation">.</span>post</span><span class="token punctuation">(</span><span class="token string">"/pet"</span><span class="token punctuation">)</span> <span class="token keyword">def</span> <span class="token function">pet</span><span class="token punctuation">(</span>data<span class="token punctuation">:</span> Instructions<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span> <span class="token boolean">None</span><span class="token punctuation">:</span> ctrl<span class="token punctuation">.</span><span class="token builtin">set</span><span class="token punctuation">(</span><span class="token string">"rotate"</span><span class="token punctuation">,</span> <span class="token builtin">int</span><span class="token punctuation">(</span><span class="token number">45</span> <span class="token operator">+</span> data<span class="token punctuation">.</span>start <span class="token operator">*</span> <span class="token number">90</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment"># rotate to start position</span> ctrl<span class="token punctuation">.</span>move<span class="token punctuation">(</span><span class="token string">"y"</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">40</span><span class="token punctuation">)</span> <span class="token comment"># lower arm</span> ctrl<span class="token punctuation">.</span>move<span class="token punctuation">(</span><span class="token string">"rotate"</span><span class="token punctuation">,</span> <span class="token builtin">int</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>end <span class="token operator">*</span> <span class="token number">90</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment"># rotate to end position</span> ctrl<span class="token punctuation">.</span>move<span class="token punctuation">(</span><span class="token string">"y"</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">)</span> <span class="token comment"># move arm back up</span></code></pre></div> <p>You can view the full server code <a href="https://github.com/ines/shitty-cat-petting-robot/tree/master/server">on GitHub</a>. The app runs entirely on the Raspberry Pi and can be exposed over the public internet using a service like <a href="https://ngrok.com/">ngrok</a> so others can operate it from anywhere.</p> <h2>The result</h2> <p>After attaching the brush, part of an old <a href="https://www.tangleteezer.com/">Tangle Teezer</a>, I was finally able to test the result. A true shitty robot, absolutely not fit for purpose and guaranteed to make your cats run away in horror. But it was mine, and I had built and programmed it myself more or less from scratch! It was ridiculous, but incredibly satisfying.</p> <video controls> <source src="/raspberry-pi_result.webm" type="video/webm"> <source src="/raspberry-pi_result.mp4" type="video/mp4"> </video> <p>In hindsight, it would have been a better choice to build a remote cat toy with a laser pointer attached and I might repurpose my robot for that in the future. For now, I’ll resort to petting my cats manually.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/fa5b4ea7b5c4e685e8788fb098f24c6b/6f725/raspberry-pi_petting.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 58.58585858585859%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAACAf/aAAwDAQACEAMQAAABI2XNbKgf/8QAGhAAAgMBAQAAAAAAAAAAAAAAAQIAAxIRE//aAAgBAQABBQJTuVLuFF7WAK1Y+rT/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAIAQMBAT8BiY//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8BbX//xAAbEAACAgMBAAAAAAAAAAAAAAAAAQIREDFxUf/aAAgBAQAGPwJqNcPKYxNbon3H/8QAGRABAQEBAQEAAAAAAAAAAAAAARExAFGx/9oACAEBAAE/IXhY49hqt3ktdfM4kit8Mb6+cIjdK9//2gAMAwEAAgADAAAAEFjv/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAEDAQE/EBCv/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERMUH/2gAIAQIBAT8Qmxo0/8QAHhABAAMAAgIDAAAAAAAAAAAAAQARITFRQWFxkbH/2gAIAQEAAT8QINJgY18xvhoa6xoPM7YSn6ILkS67TtX1rCNSic4cfjKiVn7Gf//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/fa5b4ea7b5c4e685e8788fb098f24c6b/55fac/raspberry-pi_petting.webp 198w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/5b4d3/raspberry-pi_petting.webp 395w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/848e4/raspberry-pi_petting.webp 790w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/8d239/raspberry-pi_petting.webp 1185w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/888d0/raspberry-pi_petting.webp 1580w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/4c478/raspberry-pi_petting.webp 2381w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/fa5b4ea7b5c4e685e8788fb098f24c6b/9db10/raspberry-pi_petting.jpg 198w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/16a07/raspberry-pi_petting.jpg 395w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/d27a6/raspberry-pi_petting.jpg 790w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/0b93b/raspberry-pi_petting.jpg 1185w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/8f04a/raspberry-pi_petting.jpg 1580w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/6f725/raspberry-pi_petting.jpg 2381w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/fa5b4ea7b5c4e685e8788fb098f24c6b/d27a6/raspberry-pi_petting.jpg" alt="Photos of Rizhik being petted manually" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p><link-button href="https://github.com/ines/shitty-cat-petting-robot" icon="github">Code on GitHub</link-button></p><![CDATA[Building Prodigy: Our new tool for efficient machine teaching]]>https://ines.io/blog/prodigy-annotation-toolhttps://ines.io/blog/prodigy-annotation-toolSat, 05 Aug 2017 00:00:00 GMT<p>I’m excited and proud to finally share what we’ve been working on since <a href="/blog/announcing-explosion-ai">launching Explosion AI</a>, alongside our <a href="/blog/spacy-commercial-open-source">NLP library spaCy</a> and our consulting projects. Prodigy is a project very dear to my heart and seeing it come to life has been one of the most exciting experiences as a software developer so far.</p> <p>A lot of the consulting projects we’ve worked on in the past year ended up circling back to the problem of <strong>labelling data to train custom models</strong>. Data annotation can be very tedious and time consuming. You need to select the examples, write manuals and hire annotators for the boring work. As a result, many companies dread this process. I’ve always had a hard time accepting that this was simply <em>how things are</em>.</p> <p>When we first started working on the idea of a better, more efficient annotation tool, we were met with some skepticism. “Annotation is boring, that’s just how it is. Why do you care about making it enjoyable?” Conversations like these were what inspired <a href="/blog/how-front-end-can-improve-ai">last year’s post</a> about huge potential of better tooling and UX for AI development.</p> <blockquote> <p>In many cases, the creation of annotated data can seem like the ultimate unskilled labour. This suggests a tempting theory: annotation time should be dirt cheap, right? If so, then investment in annotation tools should be a waste. Just buy more labour. I think if you try this, you’ll see that people don’t behave so simply. The workers you’re hoping to hire so cheaply are homo sapiens, not homo economicus.</p> <p><a href="https://explosion.ai/blog/how-front-end-can-improve-ai">How front-end development can improve Artificial Intelligence</a></p> </blockquote> <p>Prodigy takes this idea one step further, by letting developers and data scientists <strong>train models interactively</strong>, test out ideas and collect annotations themselves. Instead of wasting a human’s time with boring interfaces and repetitive questions, it uses what the model already knows to suggest what to ask next, and reduces the annotation to a simple, binary decision: yes or no. It’s a <strong>downloadable tool</strong> with a powerful command-line interface for <strong>training and evaluating</strong> models, and a flexible <strong>web application</strong> for collecting annotations straight from the browser.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/cc9d8f70f56ab99a6eefbb2666502276/3d1a1/prodigy.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 51.010101010101%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAa+ghLGh/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAECERP/2gAIAQEAAQUCVV31E7hCXQ//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAABBAMBAAAAAAAAAAAAAAABABARMQIhIkH/2gAIAQEABj8CxHQE+q1sy1N//8QAGxABAQACAwEAAAAAAAAAAAAAAREAECExQVH/2gAIAQEAAT8hqihUXeXYC4Dwl9Cav8PfNf/aAAwDAQACAAMAAAAQIM//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEBAAMAAwAAAAAAAAAAAAABEQAhURBBcf/aAAgBAQABPxA9IQaDfQ1gzK6nHIC69FPlcAUpcqN92jvj/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/cc9d8f70f56ab99a6eefbb2666502276/55fac/prodigy.webp 198w, /static/cc9d8f70f56ab99a6eefbb2666502276/5b4d3/prodigy.webp 395w, /static/cc9d8f70f56ab99a6eefbb2666502276/848e4/prodigy.webp 790w, /static/cc9d8f70f56ab99a6eefbb2666502276/8d239/prodigy.webp 1185w, /static/cc9d8f70f56ab99a6eefbb2666502276/888d0/prodigy.webp 1580w, /static/cc9d8f70f56ab99a6eefbb2666502276/527b8/prodigy.webp 2846w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/cc9d8f70f56ab99a6eefbb2666502276/9db10/prodigy.jpg 198w, /static/cc9d8f70f56ab99a6eefbb2666502276/16a07/prodigy.jpg 395w, /static/cc9d8f70f56ab99a6eefbb2666502276/d27a6/prodigy.jpg 790w, /static/cc9d8f70f56ab99a6eefbb2666502276/0b93b/prodigy.jpg 1185w, /static/cc9d8f70f56ab99a6eefbb2666502276/8f04a/prodigy.jpg 1580w, /static/cc9d8f70f56ab99a6eefbb2666502276/3d1a1/prodigy.jpg 2846w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/cc9d8f70f56ab99a6eefbb2666502276/d27a6/prodigy.jpg" alt="Prodigy application" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>While the web application was what originally inspired Prodigy, it quickly grew into a more complex “machine teaching” tool. At the core of it are <strong>recipes</strong>, Python functions that orchestrate data streams, update the model and if necessary, start the web server to collect annotations. In other cases, recipes can simply run a training loop, or evaluate an already trained model using an evaluation set created with Prodigy. There are <a href="https://prodi.gy/docs/recipes">built-in recipes</a> for training models with live annotations, recipes to batch train from already annotated datasets, recipes to test different training configurations and recipes to evaluate trained models.</p> <p>A big challenge when designing user APIs is keeping the right balance between <strong>out-of-the-box functionality</strong>, <strong>simplicity</strong>, and <strong>extensibility</strong>. How much can you assume about a user’s workflow? Where do you offer built-in hooks, and when, how and where do you ask the user to customise? Recipes seemed to be the best way to address this problem: the built-in ones cover most basic use cases, while custom recipes allow executing any Python code and returning a dictionary of components to use.</p> <div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash">prodigy my_recipe my_dataset -F my_recipe.py</code></pre></div> <div class="gatsby-highlight" data-language="python"><pre class="language-python"><code class="language-python"><span class="token decorator annotation punctuation">@prodigy<span class="token punctuation">.</span>recipe</span><span class="token punctuation">(</span><span class="token string">'my_recipe'</span><span class="token punctuation">)</span> <span class="token keyword">def</span> <span class="token function">my_recipe</span><span class="token punctuation">(</span>dataset<span class="token punctuation">)</span><span class="token punctuation">:</span> model <span class="token operator">=</span> load_my_model<span class="token punctuation">(</span><span class="token punctuation">)</span> stream <span class="token operator">=</span> load_my_stream<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token string">'dataset'</span><span class="token punctuation">:</span> dataset<span class="token punctuation">,</span> <span class="token string">'stream'</span><span class="token punctuation">:</span> stream<span class="token punctuation">,</span> <span class="token string">'update'</span><span class="token punctuation">:</span> model<span class="token punctuation">.</span>update<span class="token punctuation">}</span></code></pre></div> <h2>Why Prodigy is cloud-free</h2> <p>Prodigy will be a downloadable tool with a lifetime license, that you can install and run yourself – not a subscription service. This has become an unusual choice for a software startup. SaaS is a very popular business model and supposedly “the way to go”, because it promises repeat revenue and is very attractive to investors. However, not all tools are a good fit for a service model. Making Prodigy work “in the cloud” would mean taking away most of its benefits: running it on your local machine, streaming in your own data without having to upload it to a third-party server and easily configuring it with simple Python scripts.</p> <p>For now, Prodigy’s main focus is making data science workflows easier, and allowing rapid iteration on <em>both</em> the code and the data. Because annotations can be collected quicker and models require less annotations to produce first results, it’s easier to conduct supervised learning experiments and find out whether an idea is working or not. This works best with extensible tools, not services.</p> <p>Without a service layer, there was one problem, though: securely <strong>sharing annotation projects</strong> online, for example, to use Prodigy on your phone, or send the project over to a colleague or an external annotator. Running it on your server with a password-protected front-end is possible, but inconvenient. Ultimately, we decided on an end-to-end encrypted REST service that communicates with the user’s local machine. Annotation tasks are encrypted locally and decrypted only on the client in the web app by the annotator. The only data that will leave the user’s servers and hit ours is encrypted annotation tasks.</p> <h2>Next steps</h2> <p>Prodigy is currently in beta – you can still apply via the <a href="https://prodi.gy">the website</a>. Many of the beta signups we’ve received so far included interesting usage ideas from all kinds of different fields. We’re looking forward to shipping Prodigy to developers so it can be put to work.</p> <p>To read more about Prodigy and see it in action, you can check out our <a href="https://explosion.ai/blog/prodigy-annotation-tool-active-learning">blog post</a>, see the <a href="https://prodi.gy/docs">more detailed docs</a> and play with the <a href="https://prodi.gy/demo">live demo</a>.</p><![CDATA[Reflections on running spaCy: commercial open-source NLP]]>https://ines.io/blog/spacy-commercial-open-source-nlphttps://ines.io/blog/spacy-commercial-open-source-nlpWed, 10 May 2017 00:00:00 GMT<p>As more and more people and companies are getting involved with open-source software, balancing the expectations of an open community and a traditional provider vs. consumer relationship is becoming increasingly difficult. Are maintainers becoming too authoritarian? Are users becoming too demanding? Are large companies selling out open-source?</p> <p>In this post I’ll share some lessons we’ve learned from running <a href="https://spacy.io">spaCy</a>, the popular and fast-growing library for Natural Language Processing in Python. I’ll also give you my perspective on how to make commercial open-source work for both users and developers.</p> <h2>Unpacking open-source</h2> <p>Looking at the open-source ecosystem as one giant space with a fixed set of rules and best practices can be problematic and frustrating. It’s frustrating for maintainers of private projects, who end up overwhelmed by the flood of bug reports and often demanding support requests. It’s frustrating for companies who open-source their tools and are suddenly expected to get as many contributors involved as possible. And it’s frustrating for users, who keep getting told to “submit a PR or shut up”, and are struggling to decide which project to adopt and trust.</p> <p>Most open-source projects roughly fall into one of three categories:</p> <table> <thead> <tr> <th> </th> <th align="center"><h4>Private</h4><em>“I made a thing and it’s over here.”</em></th> <th align="center"><h4>Community</h4><em>“Let’s make a thing together.”</em></th> <th align="center"><h4>Commercial</h4><em>“We made a product and it’s free.”</em></th> </tr> </thead> <tbody> <tr> <td><strong>Maintainer Control</strong></td> <td align="center">high</td> <td align="center">low</td> <td align="center">high</td> </tr> <tr> <td><strong>Maintainer Responsibility</strong></td> <td align="center">low</td> <td align="center">medium</td> <td align="center">high</td> </tr> <tr> <td><strong>User Responsibility</strong></td> <td align="center">high</td> <td align="center">high</td> <td align="center">low</td> </tr> </tbody> </table> <p>Private projects are usually maintained by one person making most of the decisions, but bearing little responsibility. After all, it’s just a person sharing their code or showcasing their work, hoping it might be useful to others. Community projects tend to make decisions collectively: maintainers take responsibility for the software, but ultimately, users are expected to get involved, instead of only making demands. In return, they get a say in the project direction.</p> <p>Commercial projects on the other hand generally stay more centralised: maintainers often run a business related to their software and retain more control over their project, while investing more resources and expecting less of their users. Even projects by very large companies like Google and Facebook with sizable developer communities roughly follow the same line of thought.</p> <h2>A case for centralised, commercial open-source</h2> <p>In many ways, <a href="https://spacy.io">spaCy</a> is a pretty typical commercial open-source project. It’s developed and maintained by mostly two people – Matt and me. spaCy puts our work in front of many developers, which has allowed us to bootstrap our company <a href="https://explosion.ai">Explosion AI</a> independently through consulting work while keeping our software free.</p> <p>spaCy’s strength is that it’s easy to use, fast and opinionated. There’s only one implementation of each component, and we’re trying to make it the best possible one. At the same time, the core of spaCy is inherently hard to contribute to. It’s fast because it’s written in <a href="http://cython.org/">Cython</a>, a relatively niche language. The API is easy to use because it’s cohesive and was mostly written by a single author.</p> <p>All of this makes spaCy a good fit for production use, and we’re excited to see more and more companies using it to power great products. But growth also comes with responsibility. By making the choice to adopt our open-source software, our users are offering us a large amount of trust upfront. <strong>We’re asking for that trust, so we need to keep up our end of the bargain</strong>. If something is broken, <em>we</em> need to fix it. If we rely on users to report problems, <em>we</em> better make their experience pleasant. If we’re encouraging people to use spaCy in production, <em>we</em> are responsible for making it work. And if we want to keep spaCy cohesive and maintain attention to detail, <em>we</em> need to take the lead.</p> <p>As we’re moving into a phase with more options for contributions, we want to encourage them where they make the biggest difference: language data, interoperation, tests and documentation. After we provided more docs and refactored our website’s markup language, we saw a big increase in small pull requests – from fixing minor typos in the docs (I admire everyone who goes out of their way to do this!) to adding tokenizer exceptions for Bengali or Hebrew.</p> <p>Our community consists of people with very different backgrounds and motivations – developers who’ve been working in computational linguistics since before it was cool, deep learning engineers training models with text input, data scientists and digital humanities researchers, mobile app developers working on their first bot and computer science students looking to get started. (For the record, my background is front-end development, marketing and linguistics.) <strong>AI is not a field of homogenous skills and experiences</strong>, and if we want to build great software, need to adapt the way we think about community-driven development.</p> <h2>Challenges for open-source NLP</h2> <p>One of the biggest challenges for Natural Language Processing is dealing with fast-moving and unpredictable technologies. Most open-source development follows a basic assumption: There’s a bug, and there’s a fix. There’s a feature, and there’s an implementation. The quality of the code may vary and there are always trade-offs. But ultimately, there’s a path, and there’s a goal. This is a lot less true in AI or NLP.</p> <p>Since spaCy was released, the best practices for NLP have changed considerably. This also means that the library has had to change a lot. For instance, dependency labels used to be much more relevant – now, our biggest focus is getting spaCy up to speed with deep learning. However, new features and enhancements are still based on very subjective assumptions about how people are going to do NLP in the future. And it’s not only about code. There’s another component that’s just as important: <strong>statistical models</strong>.</p> <p>In the past, spaCy’s models had to be downloaded via a server maintained by us. Although they played a huge part in spaCy’s performance, they were mostly hidden away from the user. This was problematic – black-boxing technology is pretty much the opposite of what we want to stand for. But how do you “open-source” large binary data?</p> <p>In spaCy v1.7, we finally introduced a <a href="https://spacy.io/docs/usage/saving-loading">new way of loading models</a>, by wrapping them as Python packages that can be installed via pip. All files are also available attached to individual <a href="https://github.com/explosion/spacy-models/releases">GitHub releases</a>, containing more information on the model’s capabilities, license and data. We’ve also included a model packaging tool in spaCy’s CLI so users can package their own models.</p> <p>Aside from the obvious advantages, like native versioning and pip installation, model as packages send a much more <strong>reasonable message</strong>: A model is a component of your application, just like any other dependency. In reality, there’s not one “the model”. There can be many different ones with different capabilities, that will produce very different results depending on what you do with them. You can train your own models from scratch, or update existing ones. And you can package and share your models with the community, just like we do.</p> <h2>Giving projects a voice</h2> <p>Whether you want it or not, your project will have a voice. Yours. This includes everything you say and do – from documentation you write to issues you answer. If a project sends mixed messaging, it causes confusion and conflicts. The website says “Use our software!”, while the maintainers say “PR or GTFO”. The community guidelines say that “there are no stupid questions, just stupid answers”, while the maintainers mock their user’s issues on Twitter. Being rude is not quirky, and it doesn’t save you any time or money either. People will not appreciate your work more if you put them down.</p> <p>This is also important to keep in mind when talking about diversity in open-source and building an inclusive community. It’s not enough to simply adopt community standards and state that “everybody’s welcome”. If this is what you believe in, it also needs to be reflected in the overall messaging of your project. (GitHub’s <a href="https://opensource.guide/building-community/">Open Source Guide</a> has a nice summary on this topic.) There’s also a difference between giving detailed guidance, and enforcing strict rules. People are less likely to invest time and contribute to a project if there’s a high potential of “doing things wrong” — either due to lack of clarity, or arbitrary and overly rigid rules where every deviation will be scrutinised.</p> <p>Another root cause of mixed messaging is a lack of predictability. Users and contributors should know where the project is going – even if ultimately, the maintainers are going to be the ones making the decisions. <a href="https://medium.com/swlh/the-unreliable-startup-69461f629383">Unreliable startups</a> and their amazing journeys have made people wary of being lured in with big promises, only to be let down.</p> <p>One of our goals for spaCy is to focus on communicating our plans and ideas more openly. This is one of the downsides of being such a small team: a lot of decisions happen in one or two heads, which deprives the community of insights into the process. Some of our decisions have been <a href="https://github.com/explosion/spaCy/issues/962">more controversial</a> than others, but no matter how much thought we put into them, it becomes irrelevant if we don’t talk about it publicly. (Docker’s <a href="https://github.com/moby/moby/pull/32691">recent fiasco</a> is an example of how this can go very wrong and cause a lot of frustration.)</p> <h2>Avoiding issue tracker bankruptcy</h2> <p>By running spaCy in a centralised way, we accept that we have to be the main source of support for now. This is hard, and we’ve not always been doing a great job at this. It’s easy to get get stressed out when seeing the issue count go up and falling behind on maintenance. We’ve all seen it before in other projects: issues keep piling up and the maintainers, unable to keep up, eventually declare issue tracker bankruptcy.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; " > <a class="gatsby-resp-image-link" href="/static/e01c7326e8deb5bf061bea74e956066e/8a7c7/open-source_bankruptcy.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 15.656565656565657%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAADABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3AUH/8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABBQJ//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAGBAAAgMAAAAAAAAAAAAAAAAAAAERIUH/2gAIAQEAAT8hek2I/9oADAMBAAIAAwAAABDzz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAQACAwAAAAAAAAAAAAAAAAEAESExUf/aAAgBAQABPxBoUXcVQvkamWf/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/e01c7326e8deb5bf061bea74e956066e/55fac/open-source_bankruptcy.webp 198w, /static/e01c7326e8deb5bf061bea74e956066e/5b4d3/open-source_bankruptcy.webp 395w, /static/e01c7326e8deb5bf061bea74e956066e/bc8a3/open-source_bankruptcy.webp 590w" sizes="(max-width: 590px) 100vw, 590px" type="image/webp" /> <source srcset="/static/e01c7326e8deb5bf061bea74e956066e/9db10/open-source_bankruptcy.jpg 198w, /static/e01c7326e8deb5bf061bea74e956066e/16a07/open-source_bankruptcy.jpg 395w, /static/e01c7326e8deb5bf061bea74e956066e/8a7c7/open-source_bankruptcy.jpg 590w" sizes="(max-width: 590px) 100vw, 590px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/e01c7326e8deb5bf061bea74e956066e/8a7c7/open-source_bankruptcy.jpg" alt="Screenshot of GitHub tab bar with lots of issues and pull requests" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>We try to label issues as they come in, even if we don’t have time to reply or get to the bottom of them. Of course, reorganising the reports won’t actually fix any bugs – but it makes it much easier to work through them systematically. It also sends a message to our users: your report has been acknowledged and we’re on it.</p> <p>As we tackle larger improvements to the library, we make a list of related issues and merge them all into one master issue that summarises the problem and planned solution. This lets us communicate our plans and add valuable information, while reducing overhead – and closing a bunch of issues at once! If the master issue is self-contained and easy to fix, we’ll add a <code>help wanted</code> label to offer it for contributions. If somebody else wants to take it on, they’ll already have all the instructions they need, plus a handy list of related issues for reference.</p> <p>Another tool that has made a huge impact is <a href="https://gitter.im/explosion/spaCy">Gitter</a>, a chat client that integrates with GitHub. With the Gitter widget added to our website, users can even chat while browsing the documentation. It’s a great way to connect with our community, find out what people are working on, answer simple questions and discuss topics related to spaCy and NLP. The more we learn about people’s workflows and what they’re trying to achieve, the better we’ll become at anticipating what’s needed to solve future NLP problems. After all, we’re not just fixing bugs here.</p> <p>With almost 400 members, we don’t always get around to answering <em>every</em> question. But it also means other people can step in. It always makes me happy to see community members helping each other – whether it’s fixing a bug in someone else’s code, or exchanging contact details to work on language models together.</p> <h2>Monetising open-source without selling your docs</h2> <p>We often get asked why we don’t accept donations. While it’s flattering to hear that people like the project and want to support it, we’ve decided to keep a stricter separation between our free software and how we’re making money.</p> <p>Services like <a href="https://gratipay.com">Gratipay</a>, <a href="https://www.bountysource.com">BountySource</a> or <a href="https://www.patreon.com">Patreon</a> are great for personal projects and offer a quick and effective way of saying “thank you”. So is selling merchandise. But for a commercial project, monetising your user’s gratitude is a pretty bad business model. Ultimately, it comes down to this: Are you a business, or a charity? If you’re not a charity, it’s not even possible for companies to “just give you money”. Instead, you’re asking private people to fund a project so companies can profit from it for free.</p> <p>For a long time, the predominant idea of monetising an open-source project was offering a commercial version, enterprise offerings, “OSSaaS” or paid support. Even today, some people still seem to believe that those are the only options. <strong>The problem is that the incentives here are entirely misaligned</strong>. If you’re making money off helping people use your software, you need to be strategic about the help you provide for free. No matter how you twist it, you’ll eventually end up in a deadlock: If your software becomes better and more popular, you’ll lose business, as other people become less dependent on you for services and support. If it doesn’t, you’ll keep losing even faster, as your software is the only source of new customers.</p> <p>The good news is: If your users like your software, it’s clearly solving a problem for them. If they build a business on top of it, even more so. This gives you a unique perspective on people’s needs and a lot of valuable relationships. What you go on to offer them commercially doesn’t have to be tightly coupled to your open-source project. In fact, it’s often best if it isn’t.</p> <p>Our users like spaCy because they’re building applications using NLP and want to do this as efficiently as possible. spaCy’s capabilities are all pretty useful in themselves – but they only become really valuable in combination with data. This is what makes open-source NLP and machine learning software different from a lot of other open-source tools. If you’re serious about what you’re doing, you’ll eventually need models that go far beyond general-purpose language models, and you want to train and update them with your own data. Software can help you achieve this – but it won’t do all the work for you.</p> <p>We believe that our users will get the most value out of tools and data assets they can own and keep. We’re still working on our line of products and I hate talking too much about what we’re <em>going to do</em>, it just makes me impatient. But we hope we’ll be able to keep providing value to our users – both in the open-source library and with product offerings.</p><![CDATA[The wired brain: How not to talk about an AI-powered future]]>https://ines.io/blog/wired-brain-ai-powered-futurehttps://ines.io/blog/wired-brain-ai-powered-futureThu, 09 Mar 2017 00:00:00 GMT<p>The way we talk about AI is a mess. It starts with the most obvious, the imagery. Just like stock photos of happy people pointing at whiteboards were a symbol of the modern workplace, wired brains and robots have now come to represent “the AI”. But the visual messaging is only a small part of a much larger problem.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/89fe4e9872b0b8413713d6a3f07ccedd/03ffe/wired-brain_imagery.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 73.23232323232322%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAABA//aAAwDAQACEAMQAAABmt52qzQNF//EABsQAQACAgMAAAAAAAAAAAAAAAIDEwABESEx/9oACAEBAAEFAhJ2nZFWsHlnGSNaX//EABgRAAIDAAAAAAAAAAAAAAAAAAABEiEx/9oACAEDAQE/AVWE2f/EABcRAAMBAAAAAAAAAAAAAAAAAAABIVH/2gAIAQIBAT8Ba0p//8QAGhAAAgMBAQAAAAAAAAAAAAAAAAECETEhQf/aAAgBAQAGPwKLrCceq16eGCp6cP/EABsQAQACAwEBAAAAAAAAAAAAAAEAIRExUUFx/9oACAEBAAE/ITKu9nyOCBt0j5qOhOVAXcEBkwvJ5MIAB2f/2gAMAwEAAgADAAAAENc//8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARQf/aAAgBAwEBPxDAhwb/xAAXEQADAQAAAAAAAAAAAAAAAAABEBFR/9oACAECAQE/EDXS/wD/xAAbEAEBAAMBAQEAAAAAAAAAAAABEQAhMVFh8f/aAAgBAQABPxBLEAMWP6w0ZtYVptMNNZ0iJ7gVMkNbudjm/wBwFg6Z5zIvhILNv3P/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/89fe4e9872b0b8413713d6a3f07ccedd/55fac/wired-brain_imagery.webp 198w, /static/89fe4e9872b0b8413713d6a3f07ccedd/5b4d3/wired-brain_imagery.webp 395w, /static/89fe4e9872b0b8413713d6a3f07ccedd/848e4/wired-brain_imagery.webp 790w, /static/89fe4e9872b0b8413713d6a3f07ccedd/8d239/wired-brain_imagery.webp 1185w, /static/89fe4e9872b0b8413713d6a3f07ccedd/cbd37/wired-brain_imagery.webp 1200w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/89fe4e9872b0b8413713d6a3f07ccedd/9db10/wired-brain_imagery.jpg 198w, /static/89fe4e9872b0b8413713d6a3f07ccedd/16a07/wired-brain_imagery.jpg 395w, /static/89fe4e9872b0b8413713d6a3f07ccedd/d27a6/wired-brain_imagery.jpg 790w, /static/89fe4e9872b0b8413713d6a3f07ccedd/0b93b/wired-brain_imagery.jpg 1185w, /static/89fe4e9872b0b8413713d6a3f07ccedd/03ffe/wired-brain_imagery.jpg 1200w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/89fe4e9872b0b8413713d6a3f07ccedd/d27a6/wired-brain_imagery.jpg" alt="A collage of stock photos and illustrations used to visualise AI, including a wired brain, robots and cyborgs" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <image-caption> <p>Sources: <a href="http://www.wallpaperhd.pk/machine-learning-smart-brain-wallpaper/">WallpaperHD</a>, <a href="http://www.gettyimages.com">GettyImages</a>, <a href="https://codepen.io/chriscoyier/post/code-in-stock-photos">CodePen</a></p> </image-caption> <p>Illustration is symbolic — it relies on familiarity and evokes associations and expectations. The “wired brain” is pretty straightforward in that way: Intelligence is rooted in our brains, and we want to replicate some of the decisions made by our brains using technology. As technology progresses, it’s steadily competing with our brains, becoming the ultimate extension of man. But the above imagery also sends a different message: there’s an end game, and AI development is merely the search for a key to finally unlock Artificial General Intelligence.</p> <p>This narrative is misleading and deceptive, because it presents the technology as a monolithic, all-or-nothing endeavor, benchmarked against a human. It sets high expectations, but reveals very little and perpetuates the stereotype of AI as a magical black box. I think there’s actually a very simple reason for why this has been so popular. It sells well. If you have a piece of magical software, if you can make the wired brain happen, people will pay you a lot of money for it.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/68577bf9f5dd2d33c345db1d984de9c3/63217/wired-brain_ai-powered.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 53.535353535353536%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB30igf//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEAAQUCX//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABYQAAMAAAAAAAAAAAAAAAAAAAAgMf/aAAgBAQABPyEi/wD/2gAMAwEAAgADAAAAELMP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAHBABAAICAwEAAAAAAAAAAAAAAQARMUEhUYGR/9oACAEBAAE/EEsqFbPrBsuay47gcb+wn//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/68577bf9f5dd2d33c345db1d984de9c3/55fac/wired-brain_ai-powered.webp 198w, /static/68577bf9f5dd2d33c345db1d984de9c3/5b4d3/wired-brain_ai-powered.webp 395w, /static/68577bf9f5dd2d33c345db1d984de9c3/848e4/wired-brain_ai-powered.webp 790w, /static/68577bf9f5dd2d33c345db1d984de9c3/d71bc/wired-brain_ai-powered.webp 1024w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/68577bf9f5dd2d33c345db1d984de9c3/9db10/wired-brain_ai-powered.jpg 198w, /static/68577bf9f5dd2d33c345db1d984de9c3/16a07/wired-brain_ai-powered.jpg 395w, /static/68577bf9f5dd2d33c345db1d984de9c3/d27a6/wired-brain_ai-powered.jpg 790w, /static/68577bf9f5dd2d33c345db1d984de9c3/63217/wired-brain_ai-powered.jpg 1024w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/68577bf9f5dd2d33c345db1d984de9c3/d27a6/wired-brain_ai-powered.jpg" alt="A graph showing attention in tech media for the term &#39;Uber for&#39; vs. &#39;AI powered&#39;. It shows a huge spike for &#39;AI powered&#39; since mid-2016, while &#39;Uber for&#39; peaked a little lower in mid-2015." title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <image-caption> <p>Source: <a href="https://index.12k.co/index/%22Uber_for%22,%22Ai_Powered%22">12K INDEX</a></p> </image-caption> <p>The startup playbook says the hard part is figuring out what people want. Actually building it is a minor detail. In other words, the key role is “imagineering”, not engineering. Many great businesses have been built on this assumption. Now we’re simply adding AI to the mix and hoping the same will happen. The truth is, the technology is much less predictable than that, and the way we will actually make use of it in the future will be very different from how we imagine it today.</p> <h2>Imagineering the future</h2> <p>The new opportunities emerging from Machine Learning are very tempting. The wildest scenarios from decades of futuristic science fiction are suddenly (almost) possible. But does that mean they’re actually the most practical things to build? The problem here lies in how those fictional ideas were conceived. The way people imagine technology of the future is heavily biased by their current experiences and expectations.</p> <p>One of my favourite examples of this are <a href="https://www.washingtonpost.com/news/wonk/wp/2015/10/04/what-people-in-1900-thought-the-year-2000-would-look-like/?utm_term=.d35ba42ce172">these images</a> of how people in 1900 imagined life in the year 2000:</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/276ff7b0887bcf6246c3a78f05df884d/a24e6/wired-brain_1900.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 118.68686868686868%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAYABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMCAf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABtntAosFl5FaBX//EABsQAAMBAAMBAAAAAAAAAAAAAAABEQISISJB/9oACAEBAAEFAloRULyrDWbrn19rZ//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPwESZk//xAAWEQADAAAAAAAAAAAAAAAAAAABESD/2gAIAQIBAT8BLj//xAAbEAABBAMAAAAAAAAAAAAAAAAAAREhMQIQcf/aAAgBAQAGPwIy4SoxViuTY+v/xAAcEAEBAQACAwEAAAAAAAAAAAABEQAhMUFRYXH/2gAIAQEAAT8hta37nb99sAHE6bL350npnCKvxwGPw84oot16lTf/2gAMAwEAAgADAAAAEOMIPv/EABcRAQEBAQAAAAAAAAAAAAAAAAABETH/2gAIAQMBAT8QC1jhr//EABgRAQEBAQEAAAAAAAAAAAAAAAEAESEx/9oACAECAQE/EAIBN23bzhf/xAAcEAEBAQEAAgMAAAAAAAAAAAABEQAhQVFhcYH/2gAIAQEAAT8QcBg84mgisJ+MFRw5X1pAwcebcTYHFwsDMIQPWEidNBX1h54L8eZgYgYKReb/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/276ff7b0887bcf6246c3a78f05df884d/55fac/wired-brain_1900.webp 198w, /static/276ff7b0887bcf6246c3a78f05df884d/5b4d3/wired-brain_1900.webp 395w, /static/276ff7b0887bcf6246c3a78f05df884d/848e4/wired-brain_1900.webp 790w, /static/276ff7b0887bcf6246c3a78f05df884d/cf465/wired-brain_1900.webp 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/276ff7b0887bcf6246c3a78f05df884d/9db10/wired-brain_1900.jpg 198w, /static/276ff7b0887bcf6246c3a78f05df884d/16a07/wired-brain_1900.jpg 395w, /static/276ff7b0887bcf6246c3a78f05df884d/d27a6/wired-brain_1900.jpg 790w, /static/276ff7b0887bcf6246c3a78f05df884d/a24e6/wired-brain_1900.jpg 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/276ff7b0887bcf6246c3a78f05df884d/d27a6/wired-brain_1900.jpg" alt="Illustration of a woman using a machine operating a broom, and a group of flying firefighters with wings rescuing people from a burning house" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <image-caption> <p>Source: <a href="https://www.washingtonpost.com/news/wonk/wp/2015/10/04/what-people-in-1900-thought-the-year-2000-would-look-like">The Washington Post</a></p> </image-caption> <p>Those illustrations all seem very cute and quaint, and at the same time, they’re not actually <em>that</em> far from our reality today. The problems depicted are still relevant – but we didn’t just automate the processes of 1900, we also reengineered the ways we were solving those problems, and our society adjusted accordingly.</p> <p>We didn’t build a machine to operate a broom – we built vacuum cleaners. We didn’t engineer wings for firefighters – we built fire extinguisher drones. We also didn’t create robot personal shoppers – we built online stores.</p> <p>A 1900-style broom-operating machine would have been about as useful as your average chat bot today. Kind of okay at its task once you’ve figured out how to operate it correctly and make sure it doesn’t keep crashing into walls. Completely hopeless in some cases, that also happen to be ones you’d mostly appreciate help with, like corners and door steps. After the novelty has worn off, I’m sure the diligent housewife of 1900 would have gone back to doing it properly and by hand. It took a lot of iterations, a change of methodology and a shift in people’s expectations of house cleaning to finally arrive at a practical alternative: the robot vacuum cleaner (and even that still isn’t <a href="https://www.theguardian.com/technology/2016/aug/15/roomba-robot-vacuum-poopocalypse-facebook-post">quite perfect</a>).</p> <h2>Artificial assistance</h2> <p>So far, we have been very successful at advancing and replacing manual labour with technology. In recent years, we have moved on to doing the same for intellectual labour. Humans have always been employing other humans to make their lives easier and more convenient. Up until the 1950s, people would hire <a href="https://en.wikipedia.org/wiki/Knocker-up">“knocker-uppers”</a> who’d knock on their doors and windows to wake them up in the morning. As alarm clocks became more affordable and reliable, this job became extinct (and it wasn’t replaced by a window-knocking machine).</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/4798c5e9d8dac5e0c17c258b7c3ada02/a24e6/wired-brain_knockerupper.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 39.8989898989899%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAED/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABZBQf/8QAGRAAAgMBAAAAAAAAAAAAAAAAAhIAAxEx/9oACAEBAAEFAuQ9I62X/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRAAAwADAAAAAAAAAAAAAAAAAAERAiGh/9oACAEBAAY/ArBM1j0//8QAGBABAQEBAQAAAAAAAAAAAAAAAREAIUH/2gAIAQEAAT8hWuiQ8yiWQuSN5n//2gAMAwEAAgADAAAAEPAP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGRAAAwEBAQAAAAAAAAAAAAAAAREhADGB/9oACAEBAAE/EKwgkniJYUjDEEQpT5o+U5G//9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/4798c5e9d8dac5e0c17c258b7c3ada02/55fac/wired-brain_knockerupper.webp 198w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/5b4d3/wired-brain_knockerupper.webp 395w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/848e4/wired-brain_knockerupper.webp 790w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/cf465/wired-brain_knockerupper.webp 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/4798c5e9d8dac5e0c17c258b7c3ada02/9db10/wired-brain_knockerupper.jpg 198w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/16a07/wired-brain_knockerupper.jpg 395w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/d27a6/wired-brain_knockerupper.jpg 790w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/a24e6/wired-brain_knockerupper.jpg 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/4798c5e9d8dac5e0c17c258b7c3ada02/d27a6/wired-brain_knockerupper.jpg" alt="Old photographs of knocker-uppers in front of buildings, using a long stick to knock on the windows" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <image-caption> <p>Source: <a href="http://mashable.com/2016/09/04/knockers-up/">Mashable</a></p> </image-caption> <p>Other jobs, like that of a personal business assistant, are a lot more complex. While we might feel like we’re “thinking outside the box” because we’re much more aware of all the technological possibilities than people were a century ago, we still accept today’s problems as given and are trying to fix them in ways that we know and are used to. We’re used to telling another human what to do and taking advantage of their humanness – their ability to reason about our instructions, retrieve all required information and perform the steps necessary to complete a task.</p> <p>This has led to many attempts at making software more “human”. The assumption here is that the more human-machine interaction resembles human-human interaction, the more successful it will be. Thus, the technology needs a personality. AI is not only the technology used to build a product – <strong>it becomes the product</strong>.</p> <p>But is human-human interaction really the holy grail? The reason we chose working with and talking to human assistants is because it was most efficient – just like people knocking on your window was most efficient to make sure you woke up in time. The real goal here is to enable a computer to perform the same complex tasks as a human, not replace <a href="https://explosion.ai/blog/natural-user-interface">one user interface with another</a>. The problem with a lot of conversational applications is that they’re not actually trying to solve the underlying problem — they’re simply reengineering a makeshift solution born out of necessity. It’s not enough to apply a new technology to an existing process. It needs to be used as a tool, a building block in an entirely new system.</p> <h2>AI has a PR problem</h2> <p>The media is full of reports about all the great things technology is now able to do, powered by the magic of AI. New “breakthroughs” are announced almost daily. AI can turn your selfie into a van Gogh painting, dominate Poker tournaments and even drive cars. This, together with the imagery of AI as a humanoid entity, leads people to believe that we must have clearly mastered the “easy parts” and are now on to tackling the “hard parts”. What an exciting time to be alive.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/68fc7b3e09e81591505bb992cd800f9a/63217/wired-brain_news.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 36.868686868686865%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHdoJAY/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAECEjH/2gAIAQEAAQUCJaqn/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BV//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAQEBAAAAAAAAAAAAAAAAAAARMf/aAAgBAQAGPwJlZH//xAAZEAADAQEBAAAAAAAAAAAAAAAAAREhMaH/2gAIAQEAAT8hy4cq6jR4H//aAAwDAQACAAMAAAAQA9//xAAXEQADAQAAAAAAAAAAAAAAAAAAASER/9oACAEDAQE/EHSJh//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAcbL//xAAaEAEBAAIDAAAAAAAAAAAAAAABEQAhUYHR/9oACAEBAAE/ECqqvLgHSDQJDpcKiXdx5n//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/68fc7b3e09e81591505bb992cd800f9a/55fac/wired-brain_news.webp 198w, /static/68fc7b3e09e81591505bb992cd800f9a/5b4d3/wired-brain_news.webp 395w, /static/68fc7b3e09e81591505bb992cd800f9a/848e4/wired-brain_news.webp 790w, /static/68fc7b3e09e81591505bb992cd800f9a/d71bc/wired-brain_news.webp 1024w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/68fc7b3e09e81591505bb992cd800f9a/9db10/wired-brain_news.jpg 198w, /static/68fc7b3e09e81591505bb992cd800f9a/16a07/wired-brain_news.jpg 395w, /static/68fc7b3e09e81591505bb992cd800f9a/d27a6/wired-brain_news.jpg 790w, /static/68fc7b3e09e81591505bb992cd800f9a/63217/wired-brain_news.jpg 1024w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/68fc7b3e09e81591505bb992cd800f9a/d27a6/wired-brain_news.jpg" alt="Left: A graph showing attention in tech media for AI and ML spiking in mid-2016, and NLP, growing slightly. Right: Screenshot of voice-operated Google Assistant chat bot. Transcribed user input: &#39;send me whether daily at 7:15a.m.&#39; Bot: &#39;Let&#39;s see&#39;, preview of dictionary entry for the word &#39;whether&#39; and &#39;Would you like to receive this every day?&#39;. User: &#39;No&#39;" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <image-caption> <p>Sources: <a href="https://index.12k.co/index/%22Artificial_Intelligence%22_OR*%22AI%22,%22Natural_Language_Processing%22,%22Machine_Learning%22">12K INDEX</a>, <a href="https://twitter.com/Summerson/status/784214198754566144">@Summerson</a></p> </image-caption> <p>This misleading messaging is, at least partly, to blame for the unrealistic expectations people have of consumer products, and the resulting disproportionate amounts of money thrown at business ideas that are flat-out unfeasible and incorrectly ambitious. Those ideas are usually based on the assumption that the lowest-value labour will be the easiest to automate. This worked for manufacturing, but when it comes to intelligence, this is exactly the wrong strategy.</p> <p>Things that are hard for a human are often very easy for a computer, and vice versa. For example, most people can understand figures of speech without thinking twice, and are able to make fairly subtle judgements. On the other hand, we’re very limited in terms of what our physique is capable of: we’re easily exhausted, our memory is bad and when interacting with our environment, we are forced to rely on what we can hear and see. Just because something is very hard for us doesn’t automatically mean human-level performance will be difficult to replicate — quite the opposite.</p> <p>Self-driving cars are possible because they use <a href="https://www.nytimes.com/interactive/2016/12/14/technology/how-self-driving-cars-work.html">laser beams and radar sensors</a> to generate a 360-degree map of the surroundings, and analyse this data instantly and with mathematic precision. They’re able to do something that humans <em>can’t</em> and achieve the goal of driving very differently. That makes them much better at it than say, a robot driver. The fact that self-driving cars are now possible does <em>not</em> mean that machines are becoming more “intelligent” or more “like us”. Intelligence and human capabilities are actually a very bad baseline for technology.</p> <p>Whether or not something is intelligent is a fake question, because it doesn’t say anything about the capabilities themselves. Instead of trying to engineer human-like qualities and doing a bad job at it, we should use the technology for what it’s already really good at. Instead of talking about “Artificial Intelligence”, we should think of it as a Machine Learning loop of feedback and control. In <a href="https://www.technologyreview.com/s/603761/ais-pr-problem/">“AI’s PR Problem”</a>, Jerry Kaplan writes:</p> <blockquote> <p>We should stop describing these modern marvels as proto-humans and instead talk about them as a new generation of flexible and powerful machines. We should be careful about how we deploy and use AI, but not because we are summoning some mythical demon that may turn against us. Rather, we should resist our predisposition to attribute human traits to our creations and accept these remarkable inventions for what they really are—potent tools that promise a more prosperous and comfortable future.</p> <p><a href="https://www.technologyreview.com/s/603761/ais-pr-problem/">Jerry Kaplan: AI’s PR Problem (MIT Technology Review)</a></p> </blockquote> <p>Even if you do believe that we’re close to self-improving AI and that we need to discuss safety issues and the imminent dangers ahead, you should care about making this point. Sometime in the future, you’re going to want to tell people, “It’s different now!“. You should be careful to distinguish the current technologies from the dangerous thing you’re expecting.</p> <p>The way we communicate is powerful, because it shapes our perception of the world. But this also means we can use it to paint a realistic picture and correct false impressions. Messaging that promotes the technology as “the AI” is harmful and we need to fix it. And please, finally, stop using that same old fucking wired brain illustration.</p><![CDATA[Story time: How I started coding]]>https://ines.io/blog/how-i-started-codinghttps://ines.io/blog/how-i-started-codingThu, 09 Feb 2017 00:00:00 GMT<p><em><strong>Update</strong> (October 2020): I recently shared a longer and more in-depth version of my story with Tim of the DevJourney podcast, which you can listen to <a href="https://devjourney.info/Guests/122-InesMontani.html">here</a>.</em></p> <p>We got our first computer in the late 1990s. A guy my dad knew from work was really into computers, still a novelty at the time, and he offered to get us one and set it up. So my parents thought, why not? Looking back, I often think about how my life would have turned out if this hadn’t happened. We likely wouldn’t have gotten internet until much later, and I would be a very different person now.</p> <p>I immediately fell in love with the big grey box that made strange noises. My favourite programs were <a href="https://en.wikipedia.org/wiki/Creative_Writer">Creative Writer</a> and <a href="https://en.wikipedia.org/wiki/Fine_Artist">Fine Artist</a>, essentially the 90s kids versions of InDesign and Photoshop. I spent hours writing, designing and printing my own magazines, and I dreamt about one day becoming a journalist or book author.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/7800c96a19543463b16d71d35a7a515e/62aaf/coding_fineartist.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.37373737373737%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECA//EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/aAAwDAQACEAMQAAABrBO4Nf/EABgQAAMBAQAAAAAAAAAAAAAAAAEREgID/9oACAEBAAEFAkVSyOwn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFxEAAwEAAAAAAAAAAAAAAAAAAAETMf/aAAgBAgEBPwFaTR//xAAXEAEBAQEAAAAAAAAAAAAAAAAAARES/9oACAEBAAY/AnKbK//EABkQAQADAQEAAAAAAAAAAAAAAAEAEUFRkf/aAAgBAQABPyEwPsrSG94wwJQn/9oADAMBAAIAAwAAABB37//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPxAMn//EABcRAQEBAQAAAAAAAAAAAAAAAAEAESH/2gAIAQIBAT8Q7Eq7f//EABsQAQEAAgMBAAAAAAAAAAAAAAERAEEhMXGh/9oACAEBAAE/EKYrbNOvcDaREWAaecCYQVjfuf/Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/7800c96a19543463b16d71d35a7a515e/55fac/coding_fineartist.webp 198w, /static/7800c96a19543463b16d71d35a7a515e/5b4d3/coding_fineartist.webp 395w, /static/7800c96a19543463b16d71d35a7a515e/848e4/coding_fineartist.webp 790w, /static/7800c96a19543463b16d71d35a7a515e/8d239/coding_fineartist.webp 1185w, /static/7800c96a19543463b16d71d35a7a515e/94b1e/coding_fineartist.webp 1280w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/7800c96a19543463b16d71d35a7a515e/9db10/coding_fineartist.jpg 198w, /static/7800c96a19543463b16d71d35a7a515e/16a07/coding_fineartist.jpg 395w, /static/7800c96a19543463b16d71d35a7a515e/d27a6/coding_fineartist.jpg 790w, /static/7800c96a19543463b16d71d35a7a515e/0b93b/coding_fineartist.jpg 1185w, /static/7800c96a19543463b16d71d35a7a515e/62aaf/coding_fineartist.jpg 1280w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/7800c96a19543463b16d71d35a7a515e/d27a6/coding_fineartist.jpg" alt="Microsoft Fine Artist" title="Microsoft Fine Artist, released in 1994" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Microsoft Fine Artist, released in 1994</p></figcaption> </figure> <p>About a year in, I discovered Microsoft Word and its ability to create HTML pages. I made my very first website, complete with clip arts and the light blue raindrop background, and uploaded it via our ISP’s free web hosting. There it was, live on <em>the internet</em>.</p> <p>Around the same time, I started taking part in my small town’s youth parliament and signed up for the group that would create its website. I was excited to get involved with local politics, even if it was just voting on which playgrounds to build. It was as close as I could get to being taken seriously and doing “adult stuff”. The city had hired a freelancer to supervise the website project, and I quickly learned the basics of Photoshop and <a href="https://en.wikipedia.org/wiki/Adobe_GoLive">GoLive</a>. In my free time, I kept working on my own websites about myself and the bands I was into.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/e0be69a655eb0e0383b694bf26bf824a/03ffe/coding_golive.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 36.36363636363637%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBP/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd8hUH//xAAYEAADAQEAAAAAAAAAAAAAAAAAARECEv/aAAgBAQABBQJ5U4pEf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABcQAQEBAQAAAAAAAAAAAAAAAAAxAUH/2gAIAQEABj8CjiY//8QAGxAAAgIDAQAAAAAAAAAAAAAAAAERITFBUdH/2gAIAQEAAT8hRw3sVTiHSDwP/9oADAMBAAIAAwAAABD4L//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/EKr/xAAaEAEAAwADAAAAAAAAAAAAAAABABExIUHB/9oACAEBAAE/EBqW6pkQkdenkAVyR//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/e0be69a655eb0e0383b694bf26bf824a/55fac/coding_golive.webp 198w, /static/e0be69a655eb0e0383b694bf26bf824a/5b4d3/coding_golive.webp 395w, /static/e0be69a655eb0e0383b694bf26bf824a/848e4/coding_golive.webp 790w, /static/e0be69a655eb0e0383b694bf26bf824a/8d239/coding_golive.webp 1185w, /static/e0be69a655eb0e0383b694bf26bf824a/cbd37/coding_golive.webp 1200w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/e0be69a655eb0e0383b694bf26bf824a/9db10/coding_golive.jpg 198w, /static/e0be69a655eb0e0383b694bf26bf824a/16a07/coding_golive.jpg 395w, /static/e0be69a655eb0e0383b694bf26bf824a/d27a6/coding_golive.jpg 790w, /static/e0be69a655eb0e0383b694bf26bf824a/0b93b/coding_golive.jpg 1185w, /static/e0be69a655eb0e0383b694bf26bf824a/03ffe/coding_golive.jpg 1200w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/e0be69a655eb0e0383b694bf26bf824a/d27a6/coding_golive.jpg" alt="Adobe GoLive" title="Adobe GoLive 4.0, released in 1999. Screenshots: Thomas Wassmer" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Adobe GoLive 4.0, released in 1999. Screenshots: Thomas Wassmer</p></figcaption> </figure> <p>When I was around 13, I discovered a whole new scene online. There were lots of young girls and a few boys, just like me, dabbling in web and graphic design. Some of them had very popular blogs and impressive skills, even by today’s standards. People often wrongly assume that guys dominated the entire internet at the time, but in this space, creative front-end design was almost entirely run by girls. I looked up to them and eventually signed up for one of the biggest online message boards, which at its height easily counted a thousand members from German-speaking countries.</p> <p>The board mainly revolved around web design topics like Photoshop, HTML and CSS, with sub-forums on music, relationships and everything else that was on our teenage minds. I worked up the courage to show my website and got a lot of motivating feedback.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/1cb64f889e2a03b4605e1dc2181f4792/e8c9e/coding_designs.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAYCAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABL56MLozB/8QAHBAAAgAHAAAAAAAAAAAAAAAAAQIAAwQREjNB/9oACAEBAAEFAjkSrWJp5jFNvI//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAABAwUAAAAAAAAAAAAAAAABABEhAhASgpH/2gAIAQEABj8CCkHiyDMZVWl//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITEQcf/aAAgBAQABPyEtAVZyL1VvMZsfrZpa+E6vkJ//2gAMAwEAAgADAAAAEDc//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8QV//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPxCMf//EAB0QAQADAAIDAQAAAAAAAAAAAAEAESExgVGRsfD/2gAIAQEAAT8QcgqqF4c/e5Vn1h+o8S491Dad0OI6EyinZsABBHV9wAYVP//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/1cb64f889e2a03b4605e1dc2181f4792/55fac/coding_designs.webp 198w, /static/1cb64f889e2a03b4605e1dc2181f4792/5b4d3/coding_designs.webp 395w, /static/1cb64f889e2a03b4605e1dc2181f4792/848e4/coding_designs.webp 790w, /static/1cb64f889e2a03b4605e1dc2181f4792/5e9fb/coding_designs.webp 1050w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/1cb64f889e2a03b4605e1dc2181f4792/9db10/coding_designs.jpg 198w, /static/1cb64f889e2a03b4605e1dc2181f4792/16a07/coding_designs.jpg 395w, /static/1cb64f889e2a03b4605e1dc2181f4792/d27a6/coding_designs.jpg 790w, /static/1cb64f889e2a03b4605e1dc2181f4792/e8c9e/coding_designs.jpg 1050w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/1cb64f889e2a03b4605e1dc2181f4792/d27a6/coding_designs.jpg" alt="Designs from my old blog" title="Some designs of my old blog, klammerauf.org, from 2006-2009" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Some designs of my old blog, klammerauf.org, from 2006-2009</p></figcaption> </figure> <p>It was common to redesign your site for no particular reason about once a month, so there was always something to do. I quickly ditched WYSIWYG editors and started writing my own code. Inspired by <a href="http://www.csszengarden.com/">CSS Zen Garden</a>, I became mildly obsessed with web standards and semantic HTML. I also taught myself the very basics of PHP and started using one of the very first versions of WordPress. I still remember how proud I was when I got it all up and running. Together with a friend I launched an online magazine about our favourite indie music. It was the early age of blogging and everything seemed possible. We wrote about albums and concerts, got accreditations to big music festivals and interviewed the bands we liked.</p> <p>However, I slowly lost interest in my projects and websites. I felt like I wasn’t keeping up fast enough, I wasn’t good enough and there were just so many other things that I could be doing. I was close to finishing school and had to think about what I wanted to do with my life.</p> <p>I eventually started university at the age of 17, doing a degree of media science and language studies, a hybrid of linguistics, computational linguistics and phonetics. It was disappointing and frustrating. Social media and blogging hadn’t entered the mainstream yet, so nobody really wanted to talk about that. I was unhappy with the new German university system, which was heavily bureaucratised and school-like, and didn’t live up to my expectations of the “academic life”. People say that undergrad studies are all about learning how to work and study independently, but I felt like this had never been a problem for me. I wanted to learn more, I wanted to <em>do things</em>. Instead, I became a fairly unambitious student who was mainly focused on getting done with it as quickly as possible.</p> <p><strong>“If you ever want to make lots of money, help computers understand language.”</strong> a professor once said to us during a lecture. He was one of the few lecturers I still remember fondly, the only one who refused to enforce the new concept of mandatory attendance and preferred oral exams over multiple choice. I forgot about his advice until years later, when I found myself doing exactly that, helping computers understand language, which eventually led to founding my first company, <a href="https://explosion.ai">Explosion AI</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 420px; " > <a class="gatsby-resp-image-link" href="/static/5b9aac7e398b7e403481e565506ab56b/7fbea/coding_me.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 67.67676767676768%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABQACBP/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/aAAwDAQACEAMQAAABb5sBExDTn//EABsQAQACAgMAAAAAAAAAAAAAAAIBAwAhBBIU/9oACAEBAAEFAjGrEe6jdnJikK5xnref/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGxABAAEFAQAAAAAAAAAAAAAAAQACEBESMUH/2gAIAQEABj8CmnthRczcq65nCf/EABkQAQADAQEAAAAAAAAAAAAAAAEAETEhYf/aAAgBAQABPyETERQPN5BjOOCo0+onTyX7H//aAAwDAQACAAMAAAAQUN//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QMSy//8QAFhEAAwAAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/EIyM/8QAHRAAAgIDAAMAAAAAAAAAAAAAAREAIUFRcTGBwf/aAAgBAQABPxAUpG2QKlOPcO8VQjvIIFwHbhCxXlHtYVchKZ52AR9n/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/5b9aac7e398b7e403481e565506ab56b/55fac/coding_me.webp 198w, /static/5b9aac7e398b7e403481e565506ab56b/5b4d3/coding_me.webp 395w, /static/5b9aac7e398b7e403481e565506ab56b/8b3fd/coding_me.webp 420w" sizes="(max-width: 420px) 100vw, 420px" type="image/webp" /> <source srcset="/static/5b9aac7e398b7e403481e565506ab56b/9db10/coding_me.jpg 198w, /static/5b9aac7e398b7e403481e565506ab56b/16a07/coding_me.jpg 395w, /static/5b9aac7e398b7e403481e565506ab56b/7fbea/coding_me.jpg 420w" sizes="(max-width: 420px) 100vw, 420px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/5b9aac7e398b7e403481e565506ab56b/7fbea/coding_me.jpg" alt="Photo of me" title="Me in my flat in Cologne in 2009, trying to figure out what to do with the rest of my life" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Me in my flat in Cologne in 2009, trying to figure out what to do with the rest of my life</p></figcaption> </figure> <p>On my last day of university, I left both my part-time jobs at Lush and Deutsche Welle, packed my life into a couple of boxes and moved to Berlin. I didn’t care about making money or having a career. I was too wrapped up in the idea of <a href="/blog/i-fell-for-self-help-so-you-dont-have-to">“finding happiness”</a> and finally being independent. I spent the next four years working in media, doing advertising, sales and marketing. I loved my work, and I <a href="/blog/5-things-i-learned-from-working-in-print">learned a lot</a>, including how to lead a team, coordinate complex projects and partnerships and get stuff done. But web development never really got off my mind. CSS3 had just become widely supported, and I was blown away by all the new possibilities. All those things that we’d created complicated workarounds for as teenagers were suddenly as simple as <code>transform: rotate(45deg)</code> or <code>box-shadow: 10px 10px 5px #000</code>. I revived my blog and slowly started keeping up with the latest technologies again.</p> <p>Everything changed when I left my job to work remotely as a freelancer. I’d always struggled with staying motivated, and I feared that this would make it worse. But the opposite happened. With a less rigid distinction of work and free time, I became more productive than ever. I had an idea for a web app, and I was working on it day and night for weeks, just because it felt so rewarding to see it all come together. I <a href="/blog/announcing-explosion-ai#the-past">started working with Matt</a>, who had just released <a href="https://spacy.io">spaCy</a>, an open-source library for Natural Language Processing. It turned out to be a perfect fit – I already knew linguistics and everything front-end, and I was steadily getting better at programming. I’ve never been the type of person to learn things by reading books and following tutorials. I need a goal, a <a href="https://www.quora.com/What-should-software-product-managers-who-are-new-to-A-I-Machine-Learning-focus-on-Online-courses-are-extremely-technical-Is-that-what-is-needed/answer/Ines-Montani">clear mission</a>, and I’m best at learning new things by just <em>doing them</em>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 545px; " > <a class="gatsby-resp-image-link" href="/static/cd18b343569783b2f7d228f7fc1d94e2/17517/coding_displacy.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 71.71717171717172%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGKRWNAmH//xAAaEAEAAgMBAAAAAAAAAAAAAAABAgMAEiIU/9oACAEBAAEFAm9H0Tyq2aSO9cpOf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB8QAAEDAwUAAAAAAAAAAAAAAAABAjEQESJRUnGBkv/aAAgBAQAGPwJbufO4l3oXJZ1F5p2f/8QAGxAAAwACAwAAAAAAAAAAAAAAAAERMUFhcfH/2gAIAQEAAT8hTFKbEHpxnPvUP05FcD7H/9oADAMBAAIAAwAAABDjL//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EAB4QAAICAgIDAAAAAAAAAAAAAAERACExcUFRYYGh/9oACAEBAAE/ECHAFqJlVAgMp5KH8hRMMgRAhTlZ9jyZZt3AmkZY0J//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/cd18b343569783b2f7d228f7fc1d94e2/55fac/coding_displacy.webp 198w, /static/cd18b343569783b2f7d228f7fc1d94e2/5b4d3/coding_displacy.webp 395w, /static/cd18b343569783b2f7d228f7fc1d94e2/06a3f/coding_displacy.webp 545w" sizes="(max-width: 545px) 100vw, 545px" type="image/webp" /> <source srcset="/static/cd18b343569783b2f7d228f7fc1d94e2/9db10/coding_displacy.jpg 198w, /static/cd18b343569783b2f7d228f7fc1d94e2/16a07/coding_displacy.jpg 395w, /static/cd18b343569783b2f7d228f7fc1d94e2/17517/coding_displacy.jpg 545w" sizes="(max-width: 545px) 100vw, 545px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/cd18b343569783b2f7d228f7fc1d94e2/17517/coding_displacy.jpg" alt="Screenshot of displaCy" title="displaCy, an NLP visualiser and the first demo I developed for spaCy" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>displaCy, an NLP visualiser and the first demo I developed for spaCy</p></figcaption> </figure> <p>Looking back, I think what initially discouraged me from pursuing web development as a career was that just developing websites and web apps didn’t feel satisfying enough. Taking my skills and interests to a different, exciting field with so much room for innovation was the missing link.</p> <p>You don’t have to keep chasing after opportunities to reinvent the wheel. But I believe that working with technology only becomes fully rewarding when you combine all the things you’re passionate about, regardless of how compatible they might seem, and find your own unique perspective. In my case, it was programming, front-end, linguistics and marketing. For someone else, it might be programming, typography, journalism and robotics.</p> <h2>Read stories by other developers</h2> <ul> <li><a href="http://lea.verou.me/2012/05/how-i-got-into-web-development-the-long-version/">How I got into web development — the long version</a> by Lea Verou</li> <li><a href="https://superyesmore.com/cartoon-dolls-c2bbe6bb982658b3e614716715beda25">From building cartoon dolls to building things for the web</a> by Una Kravets</li> <li><a href="https://superyesmore.com/and-that-was-it-really-i-knew-what-i-wanted-to-do-i-wanted-to-build-websites-76930dbd2c513442496db9c6bacef8b3">And that was it really, I knew what I wanted to do, I wanted to build websites</a> by Jake Archibald</li> <li><a href="https://superyesmore.com/an-unforeseen-path-5b4a4379bea14ca6c792a3fe682c9910">An Unforeseen Path. On not choosing Computer Science and becoming a SVG expert</a> by Sara Soueidan</li> <li><a href="https://superyesmore.com/how-did-i-start-coding-80c1d61509d5d29c9d389417a165f621">From floppy disks and BASIC programs to a full-time career as a web developer</a> by Jonathan Snook</li> <li><a href="https://superyesmore.com/from-designing-neopets-pages-to-becoming-a-professional-web-developer-d6121b7fe42324e456deb8988d481ec8">From designing Neopets pages to becoming a professional web developer</a> by Amélie Lamont</li> <li><a href="http://rmurphey.com/blog/2012/03/25/girls-and-computers">Girls and Computers</a> by Rebecca Murphey</li> </ul><![CDATA[Announcing Explosion AI]]>https://ines.io/blog/announcing-explosion-aihttps://ines.io/blog/announcing-explosion-aiMon, 03 Oct 2016 00:00:00 GMT<p>Today, we launched the website for our new company, <a href="https://explosion.ai">Explosion AI</a>. Explosion is a digital studio specialising in Artificial Intelligence and Natural Language Processing. We design algorithms, applications and data assets, and develop custom solutions to today’s AI problems.</p> <p>The past year has been pretty exciting and eventful. Things haven’t always been easy, but it feels good to finally be moving forward again.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/958d9b7be0167d0ebd60616d8604e9df/a24e6/explosion-ai_website.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 62.62626262626263%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd1NFkh//8QAFxABAAMAAAAAAAAAAAAAAAAAAQARIP/aAAgBAQABBQKDef/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAAgMf/aAAgBAQAGPwIi/wD/xAAbEAADAAMBAQAAAAAAAAAAAAAAAREhMVFxkf/aAAgBAQABPyF4VlPK7RaM9FVqfBU//9oADAMBAAIAAwAAABAAz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EAB0QAQADAAEFAAAAAAAAAAAAAAEAETFhIVGRobH/2gAIAQEAAT8QFgvvLgLoOAJ6n2YJweIRpE4pGDTe0//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/958d9b7be0167d0ebd60616d8604e9df/55fac/explosion-ai_website.webp 198w, /static/958d9b7be0167d0ebd60616d8604e9df/5b4d3/explosion-ai_website.webp 395w, /static/958d9b7be0167d0ebd60616d8604e9df/848e4/explosion-ai_website.webp 790w, /static/958d9b7be0167d0ebd60616d8604e9df/cf465/explosion-ai_website.webp 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/958d9b7be0167d0ebd60616d8604e9df/9db10/explosion-ai_website.jpg 198w, /static/958d9b7be0167d0ebd60616d8604e9df/16a07/explosion-ai_website.jpg 395w, /static/958d9b7be0167d0ebd60616d8604e9df/d27a6/explosion-ai_website.jpg 790w, /static/958d9b7be0167d0ebd60616d8604e9df/a24e6/explosion-ai_website.jpg 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/958d9b7be0167d0ebd60616d8604e9df/d27a6/explosion-ai_website.jpg" alt="Screenshot of the explosion.ai website" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <h2>The Past</h2> <p>It all started when my partner, <a href="https://twitter.com/honnibal">Matt</a>, asked me to develop a simple website for his newly launched software library, <a href="https://spacy.io">spaCy</a>. Even though we both shared a passion for programming and linguistics — after all, we’d already spent hours talking about Natural Language Processing the night we met — we had never really thought about working together before. If anything, we found each other’s work fairly boring. Still, I agreed to develop a protype for an interactive visualiser, and we quickly realised that there was actually a lot of potential in a collaboration. The project would later become <a href="https://explosion.ai/demos/displacy">displaCy</a>, one of our most popular tools to date.</p> <p>A few times, Matt asked me if I wanted to join his one-man business. I said no. I had just left my executive sales and marketing job of four years to become self-employed. Things were going really well. I had regular clients and a bunch of long-term projects lined up, and was thriving on my newfound creativity that came with being able to work whenever and from wherever I wanted. I enjoyed working on the open source project, but I still had doubts about my abilities as a developer. It would take me another year to realise that <em>hell yes</em>, there was actually a lot for me to contribute.</p> <p>So while I went on to focus on freelancing, Matt met Henning, who had experience running tech businesses, and together they made plans to turn spaCy into a successful, venture-backed startup. A few months in, he asked me if I had time to take on a project, as they still hadn’t found a suitable front-end developer. At first, everyone involved, including me, was a little skeptical. Programming together for hours and building things in our free time was one thing. But did we really want to take this to a fully professional level? Would our personal relationship be a risk or an advantage? What did “relationship” even mean? How different were we really from two dudes in Silicon Valley who share a small apartment and spend every free minute working on their projects together?</p> <p>I first joined the team part-time as an experiment, but my hours were quickly increased as the business plans became more and more concrete. Needless to say, things at spaCy were going great. I developed an entirely new <a href="https://spacy.io">website</a>, we launched an improved version of the <a href="https://explosion.ai/demos/displacy">displaCy visualiser</a> that doubled up as an annotation tool and even landed our first <a href="https://www.producthunt.com/tech/spacy-io">feature on ProductHunt</a> with a demo that let people explore semantic word relations on Reddit using <a href="https://explosion.ai/demos/sense2vec">sense2vec</a>. We were excited to start working on our first commercial product, for which I was going to take on all front-end development.</p> <p>Yet, things were about to take a different turn. In early May this year, Matt and Henning realised that they weren’t able to settle their professional differences and decided to part ways. This also meant that venture funding was off the table and I had to stop working immediately. I had just started developing a new React app from scratch and was enjoying every minute of it, but from one day to the other, I just had to stop. It took me a while to realise that things wouldn’t just go back to normal. The open source project became unmaintained, the demos were taken offline, and nobody was able to give me any answers about the future of the project.</p> <p>As frustrating as it was, it’s one of the big risks that come with freelancing for tech startups in their early stages. In fact, <a href="https://www.quora.com/What-is-the-truth-behind-9-out-of-10-startups-fail">90% of technology startups fail</a>, almost half of them during their first six months. And along with scaling up too quickly, founder conflicts are a <a href="http://barnraisersllc.com/2015/09/30-statistics-startups-pitfall-success/">leading cause</a>. Unfortunately, the first employees and freelancers are often the ones that suffer most. They’ve been building an entire product from scratch for a promise of a piece of the future cake – but if it fails, they’re often lucky to even get paid at all.</p> <p>It wasn’t easy to overcome the disappointment and the loss of time, money and code, and and instead, make the most of the situation. I’m sure for many people, the first instinct would have been to run far, far away from this mess. But I also knew that this was the field I wanted to keep working in — and if not for this project, then for something else. I immersed myself in my work, and by June, I was finally back to freelancing full-time.</p> <h2>The Present</h2> <p>Four months later, we’re sitting at the notary’s office on the 22nd floor, overlooking the city of Berlin. It’s a beautiful day and you can see the golden statue of Victoria peeking out behind the woods of Tiergarten. I sign the paperwork, making me the director and shareholder of my very first company, <a href="https://explosion.ai">Explosion AI</a>.</p> <p>When Matt finally got to take over the spaCy open source project again, working together had inevitably come up again. After having been locked out of the project for months, it was unclear how long it would take to get the library back on track. But despite the frustration, the project itself was still very dear to my heart — after all, I had been working on it ever since its very first release. Seeing the impacts of my work and all the possibilities for <a href="/blog/how-front-end-can-improve-ai">front-end technologies in AI</a> had really opened my eyes. The more time Matt and I spent reorganising our work and code, planning our brand and strategy, and analysing past mistakes and missed opportunities, the more it became clear that both our different skills and experience would be a perfect match. There was so much to do, and this time, I was ready to go all-in.</p> <p>Bootstrapping the company was a very conscious decision. In an industry that prides itself on changing the world, I’ve always found it irritating how much time is spent on trying to build the ultimate solution for <em>all problems ever</em>, and how little on actually changing things, one step at a time. So many real-life problems can already be solved using today’s technology – just not in a boxed one-size-fits-all kinda way that takes two years and substantial venture capital to build. If we want to keep up with the fast pace of the industry, we need to be able to build what people need <em>now</em>, and accept that they will most likely need something completely different in a year’s time.</p> <p>Custom services on a consultancy basis usually come with trade-offs, though: You spend a lot of time agreeing on a detailed spec and sketching out the deliverables. And if things don’t go according to plan, everyone loses. There are so many new AI startups with exciting, ambitious ideas, but the Research and Development risk is huge: Can it really be done? And what if it doesn’t work? So our approach here is different. We take on those projects that are easier said than done — including the risk.</p> <blockquote> <p>Commissioning a project from us works a little like commissioning a tattoo. Imagine you want to immortalise your undying love for sloths, so you talk to an artist and come up with a concept. The artist then draws you a design. If it’s not something you can use “in production”, you don’t have to pay. But if you’ve found the sloth of your dreams, it’s yours — forever.</p> <p><a href="https://explosion.ai/blog/introducing-explosion-ai">explosion.ai</a></p> </blockquote> <p>To read more about how this works in detail, head over to our <a href="https://explosion.ai/blog/introducing-explosion-ai">website</a>.</p> <h2>The Future</h2> <p>No illusions — running a company is going to be hard work. But my work is also my greatest hobby. Being self-employed and working remotely has made me more productive than I’d ever been. It’s also taught me a lot of things that have ultimately made me so much more confident in taking this step. I was able field-test my ideas, figure out what works best and develop a clear concept of what’s important to me in a business.</p> <p>I’m excited about this new direction, taking on challenging projects, releasing new <a href="https://explosion.ai/demos">demos</a> and <a href="https://github.com/explosion">open source tools</a>, taking <a href="https://spacy.io">spaCy</a> to the next level and sharing more of my work along the way.</p> <p>I’m also looking forward to hearing what you think – let’s talk <a href="https://twitter.com/_inesmontani">on Twitter</a>!</p> <p><link-button href="https://explosion.ai" icon="globe">explosion.ai</link-button> <link-button href="https://github.com/explosion" icon="github">explosion.ai</link-button> <link-button href="https://twitter.com/explosion_ai" icon="twitter">@explosion_ai</link-button></p><![CDATA[I fell for self-help so you don’t have to]]>https://ines.io/blog/i-fell-for-self-help-so-you-dont-have-tohttps://ines.io/blog/i-fell-for-self-help-so-you-dont-have-toWed, 14 Oct 2015 00:00:00 GMT<p>I hate to admit it, but during my late teenage years and the beginning of my adult life, I massively fell for self-help blogs. I was unhappy, didn’t particularly like myself and had no idea where I would end up one day so I started spending hours on the internet looking for “answers”. (Yeah, this probably sounds familiar.) I was never particularly interested in conventional luxuries  – think fancy hotels, designer shit, glitter and cupcakes –  but for a while I believed that this is what I needed to be into in order to be <em>happy,</em> while at the same time rejecting any concepts of a traditional career. Falling for self-help that seemed so progressive at the time and believing that “thoughts become things” has helped me make an effort to actively improve myself and try out different things. But seeing through the bullshit has taught me <em>so much more</em>.</p> <p>In times like these, where most things are <em>technically</em> possible, who doesn’t like to hear that yes, you can indeed become whoever you want, you just need to want it badly enough and think about it hard enough and love yourself? Write yourself a <a href="http://www.neatorama.com/origin/2012/10/07/Jim-Carrey-Once-Wrote-Himself-a-10-Million-Check/">$10 million check</a> and carry it around with you? (Just imagine all the talentless actors driving around the Hollywood hills every single day and writing checks to themselves before moving back in with their parents and finally signing that McDonalds contract.)</p> <h2>Manifesting the pyramid scheme</h2> <p>Let’s be real, have you ever noticed that all those inspirational gurus who ~*manifested their dreams*~ and ~*made it*~ are rarely ever doing anything of substance? Their entire business model, if you want to call it that, revolves around giving advice on how to ~*make it*~, without ever having really achieved <em>anything</em> themselves, except for making a semi-business out of a fabricated rags to riches story and perfectly curated Instagram life. Yet, the fantasy of making money while doing fuck all and being happy, positive and beautiful, is way too tempting.</p> <p>Needless to say, all the blogs and courses and “life advice” spawn yet another generation of similarly privileged (because let’s face it, those courses and ebooks are ridiculously overpriced and never come without “quit your dayjob”) wannabe gurus who try their best to spread the same gospel. A very damaging <a href="https://en.wikipedia.org/wiki/Pyramid_scheme">pyramid scheme</a> with little to no productive outcome. Whether it’s positivity gurus, probloggers or self-proclaimed marketing and branding specialists, the irony is glaring: for-profit webinars teaching how to do for-profit webinars about for-profit webinars and ebooks about how to write ebooks about writing ebooks. Replace “branding” with “eating bacon” and the acquired skills would be the same - they’d only sound less fashionable and probably wouldn’t convince most parents to keep funding a second gap year.</p> <blockquote> <p>“I took that business course and made 10k in my first month… shilling that business course!”</p> </blockquote> <p>Sure, the success stories may sound convincing at first and hey, it’s all quantified so it must be legit, right? But once you dig deeper, it almost becomes impossible not to notice the blatant logic flaws: <em>“Thousands of people have used my advice to… start their own advice blog!”</em> or <em>“I took that business course and made 10k in my first month… shilling that business course!”</em>.</p> <h2>Empowering my arse</h2> <p>It makes me happy to see more and more young people, especially women, start their own businesses and reject traditional stereotypes  –  and even angrier to see the number of self-proclaimed gurus and teachers taking advantage of young people in alternative cultures and their desires to become entrepreneurs. There are plenty of perfectly sane reasons why this is a great time to start your own business and why <a href="http://www.getbullish.com/2011/04/bullish-when-to-make-massive-and-ballsy-life-changes-for-your-career/">changing your life</a> for the better <em>is</em> possible. But unfortunately, the ~*do what you love*~ self-help narrative has warped this into a bizarre spiritual concept and replaced all hands-on hard work by “manifesting”, “meditating” and blunt consumerism. All under the guise of “empowering women”. Here’s the thing:</p> <blockquote> <p>Telling women to meditate, “be grateful,” sit up straight and get good sleep […] might make us feel better – but it won’t make the world better. You can’t self-help away deeply-ingrained structural discrimination.</p> <p><a href="http://www.theguardian.com/commentisfree/2014/apr/23/female-confidence-gap-katty-kay-claire-shipman">Jessica Valenti: The female confidence gap is a sham (The Guardian)</a></p> </blockquote> <p>There is literally <em>nothing</em> empowering about this. Most self-help philosophies marketed towards women keep rehashing the same old gender stereotypes (Look pretty! Wear high heels!) and delusional <a href="https://en.wikipedia.org/wiki/The_Secret_(book)">The Secret</a>-esque concepts like the “law of attraction”: if you think positive, you will attract positive things. The gist of this isn’t even that awful but this new spiritual spin on it is: Your life is shit because your thoughts are shit. You still don’t live that loft and can’t afford to drink green smoothies all day? You feel bad and don’t know why? Well, you obviously didn’t think positively <em>enough</em>. <em>You are simply not enough.</em> Instead of actually helping women internalise their accomplishments, which is a huge issue (see: <a href="https://en.wikipedia.org/wiki/Impostor_syndrome">impostor syndrome</a>), once again <em>they</em> are the problem and the ones to blame. In short: it’s a huge victim-blaming mess.</p> <h2>The universe won’t do shit</h2> <p>The more time I spent aspiring to “live in the present moment” and reading inspirational success stories, the more I realised that nothing really added up. Yeah, there was always the occasional talk about some unspecified hard(ish) work. But even when it wasn’t some guru’s 598285th rehashed story about “How I quit my dayjob to do what I love” but anecdotes of <em>actual</em>, <em>real</em> people who inarguably achieved <em>actual</em>, <em>real</em> things with <em>actual</em>, <em>real</em> skills, it was usually quickly brushed off as “They just believed in it and worked hard and the universe rewarded them.” The universe? Really? What is that even?</p> <p>But sadly, I know there are people sitting in their bedrooms waiting for the universe to finally bless them with the opportunities they deserve for carefully illustrating their ~*dreams*~ in their Moleskine scrapbook “bible” every night. It sucks people in because people just love get-rich-quick schemes. They always have and they probably always will, no matter how implausible they sound. It’s like diet pills  –  we all know that it probably won’t work but we still can’t help thinking, what if this time, it’s completely different? Maybe <em>this is it</em>.</p> <p>Eventually, the new agey gibberish became impossible to ignore. I might have been easily deceived with more or less plausible sounding explanations of the human psyche, but I simply refused to believe that “the universe” was “taking care of me” or that the constellation of the planets caused bad things happening to me. And wasn’t there this thing about everything that happened to me being a result of my thoughts? Then how is it possible that some random ass planet can make my life misterable all the time? Why were <em>none</em> of those super amazing success stories adding up? And why did I <em>still</em> feel like shit? It was painful. I imagine that this is how a Scientologist must feel after crossing the bridge and finding out that they now indeed have to belive in that Xenu stuff. Or a neo nazi realising that their main ideology is based on the idea that the Germans descended from Atlantis survivors. (I didn’t make this up!)</p> <h2>Time for a reality check</h2> <p>Most of the self-help industry is a fraud and it needs to stop. It needs to stop promoting get-rich-quick and pyramid schemes as an alternative to <em>real</em> and honest skills. It needs to stop subtly telling women that they’re not enough. It needs to stop taking advantage of insecure young people and stop selling a misleading, dumbed-down version of how to get by in this world. I needs to check its fucking privilege, stop invalidating mental illness and stop flat-out lying to people.</p> <p>~*Manifesting*~ will never replace hard work. We get told to “follow our dreams” because “everything is possible” by people who claim to have done exactly that but have nothing to show for it. We’re presented with one size fits all advice and childish fantasies of what it means to be “successful”. And we buy it because we just want it <em>so badly</em>.</p> <p>I might be cynical, but I am in no way against positive thinking. In fact, focusing on the positive has taught me one of the most important lessons so far: no matter how hard and annoying it is, I just <em>have to</em> take responsibility for my life and fucking deal with it. Yes, I can take all the glitter bubble baths I want and the world still won’t be perfect, but I can improve my life. I just have to do the exact <em>opposite</em> of what every self-help philosophy was telling me to do: <strong>get my shit together and step the fuck out into the real world.</strong></p><![CDATA[5 things I learned from working in print]]>https://ines.io/blog/5-things-i-learned-from-working-in-printhttps://ines.io/blog/5-things-i-learned-from-working-in-printTue, 29 Sep 2015 00:00:00 GMT<p>For four years, I worked for a popular print magazine, developing marketing strategies, selling advertising space and coordinating partnerships. Being a monthly publication, we often jokingly compared it to giving birth once a month: at first you get all excited, then it becomes super hard and you want to die and then all of a sudden it’s over, you’re happy and hold the result in your hands and already forgot about all of the pain. (I’ve never had a baby, but that’s what I sort of imagine it to be like.) It was stressful but exciting and surprisingly, it completely changed the way I look at the internet today.</p> <h2>1. Quality wins.</h2> <p>Most of the print publications that are still around and manage to stay alive, have one thing in common: They either produce extremely trivial content, like tabloids and gossip magazines, or focus on the exact opposite: high quality editorial and design. And the worse the trivial nonsense becomes, the more demand seems to arise for quality journalism.</p> <p>I often hear people complain about the modern internet and the alledged “death of journalism”, all because lazy millenials don’t read anymore and only want bite-sized pieces of shallow content. And I’ve seen a lot of blogs and online magazines I once liked turn into “You won’t believe what happens next!” monsters. Looking at an average Facebook newsfeed, it’s easy to assume that listicles (like this one) and clickbaity headlines have won the game. But that’s simply untrue. <a href="http://www.huffingtonpost.com/noah-kagan/why-content-goes-viral-wh_b_5492767.html">Long-form</a> content gets shared more often than short content. For popular long articles, audiences like length: the longer the text, the more it gets shared. And the social networks themselves play a key role in this. Facebook has been rewarding so called “high quality content” with a higher reach <a href="https://www.facebook.com/business/news/News-Feed-FYI-Showing-More-High-Quality-Content">for years</a>.</p> <p>But it doesn’t stop there. Readability and accessibility have become staples of modern web design and traditional online media outlets have been trying recreate the “magazine reading experience” for the web with some pretty impressive art-directed long-form articles on <a href="http://www.wired.com/2015/04/silk-road-1/">Wired</a>, <a href="https://medium.com/matter/the-web-we-have-to-save-2eb1fe15a426">Medium</a>, <a href="http://www.nytimes.com/projects/2013/tomato-can-blues/">The New York Times</a> and even <a href="http://pitchfork.com/features/cover-story/reader/mgmt/">Pitchfork</a>. This is why I don’t believe in the “death of journalism”. Publishing is now easier than ever and the more fluffy content the internet produces, the more people will want the complete opposite.</p> <h2>2. A deadline is a deadline is a deadline.</h2> <p>The logistics of print publishing can be extremely complex. Printing large quantities takes time, delivery has to be coordinated and subscriptions have to be labelled and sent out. Therefore, a delay is not an option. If it needs to go to the printer today, it’s going to the printer today. And it needs to be perfect. Thus, print deadlines are often harsh and final. No “Oh shit, I forgot. Let’s do it next week!” or “I can’t find out about this now, they’re not answering the phone”. It’s quite impressive, though, how much you can get done if you absolutely <em>have to</em>, and how many things are suddenly possible.</p> <p>I’ve learned to appreciate and respect deadlines for what they are: the <em>dead final</em> last chance to accomplish something that absolutely has to be accomplished. It’s incredibly hard to get things done without a clear idea of when it needs to be finished. Tasks with no deadlines will always be pushed back and delayed until the last minute (something I’m extremely guilty of).</p> <h2>3. People still don’t trust the internet.</h2> <p>Print is prestigious and instantly makes people take you more seriously. The assumption this is based on isn’t even so wrong: establishing an actual print publication takes a lot more than setting up a WordPress blog and throwing a swanky media kit together. If you run an established print magazine, you’ve made a substantial investment, and you’re going to manage your reputation to protect it. Advertisers understand this instinctively, and obviously value it. And, believe it or not, even fairly big companies still don’t trust online advertising and social media <em>at all</em>. In four years of being in touch with different clients from all kinds of different industries, I’ve witnessed a lot of arbitrary resistance and skepticism regarding online marketing and a lot of unreasonable decisions made because “it’s print so it must be better”.</p> <p>There’s still a lot of work to be done to take people from “I’ve heard I need to do something on the internet now” to understanding how online media works and what it offers. You need a coherent strategy that plays to the strengths of the medium you’re using. Instead I see people throwing money at Facebook randomly, getting frustrated by the results for obvious reasons, and coming to the conclusion that it’s best to “not do anything with that internet again”.</p> <h2>4. The classic “advertorial” is never a good idea.</h2> <p>Traditionally, print mostly knows two different ways to present “sponsored content”: a PR text that looks like editorial content with a small caption saying “advertorial” somewhere in the corner and random unmarked product placements and endorsements. Usually it all happens in a grey area somewhere in between those two and usually it all ends up looking really bad. I’ve spent a lot of time experimenting with alternatives to classic advertorials and new ways of presenting sponsored content in print and online, and the result was always the same: native advertising only works if it’s honest and actually makes an effort to be truly <em>native</em>. And that means, providing purposeful content which is <em>just as good</em> as what the reader would normally expect to read.</p> <p>Realising this has changed my entire perception of online advertising. I’m glad to see copy-pasted press releases slowly disappear from the internet and one day, this will also happen to boring, self-important brand events and bloggers desparately spinning stories to shill sanitary wipes. (On a related note, I always found it funny how the people who voiced the loudest opposition to sponsored cooperations were usually the first ones to snatch invitations to yet another brand event with free food, drinks and goodie bags.)</p> <h2>5. Print is not dead.</h2> <p>“Oh, it’s print? Does that still make money? I thought print was dead.” While I can totally see newspapers die in favour of real-time online news reporting, there is still a demand for print and the demand is high. People are <a href="http://www.theguardian.com/commentisfree/2013/oct/13/uk-reading-more-than-ever">reading more</a> than <a href="http://www.theatlantic.com/technology/archive/2012/04/the-next-time-someone-says-the-internet-killed-reading-books-show-them-this-chart/255572/">ever before</a>. Initially, print was the mass media, and online publications were devoted to niche interests. Now mass media is almost entirely online, but falling costs have opened the door for boutique print publications. The physical and three-dimensional experience of reading a magazine works perfectly for art, fashion, design and long-form reportages. People buy print for the experience. Instead of being a necessity, it has simply evolved into a novelty.</p>
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
<channel>
<title>
<![CDATA[ ines.io ]]>
</title>
<description>
<![CDATA[ ines.io ]]>
</description>
<link>https://ines.io</link>
<generator>GatsbyJS</generator>
<lastBuildDate>Thu, 29 May 2025 06:26:48 GMT</lastBuildDate>
<item>
<title>
<![CDATA[ Making beautiful slides for your talks, part 5: Sharing your presentations ]]>
</title>
<description>
<![CDATA[ The previous four parts of this series all focused on the process of creating slides and writing talks. But what’s next, now that you’ve… ]]>
</description>
<link>https://ines.io/blog/beautiful-slides-talks-part-5-sharing-presentations</link>
<guid isPermaLink="false">https://ines.io/blog/beautiful-slides-talks-part-5-sharing-presentations</guid>
<pubDate>Mon, 14 Apr 2025 00:00:00 GMT</pubDate>
<content:encoded><p>The previous four parts of this series all focused on the process of <em>creating</em> slides and writing talks. But what’s next, now that you’ve given a successful presentation with your very own beautiful slide deck? In this post, I’ve collected tips for how to share your slides with the world, including some of the tools and techniques I use.</p> <p>🎨 <strong>Part 1:</strong> <a href="/blog/beginners-guide-beautiful-slides-talks">Design tips for beginners</a> ✨ <strong>Part 2:</strong> <a href="/blog/beautiful-slides-talks-part-2-aesthetics">All about aesthetics</a> 🛠️ <strong>Part 3:</strong> <a href="/blog/beautiful-slides-talks-part-3-technical-content">Technical content</a> 🧩 <strong>Part 4:</strong> <a href="/blog/beautiful-slides-talks-part-4-design-elements">Design elements</a> 💌 <strong>Part 5: Sharing your presentations</strong></p> <p><em><strong>Disclaimer</strong> (since my previous post also got widely shared outside of my circles): This blog post series is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p> <hr> <h2>Uploading your slides</h2> <p>I’ve been using <a href="https://speakerdeck.com/inesmontani">Speaker Deck</a> pretty much since I started public speaking. The basic plan is free and turns your PDFs into a digital slideshow, with options to add your title and abstract. The <a href="https://speakerdeck.com/pro">pro plan</a> for $80 a year adds the ability to include an embedded video link for talk recordings and add further links and resources (<a href="https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai#video">see here</a> for an example). It also lets you publish your slides with a private link, which I often use to share work in progress with others. If giving talks and presentations is part of your job or something you enjoy, I highly recommend giving the pro features a try!</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/908f297176ef07c54a5f52aa45f62f1d/df49a/slides_sharing-speakerdeck.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 38.38383838383839%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBP/EABUBAQEAAAAAAAAAAAAAAAAAAAED/9oADAMBAAIQAxAAAAHZJUuJP//EABcQAQEBAQAAAAAAAAAAAAAAAAIDASH/2gAIAQEAAQUC4sVZDRWTz//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/Aaf/xAAWEQADAAAAAAAAAAAAAAAAAAAQEiH/2gAIAQIBAT8BWj//xAAbEAACAgMBAAAAAAAAAAAAAAABEQACIVGBof/aAAgBAQAGPwJknhMRq8ajFPJ//8QAGhABAAIDAQAAAAAAAAAAAAAAAQARITFBcf/aAAgBAQABPyHVx8EctQG6Rl0VkT//2gAMAwEAAgADAAAAEPPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxAf/8QAGBEBAQADAAAAAAAAAAAAAAAAAQAhMfD/2gAIAQIBAT8QAo7ZOG//xAAbEAEAAgIDAAAAAAAAAAAAAAABESEAYTGBwf/aAAgBAQABPxBSQ5FGnW8YmJCSJu1xmoEl7gfc/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/908f297176ef07c54a5f52aa45f62f1d/55fac/slides_sharing-speakerdeck.webp 198w, /static/908f297176ef07c54a5f52aa45f62f1d/5b4d3/slides_sharing-speakerdeck.webp 395w, /static/908f297176ef07c54a5f52aa45f62f1d/848e4/slides_sharing-speakerdeck.webp 790w, /static/908f297176ef07c54a5f52aa45f62f1d/8d239/slides_sharing-speakerdeck.webp 1185w, /static/908f297176ef07c54a5f52aa45f62f1d/888d0/slides_sharing-speakerdeck.webp 1580w, /static/908f297176ef07c54a5f52aa45f62f1d/9ef1d/slides_sharing-speakerdeck.webp 3974w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/908f297176ef07c54a5f52aa45f62f1d/9db10/slides_sharing-speakerdeck.jpg 198w, /static/908f297176ef07c54a5f52aa45f62f1d/16a07/slides_sharing-speakerdeck.jpg 395w, /static/908f297176ef07c54a5f52aa45f62f1d/d27a6/slides_sharing-speakerdeck.jpg 790w, /static/908f297176ef07c54a5f52aa45f62f1d/0b93b/slides_sharing-speakerdeck.jpg 1185w, /static/908f297176ef07c54a5f52aa45f62f1d/8f04a/slides_sharing-speakerdeck.jpg 1580w, /static/908f297176ef07c54a5f52aa45f62f1d/df49a/slides_sharing-speakerdeck.jpg 3974w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/908f297176ef07c54a5f52aa45f62f1d/d27a6/slides_sharing-speakerdeck.jpg" alt="Screenshot of my Speaker Deck profile" title="Overview and individual talk on my &lt;a href=&#39;https://speakerdeck.com/inesmontani&#39; target=&#39;_blank&#39;&gt;Speaker Deck profile&lt;/a&gt;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Overview and individual talk on my <a href='https://speakerdeck.com/inesmontani' target='_blank'>Speaker Deck profile</a></p></figcaption> </figure> <p>Alternative options are <a href="https://www.slideshare.net/">Slideshare</a> or simply a <a href="https://workspace.google.com/products/drive/">Google Drive</a> or <a href="https://dropbox.com">Dropbox</a> link with the PDF. If you used <a href="https://workspace.google.com/products/slides/">Google Slides</a> to make your presentation, you also get a shareable link out of the box.</p> <p>Before sharing your presentation, convert it to a PDF document with each stage of your animations as separate slides. This ensures that everyone can view your slides as they were intended, and that viewers can click through them just like you did during your presentation. I typically already have the PDF ready when I give my talk, in case there are technical problems and I can’t present with Keynote on my own laptop.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/d1074291d231262c8c12b9e1f6ea0e93/c4599/slides_sharing-export.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.37373737373737%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAZ9gKkMP/8QAGhAAAQUBAAAAAAAAAAAAAAAAAQACBBESE//aAAgBAQABBQI6uEHcxpf/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwFX/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAREv/aAAgBAgEBPwFNLi//xAAXEAADAQAAAAAAAAAAAAAAAAAAARBx/9oACAEBAAY/Ah7P/8QAGhAAAgIDAAAAAAAAAAAAAAAAAREAkSFBUf/aAAgBAQABPyEHoFvsBw3gbO5//9oADAMBAAIAAwAAABDwL//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPxAcY//EABcRAQEBAQAAAAAAAAAAAAAAAAEAIVH/2gAIAQIBAT8QyIHW/8QAGxABAAICAwAAAAAAAAAAAAAAAQARUXExQWH/2gAIAQEAAT8QrNk+udy0UYakAIOXuf/Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/d1074291d231262c8c12b9e1f6ea0e93/55fac/slides_sharing-export.webp 198w, /static/d1074291d231262c8c12b9e1f6ea0e93/5b4d3/slides_sharing-export.webp 395w, /static/d1074291d231262c8c12b9e1f6ea0e93/848e4/slides_sharing-export.webp 790w, /static/d1074291d231262c8c12b9e1f6ea0e93/8d239/slides_sharing-export.webp 1185w, /static/d1074291d231262c8c12b9e1f6ea0e93/888d0/slides_sharing-export.webp 1580w, /static/d1074291d231262c8c12b9e1f6ea0e93/11499/slides_sharing-export.webp 2317w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/d1074291d231262c8c12b9e1f6ea0e93/9db10/slides_sharing-export.jpg 198w, /static/d1074291d231262c8c12b9e1f6ea0e93/16a07/slides_sharing-export.jpg 395w, /static/d1074291d231262c8c12b9e1f6ea0e93/d27a6/slides_sharing-export.jpg 790w, /static/d1074291d231262c8c12b9e1f6ea0e93/0b93b/slides_sharing-export.jpg 1185w, /static/d1074291d231262c8c12b9e1f6ea0e93/8f04a/slides_sharing-export.jpg 1580w, /static/d1074291d231262c8c12b9e1f6ea0e93/c4599/slides_sharing-export.jpg 2317w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/d1074291d231262c8c12b9e1f6ea0e93/d27a6/slides_sharing-export.jpg" alt="Exporting slides with animations in Keynote" title="Exporting a PDF in Keynote with each stage of the build as a separate slide" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Exporting a PDF in Keynote with each stage of the build as a separate slide</p></figcaption> </figure> <hr> <h2>Sharing your slides on social media</h2> <p>As I mentioned in a <a href="/blog/beautiful-slides-talks-part-2-aesthetics">part 2</a> of this series, having clear and punchy statement slides increases the likelihood of audience members snapping photos during your presentation and sharing them online. I’ve gotten a lot of great feedback this way, so I always check my mentions on social media after a talk and read, like or share what others have said.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/97b1d3e7c6ff425ad215ac322a5cadf9/1d134/slides_sharing-others.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 33.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBP/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAG3cSyCf//EABoQAAICAwAAAAAAAAAAAAAAAAACAQMREhP/2gAIAQEAAQUCzaK2i964P//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/AYf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPwGn/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAECERIxMoH/2gAIAQEABj8C3fRXyqZP/8QAGhAAAgMBAQAAAAAAAAAAAAAAAREAITFBkf/aAAgBAQABPyEhFMzChCLhTXZ2H4Z//9oADAMBAAIAAwAAABCIH//EABURAQEAAAAAAAAAAAAAAAAAAAAB/9oACAEDAQE/ECR//8QAFREBAQAAAAAAAAAAAAAAAAAAEQD/2gAIAQIBAT8QTN//xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAxIVFhkf/aAAgBAQABPxBzugAQqF+uJr4x+jANEHGAIpTqz//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/97b1d3e7c6ff425ad215ac322a5cadf9/55fac/slides_sharing-others.webp 198w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/5b4d3/slides_sharing-others.webp 395w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/848e4/slides_sharing-others.webp 790w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/8d239/slides_sharing-others.webp 1185w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/888d0/slides_sharing-others.webp 1580w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/da28f/slides_sharing-others.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/97b1d3e7c6ff425ad215ac322a5cadf9/9db10/slides_sharing-others.jpg 198w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/16a07/slides_sharing-others.jpg 395w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/d27a6/slides_sharing-others.jpg 790w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/0b93b/slides_sharing-others.jpg 1185w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/8f04a/slides_sharing-others.jpg 1580w, /static/97b1d3e7c6ff425ad215ac322a5cadf9/1d134/slides_sharing-others.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/97b1d3e7c6ff425ad215ac322a5cadf9/d27a6/slides_sharing-others.jpg" alt="Screenshots of posts by others about my talks" title="Posts by others featuring photos from my talks (&lt;a href=&#39;https://bsky.app/profile/arnicas.bsky.social/post/3kuxjzdpnpz2o&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://x.com/EdwigeFiaclou/status/1777359731213893859&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://x.com/hendorf/status/1681902706204585987&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Posts by others featuring photos from my talks (<a href='https://bsky.app/profile/arnicas.bsky.social/post/3kuxjzdpnpz2o' target='_blank'>#1</a>, <a href='https://x.com/EdwigeFiaclou/status/1777359731213893859' target='_blank'>#2</a>, <a href='https://x.com/hendorf/status/1681902706204585987' target='_blank'>#3</a>)</p></figcaption> </figure> <p>After a conference, I share my <a href="https://speakerdeck.com/inesmontani">Speaker Deck</a> link with a screenshot of the title slide or a small collage of my favorite or of the most representative slides. I sometimes also combine it with my <a href="/blog/year-in-review-2024">event roundups</a> and recaps where I summarize the highlights and most interesting takeaways from the conference.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/4a9b05ea245f549d63ae3eaef8d97c4a/fae6f/slides_sharing-recaps.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 53.03030303030303%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAgP/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAbWZjysHI0//xAAaEAACAgMAAAAAAAAAAAAAAAAAEQECEiFD/9oACAEBAAEFAmTZWyg5rZ//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPwGH/8QAFxEBAAMAAAAAAAAAAAAAAAAAAAIRIf/aAAgBAgEBPwGOqf/EABUQAQEAAAAAAAAAAAAAAAAAABAC/9oACAEBAAY/AmX/xAAaEAEAAgMBAAAAAAAAAAAAAAABABFBgZEh/9oACAEBAAE/IRQEPeQYzE2VfZS+swCf/9oADAMBAAIAAwAAABDE7//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/ECP/xAAWEQEBAQAAAAAAAAAAAAAAAAARAAH/2gAIAQIBAT8Q0jYX/8QAHBAAAgICAwAAAAAAAAAAAAAAAREAITGBQWGh/9oACAEBAAE/EBAgtGJw3Kh4W4ggIBZgonHMUO0qtVQYFD3qf//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/4a9b05ea245f549d63ae3eaef8d97c4a/55fac/slides_sharing-recaps.webp 198w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/5b4d3/slides_sharing-recaps.webp 395w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/848e4/slides_sharing-recaps.webp 790w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/8d239/slides_sharing-recaps.webp 1185w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/888d0/slides_sharing-recaps.webp 1580w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/c4540/slides_sharing-recaps.webp 2368w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/4a9b05ea245f549d63ae3eaef8d97c4a/9db10/slides_sharing-recaps.jpg 198w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/16a07/slides_sharing-recaps.jpg 395w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/d27a6/slides_sharing-recaps.jpg 790w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/0b93b/slides_sharing-recaps.jpg 1185w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/8f04a/slides_sharing-recaps.jpg 1580w, /static/4a9b05ea245f549d63ae3eaef8d97c4a/fae6f/slides_sharing-recaps.jpg 2368w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/4a9b05ea245f549d63ae3eaef8d97c4a/d27a6/slides_sharing-recaps.jpg" alt="Screenshots of LinkedIn and Bluesky posts" title="&lt;a href=&#39;https://www.linkedin.com/posts/inesmontani_its-a-wrap-what-a-great-pyconde-pydata-activity-7188936519850622976-k7XP/&#39; target=&#39;_blank&#39;&gt;Event roundup&lt;/a&gt; on LinkedIn and &lt;a href=&#39;https://bsky.app/profile/inesmontani.bsky.social/post/3kvnwrgy2s62p&#39; target=&#39;_blank&#39;&gt;talk summary&lt;/a&gt; on Bluesky" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p><a href='https://www.linkedin.com/posts/inesmontani_its-a-wrap-what-a-great-pyconde-pydata-activity-7188936519850622976-k7XP/' target='_blank'>Event roundup</a> on LinkedIn and <a href='https://bsky.app/profile/inesmontani.bsky.social/post/3kvnwrgy2s62p' target='_blank'>talk summary</a> on Bluesky</p></figcaption> </figure> <p>Posting about a conference talk is also a great way to support the organizers and thank them for inviting you. I often do one post in the lead-up to a conference to let people know I’m speaking, and one afterwards to share my slides and experiences. Once the video recording of my talk is live, I update my deck on Speaker Deck to include the <a href="https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai#video">embedded video</a> (which is a feature available on the <a href="https://speakerdeck.com/pro">pro plan</a>).</p> <h3>Talk summary threads</h3> <p>In addition to sharing my presentation links, I often include a summary of the talk’s most important points. You can even go one step further and prepare a thread for a platform like <a href="https://bsky.app/profile/inesmontani.bsky.social">Bluesky</a> or <a href="https://sigmoid.social/@ines">Mastodon</a> that summarizes each slide, like I’ve done for <a href="https://x.com/_inesmontani/status/1226501968832671744">PyCon Colombia</a> or <a href="https://x.com/_inesmontani/status/1681700743693172738">EuroPython</a> in the past.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/019f6bcf7de774165aa07869d52a3a41/3045a/slides_sharing-threads.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 165.15151515151513%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAhABQDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAIDAQQF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQIA/9oADAMBAAIQAxAAAAH2+bXMpYdxVStxQYmksGNAH//EAB0QAAICAgMBAAAAAAAAAAAAAAECAxIRMQATISL/2gAIAQEAAQUC0ZZaPFLdTPg9gIRgymgayqqNlSfc/Keg7Guf/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAg/9oACAEDAQE/AYOP/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAg/9oACAECAQE/AYK//8QAIRAAAgIBAgcAAAAAAAAAAAAAABEBAlEhIhIgMTJBUpH/2gAIAQEABj8CQuF6ZGlqdslZ9owOCds9clIiui+DSJ2VKqvgxyf/xAAdEAADAAICAwAAAAAAAAAAAAAAAREhMUFhEFHR/9oACAEBAAE/IbGGNn5FwKzYo3RDFeOYRMU5RCKGl2oNuzaP9KQ3hArM9GjnyPb5G9EO6ehsrQ2mjx//2gAMAwEAAgADAAAAEGvBPfv/AP/EABgRAQEBAQEAAAAAAAAAAAAAAAEAETEQ/9oACAEDAQE/ENDtpIrraR18/8QAGREBAQEAAwAAAAAAAAAAAAAAAQARECEx/9oACAECAQE/EMWyQM6m8cf/xAAhEAEAAwABBAIDAAAAAAAAAAABABEhMUFRgaEQYXGx8f/aAAgBAQABPxCxiD1DIBMncB9EYoSVKnDb8xJPe4ajWbxBoWjtVdGEGh4teRjLgSw23rRSPFFECDs23BYG9k/ucOFxTaSp2uLAfhjFqOqo/hPcnpfH/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/019f6bcf7de774165aa07869d52a3a41/55fac/slides_sharing-threads.webp 198w, /static/019f6bcf7de774165aa07869d52a3a41/5b4d3/slides_sharing-threads.webp 395w, /static/019f6bcf7de774165aa07869d52a3a41/848e4/slides_sharing-threads.webp 790w, /static/019f6bcf7de774165aa07869d52a3a41/8d239/slides_sharing-threads.webp 1185w, /static/019f6bcf7de774165aa07869d52a3a41/888d0/slides_sharing-threads.webp 1580w, /static/019f6bcf7de774165aa07869d52a3a41/1b25c/slides_sharing-threads.webp 2511w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/019f6bcf7de774165aa07869d52a3a41/9db10/slides_sharing-threads.jpg 198w, /static/019f6bcf7de774165aa07869d52a3a41/16a07/slides_sharing-threads.jpg 395w, /static/019f6bcf7de774165aa07869d52a3a41/d27a6/slides_sharing-threads.jpg 790w, /static/019f6bcf7de774165aa07869d52a3a41/0b93b/slides_sharing-threads.jpg 1185w, /static/019f6bcf7de774165aa07869d52a3a41/8f04a/slides_sharing-threads.jpg 1580w, /static/019f6bcf7de774165aa07869d52a3a41/3045a/slides_sharing-threads.jpg 2511w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/019f6bcf7de774165aa07869d52a3a41/d27a6/slides_sharing-threads.jpg" alt="Screenshots of Twitter threads" title="Twitter threads summarizing my talks at &lt;a href=&#39;https://x.com/_inesmontani/status/1226501968832671744&#39; target=&#39;_blank&#39;&gt;PyCon Colombia&lt;/a&gt; and &lt;a href=&#39;https://x.com/_inesmontani/status/1681700743693172738&#39; target=&#39;_blank&#39;&gt;EuroPython&lt;/a&gt;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Twitter threads summarizing my talks at <a href='https://x.com/_inesmontani/status/1226501968832671744' target='_blank'>PyCon Colombia</a> and <a href='https://x.com/_inesmontani/status/1681700743693172738' target='_blank'>EuroPython</a></p></figcaption> </figure> <p>This takes more work, but it’s also a <strong>great exercise</strong>! Condensing each point into 300 characters or less helped me a lot during my practice. I sometimes also use Keynote’s <a href="https://support.apple.com/en-bw/guide/keynote/tand1a4ee7c/mac">presenter notes</a> feature to add slide summaries as I write my talks, which I can then reuse for social media or even for a blog post later on (see below).</p> <h3>LinkedIn carousels</h3> <p>Carousels are LinkedIn’s native post format for PDFs, which you can upload from the post composer. Rumor has it that the platform awards native carousel posts with more reach and penalizes posts with external links (which is why you often see people post links in comments). However, this frequently changes, so I wouldn’t overthink it. I usually focus on the content of my posts, rather than over-optimizing for the platform and reach.</p> <hr> <h2>Other ideas</h2> <h3>Convert talks into blog posts</h3> <p>Writing a good talk takes a significant amount of time and effort, so the content you create shouldn’t be limited to those who could make it to your presentation in person! Plus, not everyone likes flicking through slides or watching video recordings, so blog posts are a great alternative.</p> <p>For example, I published blog post versions of my talks on the <a href="https://explosion.ai/blog/history-web-future-ai">history of the web</a> and <a href="https://explosion.ai/blog/human-in-the-loop-distillation">human-in-the-loop distillation</a>, and wrote up the <a href="https://ines.io/blog/window-knocking-machine-test/">“window-knocking machine test”</a>, a point I’d included in several talks to illustrate how to imagine technology of the future and why it’s important to think beyond chat bots.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/39c9ec5b90449a0040d92fb46b61fdf5/1d134/slides_sharing-blog.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.878787878787875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQB/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGuoXBh/8QAGhAAAgIDAAAAAAAAAAAAAAAAAAMBAgQSE//aAAgBAQABBQJeNrbmQo//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGq/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEREkH/2gAIAQIBAT8ByCiP/8QAGRAAAgMBAAAAAAAAAAAAAAAAAAEiMTKh/9oACAEBAAY/AlLhZpn/xAAYEAEAAwEAAAAAAAAAAAAAAAABABEhUf/aAAgBAQABPyEWVxeLgEjOf//aAAwDAQACAAMAAAAQ88//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QEWr/xAAYEQACAwAAAAAAAAAAAAAAAAAAASExYf/aAAgBAgEBPxByzUYn/8QAGRABAQADAQAAAAAAAAAAAAAAAREAITFR/9oACAEBAAE/EGYywIVE95gCIbW9xbb1u5rP/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/39c9ec5b90449a0040d92fb46b61fdf5/55fac/slides_sharing-blog.webp 198w, /static/39c9ec5b90449a0040d92fb46b61fdf5/5b4d3/slides_sharing-blog.webp 395w, /static/39c9ec5b90449a0040d92fb46b61fdf5/848e4/slides_sharing-blog.webp 790w, /static/39c9ec5b90449a0040d92fb46b61fdf5/8d239/slides_sharing-blog.webp 1185w, /static/39c9ec5b90449a0040d92fb46b61fdf5/888d0/slides_sharing-blog.webp 1580w, /static/39c9ec5b90449a0040d92fb46b61fdf5/da28f/slides_sharing-blog.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/39c9ec5b90449a0040d92fb46b61fdf5/9db10/slides_sharing-blog.jpg 198w, /static/39c9ec5b90449a0040d92fb46b61fdf5/16a07/slides_sharing-blog.jpg 395w, /static/39c9ec5b90449a0040d92fb46b61fdf5/d27a6/slides_sharing-blog.jpg 790w, /static/39c9ec5b90449a0040d92fb46b61fdf5/0b93b/slides_sharing-blog.jpg 1185w, /static/39c9ec5b90449a0040d92fb46b61fdf5/8f04a/slides_sharing-blog.jpg 1580w, /static/39c9ec5b90449a0040d92fb46b61fdf5/1d134/slides_sharing-blog.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/39c9ec5b90449a0040d92fb46b61fdf5/d27a6/slides_sharing-blog.jpg" alt="Screenshots of talks and their corresponding blog posts" title="Examples of talks turned into blog posts (&lt;a href=&#39;https://explosion.ai/blog/history-web-future-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://explosion.ai/blog/human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://ines.io/blog/window-knocking-machine-test/&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of talks turned into blog posts (<a href='https://explosion.ai/blog/history-web-future-ai' target='_blank'>#1</a>, <a href='https://explosion.ai/blog/human-in-the-loop-distillation' target='_blank'>#2</a>, <a href='https://ines.io/blog/window-knocking-machine-test/' target='_blank'>#3</a>)</p></figcaption> </figure> <p>If your writing process included presenter notes or a talk script, you can use it as the foundation of your blog post. Another bonus is that you’ll be able to reuse any graphics and visualizations you’ve already created for your slides. You can either include screenshots of whole slides, or extract the individual graphics. I typically create a copy of my presentation in Keynote, remove the background, logo and other elements, and then screenshot the graphic to use in my post.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/44ccebca6563ec231e71d3c99537a2ca/1d134/slides_sharing-blog-graphics.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 28.28282828282828%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHSsFMgk//EABgQAAIDAAAAAAAAAAAAAAAAAAACESEy/9oACAEBAAEFAopcn//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/AWf/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPwFn/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAQ/9oACAEBAAY/AmM//8QAGRAAAwADAAAAAAAAAAAAAAAAAAFBETFR/9oACAEBAAE/IeqCPdBZrP/aAAwDAQACAAMAAAAQ/wDP/8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQMBAT8Qs//EABURAQEAAAAAAAAAAAAAAAAAABAx/9oACAECAQE/EJP/xAAYEAEBAQEBAAAAAAAAAAAAAAABESEAYf/aAAgBAQABPxCkFLpeUpiMs4i6Vp553//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/44ccebca6563ec231e71d3c99537a2ca/55fac/slides_sharing-blog-graphics.webp 198w, /static/44ccebca6563ec231e71d3c99537a2ca/5b4d3/slides_sharing-blog-graphics.webp 395w, /static/44ccebca6563ec231e71d3c99537a2ca/848e4/slides_sharing-blog-graphics.webp 790w, /static/44ccebca6563ec231e71d3c99537a2ca/8d239/slides_sharing-blog-graphics.webp 1185w, /static/44ccebca6563ec231e71d3c99537a2ca/888d0/slides_sharing-blog-graphics.webp 1580w, /static/44ccebca6563ec231e71d3c99537a2ca/da28f/slides_sharing-blog-graphics.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/44ccebca6563ec231e71d3c99537a2ca/9db10/slides_sharing-blog-graphics.jpg 198w, /static/44ccebca6563ec231e71d3c99537a2ca/16a07/slides_sharing-blog-graphics.jpg 395w, /static/44ccebca6563ec231e71d3c99537a2ca/d27a6/slides_sharing-blog-graphics.jpg 790w, /static/44ccebca6563ec231e71d3c99537a2ca/0b93b/slides_sharing-blog-graphics.jpg 1185w, /static/44ccebca6563ec231e71d3c99537a2ca/8f04a/slides_sharing-blog-graphics.jpg 1580w, /static/44ccebca6563ec231e71d3c99537a2ca/1d134/slides_sharing-blog-graphics.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/44ccebca6563ec231e71d3c99537a2ca/d27a6/slides_sharing-blog-graphics.jpg" alt="Screenshot of slide turned into blog post illustration" title="Graphic from my &lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;talk&lt;/a&gt; on human-in-the-loop distillation converted for the &lt;a href=&#39;https://explosion.ai/blog/human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;blog post&lt;/a&gt;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Graphic from my <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>talk</a> on human-in-the-loop distillation converted for the <a href='https://explosion.ai/blog/human-in-the-loop-distillation' target='_blank'>blog post</a></p></figcaption> </figure> <h3>Add your talks to your website</h3> <p>If you have a personal website or portfolio, include a list of your previous and upcoming talks! I have a list of selected talks on <a href="/#talks">this website</a> and we also publish past and future events like talks, workshops and podcast interviews on the <a href="https://explosion.ai/events">Explosion website</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/5e6679135d3a931e91c7c41b23635fad/1d134/slides_sharing-events.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 35.85858585858586%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3KFB/8QAFhAAAwAAAAAAAAAAAAAAAAAAEBEh/9oACAEBAAEFAox//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAFxABAQEBAAAAAAAAAAAAAAAAAQAhEf/aAAgBAQABPyHWydeMN//aAAwDAQACAAMAAAAQgA//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEAAgMAAAAAAAAAAAAAAAABABEhMUH/2gAIAQEAAT8QtQCnZmaCJU//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/5e6679135d3a931e91c7c41b23635fad/55fac/slides_sharing-events.webp 198w, /static/5e6679135d3a931e91c7c41b23635fad/5b4d3/slides_sharing-events.webp 395w, /static/5e6679135d3a931e91c7c41b23635fad/848e4/slides_sharing-events.webp 790w, /static/5e6679135d3a931e91c7c41b23635fad/8d239/slides_sharing-events.webp 1185w, /static/5e6679135d3a931e91c7c41b23635fad/888d0/slides_sharing-events.webp 1580w, /static/5e6679135d3a931e91c7c41b23635fad/da28f/slides_sharing-events.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/5e6679135d3a931e91c7c41b23635fad/9db10/slides_sharing-events.jpg 198w, /static/5e6679135d3a931e91c7c41b23635fad/16a07/slides_sharing-events.jpg 395w, /static/5e6679135d3a931e91c7c41b23635fad/d27a6/slides_sharing-events.jpg 790w, /static/5e6679135d3a931e91c7c41b23635fad/0b93b/slides_sharing-events.jpg 1185w, /static/5e6679135d3a931e91c7c41b23635fad/8f04a/slides_sharing-events.jpg 1580w, /static/5e6679135d3a931e91c7c41b23635fad/1d134/slides_sharing-events.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/5e6679135d3a931e91c7c41b23635fad/d27a6/slides_sharing-events.jpg" alt="Screenshots of list of talks on ines.io and explosion.ai" title="Lists of upcoming and past talks on &lt;a href=&#39;https://ines.io/#talks&#39; target=&#39;_blank&#39;&gt;ines.io&lt;/a&gt; and &lt;a href=&#39;https://explosion.ai/events&#39; target=&#39;_blank&#39;&gt;explosion.ai&lt;/a&gt;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Lists of upcoming and past talks on <a href='https://ines.io/#talks' target='_blank'>ines.io</a> and <a href='https://explosion.ai/events' target='_blank'>explosion.ai</a></p></figcaption> </figure> <p>For each talk, I include a link to the slides and recording, if available, and I’ve also added options for written summaries and further resources. Implementation-wise, it’s a simple and <a href="https://css-tricks.com/making-tables-responsive-with-minimal-css/">responsive</a> HTML table, which is automatically generated from a JSON file:</p> <div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"date"</span><span class="token operator">:</span> <span class="token string">"2024-06-15"</span><span class="token punctuation">,</span> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation"</span><span class="token punctuation">,</span> <span class="token property">"event"</span><span class="token operator">:</span> <span class="token string">"PyData London"</span><span class="token punctuation">,</span> <span class="token property">"location"</span><span class="token operator">:</span> <span class="token string">"London (United Kingdom)"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://pydata.org/london2024"</span><span class="token punctuation">,</span> <span class="token property">"slides"</span><span class="token operator">:</span> <span class="token string">"https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation"</span><span class="token punctuation">,</span> <span class="token property">"video"</span><span class="token operator">:</span> <span class="token string">"https://www.youtube.com/watch?v=pgLLgvjZ_FA"</span><span class="token punctuation">,</span> <span class="token property">"notes"</span><span class="token operator">:</span> <span class="token string">"https://explosion.ai/blog/human-in-the-loop-distillation"</span> <span class="token punctuation">}</span></code></pre></div> <hr> <p>Thanks for following along with this series and all the great feedback 🖤 Let me know if there are any other topics you’d like me to cover and I’ll keep adding to this series in the future. And of course, if you’ve created your own slides using some of my posts for inspiration, feel free to email me – I’d love to check them out!</p></content:encoded>
</item>
<item>
<title>
<![CDATA[ Making beautiful slides for your talks, part 4: Design elements and inspiration ]]>
</title>
<description>
<![CDATA[ As a teenager, I was really into creating and designing websites. It was my biggest hobby (before being online 24/7 was common or “cool… ]]>
</description>
<link>https://ines.io/blog/beautiful-slides-talks-part-4-design-elements</link>
<guid isPermaLink="false">https://ines.io/blog/beautiful-slides-talks-part-4-design-elements</guid>
<pubDate>Sun, 13 Apr 2025 00:00:00 GMT</pubDate>
<content:encoded><p>As a <a href="/blog/how-i-started-coding">teenager</a>, I was really into creating and designing websites. It was my biggest hobby (before being online 24/7 was common or “cool”), and there were many days where I couldn’t wait to get home from school and continue working on a new design. To this day, this is the feeling I’m trying to recapture when making slides. If opening up the presentation to work on it is getting me all excited, I know I’m on the right track.</p> <p>In this series, I’ve already covered general design tips and how to find an aesthetic, so this post dives deeper into the little details. I’ll include examples of visual design elements I used to implement different aesthetics and share some resources and inspiration you can use for your talks.</p> <p>🎨 <strong>Part 1:</strong> <a href="/blog/beginners-guide-beautiful-slides-talks">Design tips for beginners</a> ✨ <strong>Part 2:</strong> <a href="/blog/beautiful-slides-talks-part-2-aesthetics">All about aesthetics</a> 🛠️ Part 3: <a href="/blog/beautiful-slides-talks-part-3-technical-content">Technical content</a> 🧩 <strong>Part 4: Design elements</strong> 💌 <strong>Part 5:</strong> <a href="/blog/beautiful-slides-talks-part-5-sharing-presentations">Sharing your presentations</a></p> <p><em><strong>Disclaimer</strong> (since my previous post also got widely shared outside of my circles): This blog post series is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p> <hr> <h2>Design elements</h2> <p>Not everything you use has to have a deeper meaning – most of the time, I use design elements because I think they look kinda cool. I think that’s fine, as long as you don’t overdo it. Attention to detail also helps keeping your audience engaged and I like the element of surprise and including little details to discover on each new slide.</p> <h3>Boxes and containers</h3> <p>Boxes and containers are the simplest and most obvious design elements: they group content together and ensure that text remains readable, e.g. by giving it a solid white background color. I like to play around with different styles like borders, background opacity, shadows and rounded corners to match the style of my presentation.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/1d134/slides_elements-boxes.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.878787878787875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAME/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwT/2gAMAwEAAhADEAAAAdwQbAKP/8QAGRAAAgMBAAAAAAAAAAAAAAAAAAIBAyES/9oACAEBAAEFAusWyGMP/8QAGBEAAgMAAAAAAAAAAAAAAAAAAQIQESH/2gAIAQMBAT8BOPQj/8QAGBEAAgMAAAAAAAAAAAAAAAAAABEBEiL/2gAIAQIBAT8BWWWk/8QAGhAAAAcAAAAAAAAAAAAAAAAAAAECEBExQf/aAAgBAQAGPwIlYItv/8QAGBABAAMBAAAAAAAAAAAAAAAAAQARIXH/2gAIAQEAAT8hAbTjY6jFXcGmCT//2gAMAwEAAgADAAAAEPQ//8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEhMfH/2gAIAQMBAT8QjUaJH//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxAIhaX/xAAbEAEAAwADAQAAAAAAAAAAAAABABEhMUFR4f/aAAgBAQABPxAtCrKyOuIMLqWw2LFF5X2f/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/55fac/slides_elements-boxes.webp 198w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/5b4d3/slides_elements-boxes.webp 395w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/848e4/slides_elements-boxes.webp 790w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/8d239/slides_elements-boxes.webp 1185w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/888d0/slides_elements-boxes.webp 1580w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/da28f/slides_elements-boxes.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/9db10/slides_elements-boxes.jpg 198w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/16a07/slides_elements-boxes.jpg 395w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/d27a6/slides_elements-boxes.jpg 790w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/0b93b/slides_elements-boxes.jpg 1185w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/8f04a/slides_elements-boxes.jpg 1580w, /static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/1d134/slides_elements-boxes.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/d27a6/slides_elements-boxes.jpg" alt="Examples of boxes and containers used in my slides" title="Examples of boxes and containers used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/ki-zwischen-freiheit-und-kontrolle-the-ai-revolution-will-not-be-monopolized&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#4&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020&#39; target=&#39;_blank&#39;&gt;#5&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/what-the-history-of-the-web-can-teach-us-about-the-future-of-ai&#39; target=&#39;_blank&#39;&gt;#6&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of boxes and containers used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/ki-zwischen-freiheit-und-kontrolle-the-ai-revolution-will-not-be-monopolized' target='_blank'>#3</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#4</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#5</a>, <a href='https://speakerdeck.com/inesmontani/what-the-history-of-the-web-can-teach-us-about-the-future-of-ai' target='_blank'>#6</a>)</p></figcaption> </figure> <h3>Speech bubbles, arrows and annotations</h3> <p>Many of my talks include diagrams and flowcharts to explain <a href="/blog/beautiful-slides-talks-part-3-technical-content">technical concepts</a>. These usually combine boxes, arrows and speech bubbles for annotations, and are great to visualize dynamic processes – much better than just plain text.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/7a14784c299a0fb3ffa24c1214ffc9f5/fdb5a/slides_technical-flowchart-example.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 30.303030303030305%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3KAH/8QAFxABAAMAAAAAAAAAAAAAAAAAAAERQf/aAAgBAQABBQLUW//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAAQIf/aAAgBAQAGPwJU/8QAGhAAAgMBAQAAAAAAAAAAAAAAASEAETFBUf/aAAgBAQABPyGi/IQSdUWV1V5P/9oADAMBAAIAAwAAABDwD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAAIDAQAAAAAAAAAAAAAAAAERADFBcf/aAAgBAQABPxADICGNTIEy3FWbW8N7P//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/7a14784c299a0fb3ffa24c1214ffc9f5/55fac/slides_technical-flowchart-example.webp 198w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/5b4d3/slides_technical-flowchart-example.webp 395w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/848e4/slides_technical-flowchart-example.webp 790w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/8d239/slides_technical-flowchart-example.webp 1185w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/888d0/slides_technical-flowchart-example.webp 1580w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/548e7/slides_technical-flowchart-example.webp 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/7a14784c299a0fb3ffa24c1214ffc9f5/9db10/slides_technical-flowchart-example.jpg 198w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/16a07/slides_technical-flowchart-example.jpg 395w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/d27a6/slides_technical-flowchart-example.jpg 790w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/0b93b/slides_technical-flowchart-example.jpg 1185w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/8f04a/slides_technical-flowchart-example.jpg 1580w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/fdb5a/slides_technical-flowchart-example.jpg 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/7a14784c299a0fb3ffa24c1214ffc9f5/d27a6/slides_technical-flowchart-example.jpg" alt="Comparison of slide with list vs. same content with flowchart" title="Comparison of the same content as a list and visualized as a flowchart" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Comparison of the same content as a list and visualized as a flowchart</p></figcaption> </figure> <p>For arrows, you can experiment with solid, dashed or dotted lines, different arrowhead styles, colors and curves. Speech bubbles can optionally have rounded corners, borders, shadows or a slightly see-through background color, and point to the relevant element on the slide. I try to stick to a minimum font size of 30pt, to make sure that annotations are readable, even from the back of a room. I also like to use them as an alternative to a regular lists and collections of keywords.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/5b888f7916204c5aa15e618ecff7f98a/1d134/slides_elements-bubbles.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQT/2gAMAwEAAhADEAAAAa5Cg0RM/wD/xAAYEAACAwAAAAAAAAAAAAAAAAABAxEzQf/aAAgBAQABBQJghaLN/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAEDAQE/ATV//8QAFhEBAQEAAAAAAAAAAAAAAAAAARAy/9oACAECAQE/ATDP/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAEQITH/2gAIAQEABj8CduNZ/8QAGhAAAgMBAQAAAAAAAAAAAAAAAREAITFBUf/aAAgBAQABPyHdCCsy++GFt6T/2gAMAwEAAgADAAAAEIgv/8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQMBAT8Qkf/EABURAQEAAAAAAAAAAAAAAAAAALEQ/9oACAECAQE/EHE//8QAGRABAAMBAQAAAAAAAAAAAAAAAQARMSFh/9oACAEBAAE/EDP6VXnX2BDrCCiEFAHJ/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/5b888f7916204c5aa15e618ecff7f98a/55fac/slides_elements-bubbles.webp 198w, /static/5b888f7916204c5aa15e618ecff7f98a/5b4d3/slides_elements-bubbles.webp 395w, /static/5b888f7916204c5aa15e618ecff7f98a/848e4/slides_elements-bubbles.webp 790w, /static/5b888f7916204c5aa15e618ecff7f98a/8d239/slides_elements-bubbles.webp 1185w, /static/5b888f7916204c5aa15e618ecff7f98a/888d0/slides_elements-bubbles.webp 1580w, /static/5b888f7916204c5aa15e618ecff7f98a/da28f/slides_elements-bubbles.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/5b888f7916204c5aa15e618ecff7f98a/9db10/slides_elements-bubbles.jpg 198w, /static/5b888f7916204c5aa15e618ecff7f98a/16a07/slides_elements-bubbles.jpg 395w, /static/5b888f7916204c5aa15e618ecff7f98a/d27a6/slides_elements-bubbles.jpg 790w, /static/5b888f7916204c5aa15e618ecff7f98a/0b93b/slides_elements-bubbles.jpg 1185w, /static/5b888f7916204c5aa15e618ecff7f98a/8f04a/slides_elements-bubbles.jpg 1580w, /static/5b888f7916204c5aa15e618ecff7f98a/1d134/slides_elements-bubbles.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/5b888f7916204c5aa15e618ecff7f98a/d27a6/slides_elements-bubbles.jpg" alt="Examples of speech bubbles used in my slides" title="Examples of speech bubbles used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of speech bubbles used in my slides (<a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#3</a>)</p></figcaption> </figure> <h3>Emoji and icons</h3> <p>The easiest way to incorporate emoji is by using those that come with your operating system, like <a href="https://emojipedia.org/apple">Apple’s</a> colored emoji set. However, there’s are many <a href="https://emojipedia.org/vendors">different styles</a>, including open-source sets like <a href="https://emojipedia.org/openmoji">OpenMoji</a> or pixel art icons from <a href="https://emojipedia.org/serenityos">SerenityOS</a>. I typically try to pick an emoji or icon set that best fits the overall aesthetic of my slides.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/0466702b53c575731d7754d8ecff55f2/1d134/slides_elements-emoji.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAID/9oADAMBAAIQAxAAAAHSkmqgz//EABgQAAIDAAAAAAAAAAAAAAAAAAABAhEh/9oACAEBAAEFAq1REf/EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/AWf/xAAXEQADAQAAAAAAAAAAAAAAAAABAxAy/9oACAECAQE/AU5M/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAEQMYH/2gAIAQEABj8CyLZ//8QAGRABAAIDAAAAAAAAAAAAAAAAAQARIUFR/9oACAEBAAE/ITJAA1dwoJu7P//aAAwDAQACAAMAAAAQB+//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAWEQADAAAAAAAAAAAAAAAAAAAQocH/2gAIAQIBAT8Qeg//xAAZEAEBAAMBAAAAAAAAAAAAAAABEQAhMZH/2gAIAQEAAT8QJKs0nuNqCAW76ZSCCl4z/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/0466702b53c575731d7754d8ecff55f2/55fac/slides_elements-emoji.webp 198w, /static/0466702b53c575731d7754d8ecff55f2/5b4d3/slides_elements-emoji.webp 395w, /static/0466702b53c575731d7754d8ecff55f2/848e4/slides_elements-emoji.webp 790w, /static/0466702b53c575731d7754d8ecff55f2/8d239/slides_elements-emoji.webp 1185w, /static/0466702b53c575731d7754d8ecff55f2/888d0/slides_elements-emoji.webp 1580w, /static/0466702b53c575731d7754d8ecff55f2/da28f/slides_elements-emoji.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/0466702b53c575731d7754d8ecff55f2/9db10/slides_elements-emoji.jpg 198w, /static/0466702b53c575731d7754d8ecff55f2/16a07/slides_elements-emoji.jpg 395w, /static/0466702b53c575731d7754d8ecff55f2/d27a6/slides_elements-emoji.jpg 790w, /static/0466702b53c575731d7754d8ecff55f2/0b93b/slides_elements-emoji.jpg 1185w, /static/0466702b53c575731d7754d8ecff55f2/8f04a/slides_elements-emoji.jpg 1580w, /static/0466702b53c575731d7754d8ecff55f2/1d134/slides_elements-emoji.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/0466702b53c575731d7754d8ecff55f2/d27a6/slides_elements-emoji.jpg" alt="Examples of emoji used in my slides" title="Examples of emoji used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of emoji used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#3</a>)</p></figcaption> </figure> <p>You can use emoji in place of list bullets or as recurring icons to illustrate a concept or term. They also give you quick and easy illustrations in a consistent style. Whenever I need an illustration, I first check if there’s an emoji for it!</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/f3482357f351685b0c946dca1eb278dd/1d134/slides_elements-emoji2.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABYBAQEBAAAAAAAAAAAAAAAAAAMAAf/aAAwDAQACEAMQAAABsSItEYv/xAAYEAACAwAAAAAAAAAAAAAAAAABMgACA//aAAgBAQABBQKyYsBP/8QAFhEAAwAAAAAAAAAAAAAAAAAAAxAy/9oACAEDAQE/ARSv/8QAFxEAAwEAAAAAAAAAAAAAAAAAAQIQMf/aAAgBAgEBPwFcM//EABcQAQADAAAAAAAAAAAAAAAAAAEAECH/2gAIAQEABj8CYYV//8QAHBAAAgICAwAAAAAAAAAAAAAAAREAMSFBYXGR/9oACAEBAAE/IRWzuKSIOaHECrPs/9oADAMBAAIAAwAAABCL/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QBhn/xAAYEQACAwAAAAAAAAAAAAAAAAAAATFR8P/aAAgBAgEBPxBnqhQf/8QAGhABAAMAAwAAAAAAAAAAAAAAAQARQSFRof/aAAgBAQABPxADVjtfJKzacmog+KJ//9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/f3482357f351685b0c946dca1eb278dd/55fac/slides_elements-emoji2.webp 198w, /static/f3482357f351685b0c946dca1eb278dd/5b4d3/slides_elements-emoji2.webp 395w, /static/f3482357f351685b0c946dca1eb278dd/848e4/slides_elements-emoji2.webp 790w, /static/f3482357f351685b0c946dca1eb278dd/8d239/slides_elements-emoji2.webp 1185w, /static/f3482357f351685b0c946dca1eb278dd/888d0/slides_elements-emoji2.webp 1580w, /static/f3482357f351685b0c946dca1eb278dd/da28f/slides_elements-emoji2.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/f3482357f351685b0c946dca1eb278dd/9db10/slides_elements-emoji2.jpg 198w, /static/f3482357f351685b0c946dca1eb278dd/16a07/slides_elements-emoji2.jpg 395w, /static/f3482357f351685b0c946dca1eb278dd/d27a6/slides_elements-emoji2.jpg 790w, /static/f3482357f351685b0c946dca1eb278dd/0b93b/slides_elements-emoji2.jpg 1185w, /static/f3482357f351685b0c946dca1eb278dd/8f04a/slides_elements-emoji2.jpg 1580w, /static/f3482357f351685b0c946dca1eb278dd/1d134/slides_elements-emoji2.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/f3482357f351685b0c946dca1eb278dd/d27a6/slides_elements-emoji2.jpg" alt="Examples of emoji used in my slides" title="Examples of emoji as illustrations used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/kunstliche-intelligenz-technologie-der-zukunft-und-warum-open-source-die-karten-neu-mischt&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of emoji as illustrations used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/kunstliche-intelligenz-technologie-der-zukunft-und-warum-open-source-die-karten-neu-mischt' target='_blank'>#2</a>, <a href='https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines' target='_blank'>#3</a>)</p></figcaption> </figure> <h3>Gradients, patterns and textures</h3> <p>If solid background colors feel too plain and your slides need more “life” or “pop”, what you’re looking for are textures or patterns. This is also one of the best ways to connect your design back to your talk’s <a href="/blog/beautiful-slides-talks-part-2-aesthetics">aesthetic</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/f4426993a7f74de1d9cafc7b754d1053/1d134/slides_elements-bg.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.878787878787875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAME/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAED/9oADAMBAAIQAxAAAAG9xMob/wD/xAAYEAACAwAAAAAAAAAAAAAAAAACIgADEf/aAAgBAQABBQKoHMVyf//EABsRAAIBBQAAAAAAAAAAAAAAAAABAgMSFCFR/9oACAEDAQE/AYK7TMalw//EABgRAAIDAAAAAAAAAAAAAAAAAAACARMx/9oACAECAQE/AZdtLWP/xAAXEAEAAwAAAAAAAAAAAAAAAAAxAAEQ/9oACAEBAAY/AqTGf//EABkQAAMBAQEAAAAAAAAAAAAAAAABIRExQf/aAAgBAQABPyGm8dVCHqq+jL//2gAMAwEAAgADAAAAEH/f/8QAGBEBAQADAAAAAAAAAAAAAAAAAQBR0fD/2gAIAQMBAT8QDCbou7//xAAZEQADAAMAAAAAAAAAAAAAAAAAASERMbH/2gAIAQIBAT8QaVUWHfD/xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhYVFx/9oACAEBAAE/EHMYZA+U9gGybydl7t/MJ//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/f4426993a7f74de1d9cafc7b754d1053/55fac/slides_elements-bg.webp 198w, /static/f4426993a7f74de1d9cafc7b754d1053/5b4d3/slides_elements-bg.webp 395w, /static/f4426993a7f74de1d9cafc7b754d1053/848e4/slides_elements-bg.webp 790w, /static/f4426993a7f74de1d9cafc7b754d1053/8d239/slides_elements-bg.webp 1185w, /static/f4426993a7f74de1d9cafc7b754d1053/888d0/slides_elements-bg.webp 1580w, /static/f4426993a7f74de1d9cafc7b754d1053/da28f/slides_elements-bg.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/f4426993a7f74de1d9cafc7b754d1053/9db10/slides_elements-bg.jpg 198w, /static/f4426993a7f74de1d9cafc7b754d1053/16a07/slides_elements-bg.jpg 395w, /static/f4426993a7f74de1d9cafc7b754d1053/d27a6/slides_elements-bg.jpg 790w, /static/f4426993a7f74de1d9cafc7b754d1053/0b93b/slides_elements-bg.jpg 1185w, /static/f4426993a7f74de1d9cafc7b754d1053/8f04a/slides_elements-bg.jpg 1580w, /static/f4426993a7f74de1d9cafc7b754d1053/1d134/slides_elements-bg.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/f4426993a7f74de1d9cafc7b754d1053/d27a6/slides_elements-bg.jpg" alt="Examples of textures, gradients and patterns used in my slides" title="Examples of textures, gradients and patterns used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020&#39; target=&#39;_blank&#39;&gt;#4&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms&#39; target=&#39;_blank&#39;&gt;#5&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/incorporating-llms-into-practical-nlp-workflows&#39; target=&#39;_blank&#39;&gt;#6&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of textures, gradients and patterns used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data' target='_blank'>#3</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#4</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#5</a>, <a href='https://speakerdeck.com/inesmontani/incorporating-llms-into-practical-nlp-workflows' target='_blank'>#6</a>)</p></figcaption> </figure> <p>There’s a huge variety of textures available on sites like <a href="https://www.freepik.com/search?format=search&#x26;last_filter=query&#x26;last_value=texture&#x26;query=texture">Freepik</a> or <a href="https://creativemarket.com/graphics/textures">Creative Market</a>, from surfaces of real-world objects like paper, plastic or paint, to noise and distortion (think old VHS tapes). You can also search those sites for so-called “seamless” patterns, meaning patterns that can be tiled and repeated. For gradients, you can find inspiration on <a href="https://uigradients.com">uiGradients</a>, <a href="https://gradienthunt.com">Gradient Hunt</a> or <a href="https://coolors.co/gradients">Coolors</a>, which is also a great resource for color palettes. Just try to avoid backgrounds that are too visually busy to not distract from the content, and use boxes (see above) with a plain background color if needed to keep texts readable.</p> <h3>Shadow and glow</h3> <p>Elevation, light and shadows imitate paper and create depth, and you can use them to add a more designed feel, make text more readable or introduce visual hierarchies. (Google’s <a href="https://m2.material.io/design/environment/light-shadows.html">Material Design</a> has some nice examples of how shadows can be used as part of a design system. If you want to go even deeper, <a href="https://www.joshwcomeau.com/css/designing-shadows/">this tutorial</a> covers shadows in CSS, but you can also apply the tips to other tools and mediums.)</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/1d134/slides_elements-shadow.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/2gAMAwEAAhADEAAAActKTIFD/8QAGRAAAgMBAAAAAAAAAAAAAAAAAQMAERIy/9oACAEBAAEFAlm2M52Z/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAhMv/aAAgBAwEBPwF4Zdv/xAAWEQEBAQAAAAAAAAAAAAAAAAABADH/2gAIAQIBAT8BdIv/xAAVEAEBAAAAAAAAAAAAAAAAAAACEP/aAAgBAQAGPwI3/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAERITFRYYH/2gAIAQEAAT8hqYS/ZghcP//aAAwDAQACAAMAAAAQ8D//xAAYEQEBAAMAAAAAAAAAAAAAAAABABFx8P/aAAgBAwEBPxDjqYWG/8QAGREAAwADAAAAAAAAAAAAAAAAAAERITHw/9oACAECAQE/EMYdsRRH/8QAGhABAAIDAQAAAAAAAAAAAAAAAQAhMUFxEf/aAAgBAQABPxBmgLccgDyXbpNYIrwM/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/55fac/slides_elements-shadow.webp 198w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/5b4d3/slides_elements-shadow.webp 395w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/848e4/slides_elements-shadow.webp 790w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/8d239/slides_elements-shadow.webp 1185w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/888d0/slides_elements-shadow.webp 1580w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/da28f/slides_elements-shadow.webp 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/9db10/slides_elements-shadow.jpg 198w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/16a07/slides_elements-shadow.jpg 395w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/d27a6/slides_elements-shadow.jpg 790w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/0b93b/slides_elements-shadow.jpg 1185w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/8f04a/slides_elements-shadow.jpg 1580w, /static/1c1bdb8d6a1acacb70cbcd86e95cfea9/1d134/slides_elements-shadow.jpg 2880w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/d27a6/slides_elements-shadow.jpg" alt="Examples of shadows and glow used in my slides" title="Examples of shadows and glow used in my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of shadows and glow used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data' target='_blank'>#3</a>)</p></figcaption> </figure> <p>You can experiment with different combinations of the distance and offset (how far away the shadow is placed), blur (how soft or blurry it is), opacity (how transparent it is), color (whether to use the standard black or a custom color) and also the angle (where the light source is coming from).</p> <p>Some fonts include variants for adding depth, which you can layer on top of each other to create a 3D effect – for example, the 70s-style <a href="https://www.myfonts.com/collections/alkaria-font-konstantinestudio">Alkaria</a>, which I’ve used in <a href="https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai">my talk</a> on applied NLP, or the retro sign-inspired <a href="https://www.myfonts.com/collections/frontage-font-juri-zaech">Frontage</a>. In fact, MyFonts has a whole collections of <a href="https://www.myfonts.com/pages/tags/stackable-fonts">stackable fonts</a> to choose from.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/af3ee6cc2719bcd699eeac3524330c9d/0004b/slides_elements-stacking.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 24.747474747474747%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/9oADAMBAAIQAxAAAAHVtCpCn//EABUQAQEAAAAAAAAAAAAAAAAAABAx/9oACAEBAAEFAq//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwFn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFRABAQAAAAAAAAAAAAAAAAAAARD/2gAIAQEABj8Cb//EABkQAAMBAQEAAAAAAAAAAAAAAAABESFRgf/aAAgBAQABPyFWFS3hKlr8Ef/aAAwDAQACAAMAAAAQDD//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/EB//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxAn/8QAGxAAAgMAAwAAAAAAAAAAAAAAAREAMUEhYXH/2gAIAQEAAT8QNYiwIx24Kg9LZTmf/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/af3ee6cc2719bcd699eeac3524330c9d/55fac/slides_elements-stacking.webp 198w, /static/af3ee6cc2719bcd699eeac3524330c9d/5b4d3/slides_elements-stacking.webp 395w, /static/af3ee6cc2719bcd699eeac3524330c9d/848e4/slides_elements-stacking.webp 790w, /static/af3ee6cc2719bcd699eeac3524330c9d/f7a48/slides_elements-stacking.webp 844w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/af3ee6cc2719bcd699eeac3524330c9d/9db10/slides_elements-stacking.jpg 198w, /static/af3ee6cc2719bcd699eeac3524330c9d/16a07/slides_elements-stacking.jpg 395w, /static/af3ee6cc2719bcd699eeac3524330c9d/d27a6/slides_elements-stacking.jpg 790w, /static/af3ee6cc2719bcd699eeac3524330c9d/0004b/slides_elements-stacking.jpg 844w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/af3ee6cc2719bcd699eeac3524330c9d/d27a6/slides_elements-stacking.jpg" alt="Font stacking with Alkaria and Frontage" title="Font stacking with shadows and 3D effect (&lt;a href=&#39;https://www.myfonts.com/collections/alkaria-font-konstantinestudio&#39; target=&#39;_blank&#39;&gt;Alkaria&lt;/a&gt;, &lt;a href=&#39;https://www.myfonts.com/collections/frontage-font-juri-zaech&#39; target=&#39;_blank&#39;&gt;Frontage&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Font stacking with shadows and 3D effect (<a href='https://www.myfonts.com/collections/alkaria-font-konstantinestudio' target='_blank'>Alkaria</a>, <a href='https://www.myfonts.com/collections/frontage-font-juri-zaech' target='_blank'>Frontage</a>)</p></figcaption> </figure> <hr> <h2>More tips and tricks</h2> <h3>Learn your presentation tool’s styling shortcuts</h3> <p><a href="https://support.apple.com/guide/keynote/copy-and-paste-text-tan7cad4c5e1/mac">Keynote</a> and <a href="https://support.microsoft.com/en-us/office/copy-the-fill-and-formatting-from-one-shape-to-ano%E2%8C%98ther-2ed0a654-a6fb-4170-ba7a-9132b77917b3">PowerPoint</a> both have a “copy style” feature that lets you apply the same formatting and style of one shape or element to another. This typically includes the background color, borders, shadows and font settings. You can also save element styles as a preset that you can apply with one click. I also use <a href="https://support.apple.com/guide/keynote/layer-group-and-lock-objects-tan003ee8980">grouping</a> for elements and layers, so I can move them around together as I design my slides, and I usually <a href="https://support.apple.com/guide/keynote/layer-group-and-lock-objects-tan003ee8980">lock</a> fixed objects like the logo and background elements so they stay in place.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/20e41e593b971c440e2133149877b8e5/1a6c7/slides_elements-toolbar.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 7.07070707070707%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAABABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABzgQH/8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABBQJ//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABPyF//9oADAMBAAIAAwAAABDzz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABYQAQEBAAAAAAAAAAAAAAAAAAEAMf/aAAgBAQABPxBxjJ2//9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/20e41e593b971c440e2133149877b8e5/55fac/slides_elements-toolbar.webp 198w, /static/20e41e593b971c440e2133149877b8e5/5b4d3/slides_elements-toolbar.webp 395w, /static/20e41e593b971c440e2133149877b8e5/848e4/slides_elements-toolbar.webp 790w, /static/20e41e593b971c440e2133149877b8e5/8d239/slides_elements-toolbar.webp 1185w, /static/20e41e593b971c440e2133149877b8e5/864b2/slides_elements-toolbar.webp 1319w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/20e41e593b971c440e2133149877b8e5/9db10/slides_elements-toolbar.jpg 198w, /static/20e41e593b971c440e2133149877b8e5/16a07/slides_elements-toolbar.jpg 395w, /static/20e41e593b971c440e2133149877b8e5/d27a6/slides_elements-toolbar.jpg 790w, /static/20e41e593b971c440e2133149877b8e5/0b93b/slides_elements-toolbar.jpg 1185w, /static/20e41e593b971c440e2133149877b8e5/1a6c7/slides_elements-toolbar.jpg 1319w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/20e41e593b971c440e2133149877b8e5/d27a6/slides_elements-toolbar.jpg" alt="Screenshot of my customized toolbar in Keynote" title="Part of my &lt;a href=&#39;https://support.apple.com/guide/keynote/customize-the-keynote-toolbar-tan81f1db118/mac&#39; target=&#39;_blank&#39;&gt;customized toolbar&lt;/a&gt; in Keynote with added shortcuts for grouping, styling, layer order and locked layers" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Part of my <a href='https://support.apple.com/guide/keynote/customize-the-keynote-toolbar-tan81f1db118/mac' target='_blank'>customized toolbar</a> in Keynote with added shortcuts for grouping, styling, layer order and locked layers</p></figcaption> </figure> <p>Also keep an eye on actions you commonly perform in the design process, including those that feel really tedious, and check if there are keyboard shortcuts or buttons that you can add to your toolbar for easy access. (For example, Keynote’s support for <a href="https://www.designbeginswithl.com/2020/05/font-tips-how-to-access-and-use-glyphs.html">alternate glyphs</a>, i.e. different versions of the same letter in fonts that support it, isn’t super convenient, but I was pleased to discover I could at least toggle the typography panel with <code>⌘</code>+<code>T</code>.)</p> <h3>Use an asset manager</h3> <p>Once you start collecting design assets like illustrations, patterns or textures, you need a way to store and organize them. I use <a href="https://eagle.cool/">Eagle</a>, which is available for a one-time license fee and comes with a great UI for categorizing, tagging, searching and viewing design files. It supports all common file formats, including Photoshop and Illustrator files, automatically creates preview images and lets you drag and drop assets into your design or presentation tool. There’s also a browser <a href="https://eagle.cool/extensions">extension</a> that makes it easy to save screenshots and images from the web. I currently have two libraries: one for inspiration and screenshots, and one for design assets.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/f9d5afa2aeea41a189910a06e5911091/e2603/slides_elements-eagle.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 54.04040404040404%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwABBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe2TEJbH/8QAGBABAQADAAAAAAAAAAAAAAAAAAEREiH/2gAIAQEAAQUCbJxWEf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAAICAwEAAAAAAAAAAAAAAAABESFBUXHR/9oACAEBAAE/IfSUZnomzfSqIF1Z/9oADAMBAAIAAwAAABDjD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExYUGR/9oACAEBAAE/ELbh3UcUiBG63fjk3TCM4P2Zrk3P/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/f9d5afa2aeea41a189910a06e5911091/55fac/slides_elements-eagle.webp 198w, /static/f9d5afa2aeea41a189910a06e5911091/5b4d3/slides_elements-eagle.webp 395w, /static/f9d5afa2aeea41a189910a06e5911091/848e4/slides_elements-eagle.webp 790w, /static/f9d5afa2aeea41a189910a06e5911091/8d239/slides_elements-eagle.webp 1185w, /static/f9d5afa2aeea41a189910a06e5911091/888d0/slides_elements-eagle.webp 1580w, /static/f9d5afa2aeea41a189910a06e5911091/aaf86/slides_elements-eagle.webp 2055w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/f9d5afa2aeea41a189910a06e5911091/9db10/slides_elements-eagle.jpg 198w, /static/f9d5afa2aeea41a189910a06e5911091/16a07/slides_elements-eagle.jpg 395w, /static/f9d5afa2aeea41a189910a06e5911091/d27a6/slides_elements-eagle.jpg 790w, /static/f9d5afa2aeea41a189910a06e5911091/0b93b/slides_elements-eagle.jpg 1185w, /static/f9d5afa2aeea41a189910a06e5911091/8f04a/slides_elements-eagle.jpg 1580w, /static/f9d5afa2aeea41a189910a06e5911091/e2603/slides_elements-eagle.jpg 2055w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/f9d5afa2aeea41a189910a06e5911091/d27a6/slides_elements-eagle.jpg" alt="slides elements eagle" title="My design asset library and custom folders in &lt;a href=&#39;https://eagle.cool&#39; target=&#39;_blank&#39;&gt;Eagle&lt;/a&gt; (I clearly had a lot of fun organizing my files!)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>My design asset library and custom folders in <a href='https://eagle.cool' target='_blank'>Eagle</a> (I clearly had a lot of fun organizing my files!)</p></figcaption> </figure> <p>In <a href="/blog/beginners-guide-beautiful-slides-talks">part 1</a>, I already recommended using a font manager like <a href="https://rightfontapp.com">RightFont</a> or <a href="https://fontba.se">FontBase</a> once you get serious about collecting fonts, and an asset manager is a great complement to that. If you’re working in an organization with a dedicated design team, you can also check in with them to see which tools they already use and if you can get in on it.</p> <hr> <h2>Resources</h2> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>🖼️ <strong>Textures</strong></span></td> <td><a href="https://www.freepik.com/search?format=search&#x26;last_filter=query&#x26;last_value=texture&#x26;query=texture">Freepik</a>, <a href="https://creativemarket.com/graphics/textures">Creative Market</a></td> </tr> <tr> <td><span>🎨 <strong>Gradients</strong></span></td> <td><a href="https://uigradients.com">uiGradients</a>, <a href="https://gradienthunt.com">Gradient Hunt</a>, <a href="https://coolors.co/gradients">Coolors</a></td> </tr> <tr> <td><span>🧩 <strong>Patterns</strong></span></td> <td><a href="https://www.freepik.com/search?term=seamless+pattern">Freepik</a>, <a href="https://creativemarket.com/graphics/patterns">Creative Market</a></td> </tr> <tr> <td><span>😀 <strong>Emoji</strong></span></td> <td><a href="https://emojipedia.org">Emojipedia</a>, <a href="https://thenounproject.com">The Noun Project</a></td> </tr> <tr> <td><span>✍️ <strong>Stackable Fonts</strong></span></td> <td><a href="https://www.myfonts.com/pages/tags/stackable-fonts">MyFonts</a>, <a href="https://creativemarket.com/search/layered-font">Creative Market</a></td> </tr> <tr> <td><span>🗃️ <strong>File Managers</strong></span></td> <td><a href="https://eagle.cool">Eagle</a>, <a href="https://rightfontapp.com">RightFont</a>, <a href="https://fontba.se">FontBase</a></td> </tr> <tr> <td><span>👩‍🎨 <strong>Design</strong></span></td> <td><a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, <a href="https://www.adobe.com/products/illustrator.html">Illustrator</a>, <a href="https://www.figma.com">Figma</a>, <a href="https://www.sketch.com">Sketch</a>, <a href="https://canva.com">Canva</a></td> </tr> <tr> <td><span>💻 <strong>Presentation</strong></span></td> <td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.microsoft.com/en-us/microsoft-365/powerpoint">PowerPoint</a>, <a href="https://workspace.google.com/products/slides/">Google Slides</a></td> </tr> </tbody> </table> <p><link-button href="/blog/beautiful-slides-talks-part-5-sharing-presentations" icon="right">Part 5: Sharing your presentations</link-button></p></content:encoded>
</item>
<item>
<title>
<![CDATA[ Making beautiful slides for your talks, part 3: Technical content ]]>
</title>
<description>
<![CDATA[ Software engineering, and Artificial Intelligence in particular, may sound exciting, but in reality, the problems you solve in your day-to… ]]>
</description>
<link>https://ines.io/blog/beautiful-slides-talks-part-3-technical-content</link>
<guid isPermaLink="false">https://ines.io/blog/beautiful-slides-talks-part-3-technical-content</guid>
<pubDate>Fri, 14 Feb 2025 00:00:00 GMT</pubDate>
<content:encoded><p>Software engineering, and Artificial Intelligence in particular, may sound exciting, but in reality, the problems you solve in your day-to-day work are often quite dry. In a talk, you may need to explain algorithms and mathematical equations, present results tables or walk through an implementation in code. And the great solution you’re showcasing isn’t always very visual – it’s often a program that prints a number and exits or outputs some <em>really good</em> vectors. In this post, I’ll share some tips and inspiration for presenting technical content in your slides and making “boring” topics more fun and engaging. I’ve also included some examples from the community again.</p> <p>🎨 <strong>Part 1:</strong> <a href="/blog/beginners-guide-beautiful-slides-talks">Design tips for beginners</a> ✨ <strong>Part 2:</strong> <a href="/blog/beautiful-slides-talks-part-2-aesthetics">All about aesthetics</a> 🛠️ <strong>Part 3: Technical content</strong> 🧩 <strong>Part 4:</strong> <a href="/blog/beautiful-slides-talks-part-4-design-elements">Design elements</a> 💌 <strong>Part 5:</strong> <a href="/blog/beautiful-slides-talks-part-5-sharing-presentations">Sharing your presentations</a></p> <p><em><strong>Disclaimer</strong> (since my previous post also got widely shared outside of my circles): This blog post series is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p> <hr> <h2>Vitaly Meursault: “Bonds are from Venus, Stocks are from Mars”</h2> <p><a href="https://vmeursault.com">Vitaly</a> is an economist at the Federal Reserve Bank of Philadelphia, where he conducts academic research in economics with a focus on machine learning and natural language processing. </p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/dfe20a4d3d2497dbc01c41928f96cdb7/e3932/slides_technical-vitaly.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUE/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgAD/9oADAMBAAIQAxAAAAHU2xS6KK1v/8QAHBAAAQQDAQAAAAAAAAAAAAAAAQACAwQRExRB/9oACAEBAAEFAjCS1rtY6YwvbJxYX//EABcRAQADAAAAAAAAAAAAAAAAAAABEiH/2gAIAQMBAT8BjVH/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8BZH//xAAcEAABBAMBAAAAAAAAAAAAAAABAAIQIRExUaH/2gAIAQEABj8CxSDHbHFZ8gx//8QAGxABAAICAwAAAAAAAAAAAAAAAQARITFhcbH/2gAIAQEAAT8hLgD3AUUWdiayDxAw1Bq68jnLVz//2gAMAwEAAgADAAAAEEzf/8QAFxEBAQEBAAAAAAAAAAAAAAAAEQEAIf/aAAgBAwEBPxCUXRdd/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/EMAjC//EABoQAQADAQEBAAAAAAAAAAAAAAEAESExcUH/2gAIAQEAAT8QNHLzm/Y/YIAQu3vkMmnBEr5EarkuiwKZlJuEka0T/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/dfe20a4d3d2497dbc01c41928f96cdb7/55fac/slides_technical-vitaly.webp 198w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/5b4d3/slides_technical-vitaly.webp 395w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/848e4/slides_technical-vitaly.webp 790w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/8d239/slides_technical-vitaly.webp 1185w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/8717d/slides_technical-vitaly.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/dfe20a4d3d2497dbc01c41928f96cdb7/9db10/slides_technical-vitaly.jpg 198w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/16a07/slides_technical-vitaly.jpg 395w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/d27a6/slides_technical-vitaly.jpg 790w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/0b93b/slides_technical-vitaly.jpg 1185w, /static/dfe20a4d3d2497dbc01c41928f96cdb7/e3932/slides_technical-vitaly.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/dfe20a4d3d2497dbc01c41928f96cdb7/d27a6/slides_technical-vitaly.jpg" alt="Screenshots from the talk slides" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>✨ <strong>Aesthetic</strong></span></td> <td>fine arts / baroque / high-contrast / neobrutalism</td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#ebd767"></span> mustard yellow, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#f5cbcc"></span> rose, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#d2ecff"></span> light blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#f68688"></span> light coral, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#52b6ff"></span> blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#e7e7e7"></span> grey</td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://fonts.google.com/specimen/PT+Serif">PT Serif</a> (titles), <a href="https://fonts.google.com/specimen/Fira+Sans">Fira Sans</a> (body)</td> </tr> <tr> <td><span>🛠️ <strong>Tools</strong></span></td> <td><a href="https://www.microsoft.com/en-us/microsoft-365/powerpoint">PowerPoint</a>, <a href="https://www.pixelmator.com/pro/">Pixelmator Pro</a>, <a href="https://www.midjourney.com">Midjourney</a></td> </tr> </tbody> </table> <blockquote> <p>“My presentation merges art across eras - from Botticelli’s <a href="https://en.wikipedia.org/wiki/The_Birth_of_Venus">‘Birth of Venus’</a> and Velázquez’s <a href="https://en.wikipedia.org/wiki/Mars_Resting">‘Mars Resting’</a> to contemporary works - unified by the exploration of contrasts, reflecting the paper’s focus on divergent investor worldviews. I combine the artworks with modernist elements inspired by neobrutalism, featuring text on pastel-colored blocks with drop shadows. The design uses a Mars-red and Venus-blue color scheme that both distinguishes between stocks and bonds and focuses the attention on the main takeaways. For key points, I incorporate additional design elements like crowns and roses, generated in Midjourney to match the classical artworks’ style.</p> <p>The most challenging aspect was making dense tables with analysis results (a staple in my field) accessible and engaging. I addressed this through dynamic color highlighting in tables, using animated rectangles to guide attention to specific data points.”</p> </blockquote> <p><link-button href="https://speakerdeck.com/vmeursault/venus-and-mars" icon="text">Slides</link-button></p> <hr> <h2>Sofie Van Landeghem: “spaCy v3: Custom Trainable Component for Named Entity Relation Extraction”</h2> <p>I collaborated on these slides with <a href="https://bsky.app/profile/oxykodit.bsky.social">Sofie</a> and they were used in a <a href="https://www.youtube.com/watch?v=8HL-Ap5_Axo">video tutorial</a> showing how to implement a named entity relation extraction component from scratch with <a href="https://spacy.io">spaCy</a> and <a href="https://github.com/explosion/thinc">Thinc</a>.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/5aa061ef04cdefea58ee849d1dc575a6/e3932/slides_technical-sofie.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUCBP/EABYBAQEBAAAAAAAAAAAAAAAAAAQAAf/aAAwDAQACEAMQAAABdU7KR3ElZ//EABsQAAICAwEAAAAAAAAAAAAAAAACAxEBEyIy/9oACAEBAAEFAroWZFTfGN7bHR//xAAYEQADAQEAAAAAAAAAAAAAAAAAAQIRE//aAAgBAwEBPwGXjO9H/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAECERP/2gAIAQIBAT8BkrMkf//EABkQAAIDAQAAAAAAAAAAAAAAAAERAAIQIf/aAAgBAQAGPwJPsFTZHRn/xAAdEAACAgEFAAAAAAAAAAAAAAAAARFBIRAxYXGR/9oACAEBAAE/Ib8A7NBS5ILfhmje+BTf1p//2gAMAwEAAgADAAAAEFMf/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERUXH/2gAIAQMBAT8QVMqMz//EABcRAQADAAAAAAAAAAAAAAAAAAEQEVH/2gAIAQIBAT8QQ07H/8QAGxABAAIDAQEAAAAAAAAAAAAAAQARITFBYXH/2gAIAQEAAT8QQQPArjKx5Vk2vJoN/wBwXJoC7jEMh17FVtn/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/5aa061ef04cdefea58ee849d1dc575a6/55fac/slides_technical-sofie.webp 198w, /static/5aa061ef04cdefea58ee849d1dc575a6/5b4d3/slides_technical-sofie.webp 395w, /static/5aa061ef04cdefea58ee849d1dc575a6/848e4/slides_technical-sofie.webp 790w, /static/5aa061ef04cdefea58ee849d1dc575a6/8d239/slides_technical-sofie.webp 1185w, /static/5aa061ef04cdefea58ee849d1dc575a6/8717d/slides_technical-sofie.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/5aa061ef04cdefea58ee849d1dc575a6/9db10/slides_technical-sofie.jpg 198w, /static/5aa061ef04cdefea58ee849d1dc575a6/16a07/slides_technical-sofie.jpg 395w, /static/5aa061ef04cdefea58ee849d1dc575a6/d27a6/slides_technical-sofie.jpg 790w, /static/5aa061ef04cdefea58ee849d1dc575a6/0b93b/slides_technical-sofie.jpg 1185w, /static/5aa061ef04cdefea58ee849d1dc575a6/e3932/slides_technical-sofie.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/5aa061ef04cdefea58ee849d1dc575a6/d27a6/slides_technical-sofie.jpg" alt="Screenshots from the talk slides" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>✨ <strong>Aesthetic</strong></span></td> <td>blueprint / drawing board / spaCy</td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#0096db"></span> celestial blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#22212c"></span> off-black, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#ffffff"></span> white, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#a1fe4c"></span> yellow-green, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#ff7c7b"></span> light red, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#ff68e5"></span> magenta, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#3ee9fe"></span> cyan</td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://learn.microsoft.com/de-de/typography/font-list/arial-rounded-mt">Arial Rounded MT</a> (body), <a href="https://hanken.co/products/hk-grotesk">HK Grotesk</a> (accents), <a href="https://www.jetbrains.com/lp/mono/">JetBrains Mono</a> (code)</td> </tr> <tr> <td><span>🛠️ <strong>Tools</strong></span></td> <td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a></td> </tr> </tbody> </table> <blockquote> <p>“We used the blueprint style for all our ‘behind the scenes’ content about spaCy. The color scheme mirrors the spaCy <a href="https://spacy.io/styleguide#colors">blue</a> and the slides also use the same fonts as the <a href="https://spacy.io">documentation</a>. The most challenging part was to present a complex machine learning model implementation, and visualize <a href="http://matrixmultiplication.xyz/">matrix multiplication</a> and how token vectors are composed.</p> <p>To illustrate how the vectors flow through the model, we went with a color-coded approach, using an <a href="https://venngage.com/blog/accessible-colors/">accessible</a> palette of color pairs. This makes it easier to follow the vectors of two example tokens from the embedding step to the final classification layer that predicts a relation label. The implementations are presented as step-by-step flowcharts, with flexible arrows that can also be used to provide explanations along the way.”</p> </blockquote> <p><link-button href="https://speakerdeck.com/sofievl/2021-02-01-rel-video" icon="text">Slides</link-button> <link-button href="https://www.youtube.com/watch?v=8HL-Ap5_Axo" icon="video">Video</link-button></p> <hr> <h2>Flowcharts and diagrams</h2> <p>Flowcharts and diagrams are my go-to design elements for explaining technical concepts and logic. They can be introduced step by step and use illustrations or icons as visual guides. Creating flowcharts can hugely benefit your talk, even before you present it: the process really forces you to break things down in simple terms. My personal rule of thumb: if the idea is too complex for a flowchart, it’s likely too complex in general and needs to be simplified before it can go into my talk.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/2d3f50bf7a10ebc04d0b97dd054d5b40/e3932/slides_technical-flowcharts.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwT/2gAMAwEAAhADEAAAAb4wm0BUf//EABkQAAEFAAAAAAAAAAAAAAAAAAABAxExNP/aAAgBAQABBQJab0Qf/8QAFREBAQAAAAAAAAAAAAAAAAAAEEH/2gAIAQMBAT8Bh//EABYRAAMAAAAAAAAAAAAAAAAAAAQQMf/aAAgBAgEBPwEeL//EABgQAAIDAAAAAAAAAAAAAAAAAABxAQIQ/9oACAEBAAY/ApRZZ//EABoQAAMAAwEAAAAAAAAAAAAAAAABETFBYZH/2gAIAQEAAT8hWQ0LzFdP0//aAAwDAQACAAMAAAAQBA//xAAXEQADAQAAAAAAAAAAAAAAAAABELHB/9oACAEDAQE/EDuL/8QAFhEAAwAAAAAAAAAAAAAAAAAAELHR/9oACAECAQE/EGwf/8QAGhABAAMAAwAAAAAAAAAAAAAAAQARIVFhcf/aAAgBAQABPxA7hKK3uNMrefkEMMj/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/2d3f50bf7a10ebc04d0b97dd054d5b40/55fac/slides_technical-flowcharts.webp 198w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/5b4d3/slides_technical-flowcharts.webp 395w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/848e4/slides_technical-flowcharts.webp 790w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/8d239/slides_technical-flowcharts.webp 1185w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/8717d/slides_technical-flowcharts.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/2d3f50bf7a10ebc04d0b97dd054d5b40/9db10/slides_technical-flowcharts.jpg 198w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/16a07/slides_technical-flowcharts.jpg 395w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/d27a6/slides_technical-flowcharts.jpg 790w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/0b93b/slides_technical-flowcharts.jpg 1185w, /static/2d3f50bf7a10ebc04d0b97dd054d5b40/e3932/slides_technical-flowcharts.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/2d3f50bf7a10ebc04d0b97dd054d5b40/d27a6/slides_technical-flowcharts.jpg" alt="Screenshots from the talk slides" title="Examples of flowcharts from my talks (&lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of flowcharts from my talks (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#3</a>)</p></figcaption> </figure> <p>Many technical processes you’re trying to visualize are dynamic: <em>something happens</em>, code is executed in sequence, or data flows from A to B. Whenever you’re describing a process, consider if you can present it as a diagram instead of plain text. I often start by designing diagrams right after I’ve planned out my talk structure with <a href="/blog/beautiful-slides-talks-part-2-aesthetics/">statement</a> slides.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/7a14784c299a0fb3ffa24c1214ffc9f5/fdb5a/slides_technical-flowchart-example.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 30.303030303030305%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3KAH/8QAFxABAAMAAAAAAAAAAAAAAAAAAAERQf/aAAgBAQABBQLUW//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAAQIf/aAAgBAQAGPwJU/8QAGhAAAgMBAQAAAAAAAAAAAAAAASEAETFBUf/aAAgBAQABPyGi/IQSdUWV1V5P/9oADAMBAAIAAwAAABDwD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAAIDAQAAAAAAAAAAAAAAAAERADFBcf/aAAgBAQABPxADICGNTIEy3FWbW8N7P//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/7a14784c299a0fb3ffa24c1214ffc9f5/55fac/slides_technical-flowchart-example.webp 198w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/5b4d3/slides_technical-flowchart-example.webp 395w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/848e4/slides_technical-flowchart-example.webp 790w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/8d239/slides_technical-flowchart-example.webp 1185w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/888d0/slides_technical-flowchart-example.webp 1580w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/548e7/slides_technical-flowchart-example.webp 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/7a14784c299a0fb3ffa24c1214ffc9f5/9db10/slides_technical-flowchart-example.jpg 198w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/16a07/slides_technical-flowchart-example.jpg 395w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/d27a6/slides_technical-flowchart-example.jpg 790w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/0b93b/slides_technical-flowchart-example.jpg 1185w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/8f04a/slides_technical-flowchart-example.jpg 1580w, /static/7a14784c299a0fb3ffa24c1214ffc9f5/fdb5a/slides_technical-flowchart-example.jpg 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/7a14784c299a0fb3ffa24c1214ffc9f5/d27a6/slides_technical-flowchart-example.jpg" alt="Comparison of slide with list vs. same content with flowchart" title="Comparison of the same content as a list and visualized as a flowchart" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Comparison of the same content as a list and visualized as a flowchart</p></figcaption> </figure> <p>Associating elements with icons is another useful technique for making abstract concepts more visual. For example, several of my recent <a href="https://speakerdeck.com/inesmontani">talks</a> explain the process of <a href="https://explosion.ai/blog/human-in-the-loop-distillation">human-in-the-loop distillation</a> and the relationships between Large Language Models (LLMs) and distilled task-specific components. To illustrate this, I introduced different graphics (a blob or crystal ball, and a cube or package) representing those model types early on in the talk, which I then reference across the following slides.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/467683910eef378a8663c909701e987d/e3932/slides_technical-distillation.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.878787878787875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAID/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECBP/aAAwDAQACEAMQAAAB3k2SDP/EABgQAAMBAQAAAAAAAAAAAAAAAAABAxMh/9oACAEBAAEFAnZG47d//8QAFxEBAAMAAAAAAAAAAAAAAAAAAAEREv/aAAgBAwEBPwHUrf/EABYRAAMAAAAAAAAAAAAAAAAAAAABEv/aAAgBAgEBPwGESj//xAAZEAACAwEAAAAAAAAAAAAAAAAAoQEiMTL/2gAIAQEABj8CirOWYz//xAAZEAACAwEAAAAAAAAAAAAAAAAAARExQSH/2gAIAQEAAT8hhNpZQSVLgVMv/9oADAMBAAIAAwAAABADz//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/EBT/xAAXEQEBAQEAAAAAAAAAAAAAAAARAAEx/9oACAECAQE/EMULD5f/xAAcEAABBQADAAAAAAAAAAAAAAARAAEhMUFhocH/2gAIAQEAAT8QZgXcusqeLUkIRy6QpmMeL//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/467683910eef378a8663c909701e987d/55fac/slides_technical-distillation.webp 198w, /static/467683910eef378a8663c909701e987d/5b4d3/slides_technical-distillation.webp 395w, /static/467683910eef378a8663c909701e987d/848e4/slides_technical-distillation.webp 790w, /static/467683910eef378a8663c909701e987d/8d239/slides_technical-distillation.webp 1185w, /static/467683910eef378a8663c909701e987d/8717d/slides_technical-distillation.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/467683910eef378a8663c909701e987d/9db10/slides_technical-distillation.jpg 198w, /static/467683910eef378a8663c909701e987d/16a07/slides_technical-distillation.jpg 395w, /static/467683910eef378a8663c909701e987d/d27a6/slides_technical-distillation.jpg 790w, /static/467683910eef378a8663c909701e987d/0b93b/slides_technical-distillation.jpg 1185w, /static/467683910eef378a8663c909701e987d/e3932/slides_technical-distillation.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/467683910eef378a8663c909701e987d/d27a6/slides_technical-distillation.jpg" alt="Screenshots from the talk slides" title="Examples of repeated icons associated with model types (&lt;a href=&#39;https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of repeated icons associated with model types (<a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#2</a>)</p></figcaption> </figure> <hr> <h2>Formulas and equations</h2> <p><a href="https://speakerdeck.com/vmeursault/venus-and-mars">Vitaly’s slides</a> include great examples of mathematical equations, which are seamlessly embedded alongside the text. He used <a href="https://support.microsoft.com/en-us/office/write-an-equation-or-formula-1d01cabc-ceb1-458d-bc70-7f9737722702">PowerPoint</a>’s built-in support for inserting <a href="https://www.latex-project.org/">LaTeX</a> and also added boxes in alternating colors to separate individual points, with matching text background colors to highlight key terms (which are also a nod to the Venus vs. Mars theme).</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/44258af2e24c46272c73815faf074488/e3932/slides_technical-formulas.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 32.82828282828283%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAC/9oADAMBAAIQAxAAAAHXgLip/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAECECH/2gAIAQEAAQUCWklX/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BZ//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/ASf/xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAaEAACAgMAAAAAAAAAAAAAAAAAARExIUFR/9oACAEBAAE/IVWhkUcFVs//2gAMAwEAAgADAAAAEIQf/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERITH/2gAIAQMBAT8QrhLP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/EANhf//EABkQAAIDAQAAAAAAAAAAAAAAAAERADGBIf/aAAgBAQABPxC2UKBFQCmxx1oXP//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/44258af2e24c46272c73815faf074488/55fac/slides_technical-formulas.webp 198w, /static/44258af2e24c46272c73815faf074488/5b4d3/slides_technical-formulas.webp 395w, /static/44258af2e24c46272c73815faf074488/848e4/slides_technical-formulas.webp 790w, /static/44258af2e24c46272c73815faf074488/8d239/slides_technical-formulas.webp 1185w, /static/44258af2e24c46272c73815faf074488/8717d/slides_technical-formulas.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/44258af2e24c46272c73815faf074488/9db10/slides_technical-formulas.jpg 198w, /static/44258af2e24c46272c73815faf074488/16a07/slides_technical-formulas.jpg 395w, /static/44258af2e24c46272c73815faf074488/d27a6/slides_technical-formulas.jpg 790w, /static/44258af2e24c46272c73815faf074488/0b93b/slides_technical-formulas.jpg 1185w, /static/44258af2e24c46272c73815faf074488/e3932/slides_technical-formulas.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/44258af2e24c46272c73815faf074488/d27a6/slides_technical-formulas.jpg" alt="Screenshots from the talk slides" title="Examples of formulas and mathematical equations in &lt;a href=&#39;https://speakerdeck.com/vmeursault/venus-and-mars&#39; target=&#39;_blank&#39;&gt;Vitaly’s slides&lt;/a&gt;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of formulas and mathematical equations in <a href='https://speakerdeck.com/vmeursault/venus-and-mars' target='_blank'>Vitaly’s slides</a></p></figcaption> </figure> <p>Depending on the content, there may be no way around using LaTeX via <a href="https://www.overleaf.com/learn/latex/Beamer">Beamer</a>, which limits the design possibilities and makes complex styling more difficult. (Unfortunately, I can’t give advice here, since I don’t use it much.) However, you can always combine Beamer slides with your own designs created in a different program, and matching fonts and colors in your <a href="https://www.overleaf.com/learn/latex/Beamer#Themes_and_colorthemes">theme</a> is relatively straightforward and ensures visual consistency.</p> <p>Pro tip: If you’re less experienced with LaTeX, try using ChatGPT or Claude to generate it for you! <a href="https://support.apple.com/guide/keynote/add-mathematical-equations-tan72a69d01f/mac">Keynote</a> and <a href="https://support.microsoft.com/en-us/office/write-an-equation-or-formula-1d01cabc-ceb1-458d-bc70-7f9737722702">PowerPoint</a> support inserting LaTeX out of the box and there’s an <a href="https://workspace.google.com/marketplace/app/autolatex_equations/850293439076">add-on</a> for Google that should work in <a href="https://workspace.google.com/products/slides/">Google Slides</a>. If you decide to go with images or screenshots instead, keep a close eye on the image quality and export in the highest reolution or, even better, as vector graphics (SVG).</p> <hr> <h2>Results and tables</h2> <p>Experiment results and figures can be an important part of your talk, but also challenging to present. In Vitaly’s <a href="https://speakerdeck.com/vmeursault/venus-and-mars">slides</a>, he used highlight colors and animated rectangles to guide attention to important data points, as well as boxes to add context. In some of my talks, I included speech bubbles to annotate rows, background colors to highlight individual figures and color-coded charts to visualize accuracy numbers.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/45a9a5090eb10c5ca49637baad05dd26/e3932/slides_technical-results.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAADAP/aAAwDAQACEAMQAAAB6mFVQILRE//EABoQAAICAwAAAAAAAAAAAAAAAAECABIhIjH/2gAIAQEAAQUCustsyMSuCOT/xAAYEQACAwAAAAAAAAAAAAAAAAAAAQIDEv/aAAgBAwEBPwGFjZpn/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAC/9oACAECAQE/ARjbf//EABkQAAIDAQAAAAAAAAAAAAAAAAABESAhQf/aAAgBAQAGPwIhNacp/8QAGxAAAgIDAQAAAAAAAAAAAAAAAAERMRAhQZH/2gAIAQEAAT8hXNvwa2CsolgsqzZZx//aAAwDAQACAAMAAAAQFz//xAAWEQEBAQAAAAAAAAAAAAAAAAAAAUH/2gAIAQMBAT8QHca//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/EFFMf//EAB0QAQEAAgEFAAAAAAAAAAAAAAERACExQXGRoeH/2gAIAQEAAT8QJeu3UYp6GRZSfHAwEzbxXtja88sd2y19uG7c/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/45a9a5090eb10c5ca49637baad05dd26/55fac/slides_technical-results.webp 198w, /static/45a9a5090eb10c5ca49637baad05dd26/5b4d3/slides_technical-results.webp 395w, /static/45a9a5090eb10c5ca49637baad05dd26/848e4/slides_technical-results.webp 790w, /static/45a9a5090eb10c5ca49637baad05dd26/8d239/slides_technical-results.webp 1185w, /static/45a9a5090eb10c5ca49637baad05dd26/8717d/slides_technical-results.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/45a9a5090eb10c5ca49637baad05dd26/9db10/slides_technical-results.jpg 198w, /static/45a9a5090eb10c5ca49637baad05dd26/16a07/slides_technical-results.jpg 395w, /static/45a9a5090eb10c5ca49637baad05dd26/d27a6/slides_technical-results.jpg 790w, /static/45a9a5090eb10c5ca49637baad05dd26/0b93b/slides_technical-results.jpg 1185w, /static/45a9a5090eb10c5ca49637baad05dd26/e3932/slides_technical-results.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/45a9a5090eb10c5ca49637baad05dd26/d27a6/slides_technical-results.jpg" alt="Screenshots from talk slides" title="Examples of results tables and charts on slides (&lt;a href=&#39;https://speakerdeck.com/vmeursault/venus-and-mars&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/workshop-half-hour-of-labeling-power-can-we-beat-gpt&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production-europython-keynote&#39; target=&#39;_blank&#39;&gt;#4&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of results tables and charts on slides (<a href='https://speakerdeck.com/vmeursault/venus-and-mars' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/workshop-half-hour-of-labeling-power-can-we-beat-gpt' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#3</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production-europython-keynote' target='_blank'>#4</a>)</p></figcaption> </figure> <p>Rather than screenshotting tables from papers and other sources, I typically re-create them in Keynote so I have more <a href="https://support.apple.com/guide/keynote/use-table-styles-tan6cbe92ac3/mac">styling</a> flexibility. Most slide design tools also support different <a href="https://support.apple.com/guide/keynote/add-or-delete-a-chart-tan1a8924264/mac">chart</a> styles based on tabular data that can be animated to show one line or bar at a time. While charts can be great to visualize figures in comparison and in a style that matches your talk’s aesthetic, use them wisely. Just because something is visual, it doesn’t mean it’s easier to understand. (The <a href="https://www.reddit.com/r/dataisugly/top/?t=all">Data Is Ugly</a> subreddit has some great inspiration for what <em>not</em> to do!)</p> <hr> <h2>Code and pseudocode</h2> <p>The main purpose of showing code on a slide is to explain what’s happening and how it works. It doesn’t necessarily have to be executable. I’ve found that it’s generally fine to leave out boilerplate or use ellipses <code>…</code> if it simplifies the code and makes it easier to follow. Speech bubbles and arrows are good ways to annotate your code and provide more context. For other tips for presenting visually appealing code, see <a href="/blog/beginners-guide-beautiful-slides-talks">part 1</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/193bd55cdbb6b2e37c9e2a4dad1f7e34/e3932/slides_technical-code.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgD/2gAMAwEAAhADEAAAAaxHJDX/xAAZEAACAwEAAAAAAAAAAAAAAAAAAgEDERL/2gAIAQEAAQUCqXLGTkjT/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BJ//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/ASf/xAAdEAABAgcAAAAAAAAAAAAAAAABAAIDEiExMlFx/9oACAEBAAY/Ark9UR07qjayK//EABsQAAICAwEAAAAAAAAAAAAAAAABESExQXHR/9oACAEBAAE/IY7WeUlaa2U6LhJ6n//aAAwDAQACAAMAAAAQB+//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAVEQEBAAAAAAAAAAAAAAAAAAAQMf/aAAgBAgEBPxCz/8QAGxAAAgMAAwAAAAAAAAAAAAAAESEAATFBUbH/2gAIAQEAAT8QB/ZKD7mfaU4laLKFvqf/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/193bd55cdbb6b2e37c9e2a4dad1f7e34/55fac/slides_technical-code.webp 198w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/5b4d3/slides_technical-code.webp 395w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/848e4/slides_technical-code.webp 790w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/8d239/slides_technical-code.webp 1185w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/8717d/slides_technical-code.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/193bd55cdbb6b2e37c9e2a4dad1f7e34/9db10/slides_technical-code.jpg 198w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/16a07/slides_technical-code.jpg 395w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/d27a6/slides_technical-code.jpg 790w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/0b93b/slides_technical-code.jpg 1185w, /static/193bd55cdbb6b2e37c9e2a4dad1f7e34/e3932/slides_technical-code.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/193bd55cdbb6b2e37c9e2a4dad1f7e34/d27a6/slides_technical-code.jpg" alt="Screenshots from the talk slides" title="Examples of annotated code from my slides (&lt;a href=&#39;https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/let-them-write-code-keynote-pycon-india-2019&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of annotated code from my slides (<a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#1</a>, <a href='https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/let-them-write-code-keynote-pycon-india-2019' target='_blank'>#3</a>)</p></figcaption> </figure> <p>If you’re speaking to an audience of programmers, <a href="https://en.wikipedia.org/wiki/Pseudocode">pseudocode</a> can also be effective for describing logical concepts. After all, that’s what code was designed for! For example, in <a href="https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines">Matt’s talk</a> about bootstrapping information extraction pipelines, we used <code>for</code> loops in Python to illustrate how to structure annotation workflows and reduce cognitive load for the annotator:</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/63cb1148981904affdffb3b1a7dc018f/e3932/slides_technical-pseudocode.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 36.36363636363637%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGamGqE/8QAGRABAQADAQAAAAAAAAAAAAAAAwECBBIT/9oACAEBAAEFAszf3futpywP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHRAAAgIBBQAAAAAAAAAAAAAAAhEAARIhMTJBgf/aAAgBAQAGPwKyHKxb5w7ReFNXv3P/xAAaEAEAAgMBAAAAAAAAAAAAAAABACERMUGR/9oACAEBAAE/IT6FRQ8iODeCkneStsz/2gAMAwEAAgADAAAAEPPf/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8QR//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAAIDAQEBAAAAAAAAAAAAAAERACFBMWGB/9oACAEBAAE/EAyoCgIOrxigmFWDRTWOADtSfGd+T//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/63cb1148981904affdffb3b1a7dc018f/55fac/slides_technical-pseudocode.webp 198w, /static/63cb1148981904affdffb3b1a7dc018f/5b4d3/slides_technical-pseudocode.webp 395w, /static/63cb1148981904affdffb3b1a7dc018f/848e4/slides_technical-pseudocode.webp 790w, /static/63cb1148981904affdffb3b1a7dc018f/8d239/slides_technical-pseudocode.webp 1185w, /static/63cb1148981904affdffb3b1a7dc018f/8717d/slides_technical-pseudocode.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/63cb1148981904affdffb3b1a7dc018f/9db10/slides_technical-pseudocode.jpg 198w, /static/63cb1148981904affdffb3b1a7dc018f/16a07/slides_technical-pseudocode.jpg 395w, /static/63cb1148981904affdffb3b1a7dc018f/d27a6/slides_technical-pseudocode.jpg 790w, /static/63cb1148981904affdffb3b1a7dc018f/0b93b/slides_technical-pseudocode.jpg 1185w, /static/63cb1148981904affdffb3b1a7dc018f/e3932/slides_technical-pseudocode.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/63cb1148981904affdffb3b1a7dc018f/d27a6/slides_technical-pseudocode.jpg" alt="Screenshot from the talk slides" title="Tips for keeping annotation tasks small and reducing cognitive load, illustrated as pseudocode in &lt;a href=&#39;https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines&#39; target=&#39;_blank&#39;&gt;Matt’s slides&lt;/a&gt;. The concepts described here aren’t actually code but multi-step workflows performed by a human." loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Tips for keeping annotation tasks small and reducing cognitive load, illustrated as pseudocode in <a href='https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines' target='_blank'>Matt’s slides</a>. The concepts described here aren’t actually code but multi-step workflows performed by a human.</p></figcaption> </figure> <hr> <p>If your talk is very academic in nature, an aesthetics-based approach might simply not be a good fit, and that’s fine. But for many technical conference talks, sprinkling in a bit of your personality through visual elements can make your content more interesting and in turn, engage your audience and make it easier to get your points across.</p> <p><em>P.S.: I really appreciate you all reaching out and sharing your slides inspired by my blog posts! If you’ve created your own slides, feel free to email me – I’d love to check them out</em> 🖤</p> <p><link-button href="/blog/beautiful-slides-talks-part-4-design-elements" icon="right">Part 4: Design elements</link-button></p></content:encoded>
</item>
<item>
<title>
<![CDATA[ My Year in Review 2024 ]]>
</title>
<description>
<![CDATA[ 2024 was an eventful but also difficult year for me. We made the decision to go back to running Explosion as an independent-minded, self… ]]>
</description>
<link>https://ines.io/blog/year-in-review-2024</link>
<guid isPermaLink="false">https://ines.io/blog/year-in-review-2024</guid>
<pubDate>Sat, 14 Dec 2024 00:00:00 GMT</pubDate>
<content:encoded><p>2024 was an eventful but also difficult year for me. We made the decision to <a href="https://explosion.ai/blog/back-to-our-roots-company-update">go back to</a> running Explosion as an independent-minded, self-sufficient company, and the transition wasn’t easy. Doing open source in a sustainable way is a still a big challenge, and supporting the company with product and services revenue required many difficult decisions. On the bright side, we finally got approved for a substantial R&#x26;D government grant this year! I also got to travel a lot and met many cool people, and it’s been incredibly motivating to see that our vision for applied NLP resonates so much with the developer community.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/f9d63e7895231ec68e7bba809dcf4005/aaf92/2024_ines.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 39.3939393939394%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQD/2gAMAwEAAhADEAAAAZe4NAR//8QAGRAAAwADAAAAAAAAAAAAAAAAAQIDERIh/9oACAEBAAEFAp41ggKDq//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAMAAwAAAAAAAAAAAAAAAAABERIxQf/aAAgBAQAGPwLg3RZbh//EABgQAAMBAQAAAAAAAAAAAAAAAAERIQBB/9oACAEBAAE/IanQtxLMXAOTMaTRv//aAAwDAQACAAMAAAAQc/8A/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFREBAQAAAAAAAAAAAAAAAAAAEEH/2gAIAQIBAT8Qp//EABkQAQEAAwEAAAAAAAAAAAAAAAERACExUf/aAAgBAQABPxCsrZgbSe5NYpQlV33Ct9hUZrhrmf/Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/f9d63e7895231ec68e7bba809dcf4005/55fac/2024_ines.webp 198w, /static/f9d63e7895231ec68e7bba809dcf4005/5b4d3/2024_ines.webp 395w, /static/f9d63e7895231ec68e7bba809dcf4005/848e4/2024_ines.webp 790w, /static/f9d63e7895231ec68e7bba809dcf4005/8d239/2024_ines.webp 1185w, /static/f9d63e7895231ec68e7bba809dcf4005/888d0/2024_ines.webp 1580w, /static/f9d63e7895231ec68e7bba809dcf4005/0b34d/2024_ines.webp 1920w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/f9d63e7895231ec68e7bba809dcf4005/9db10/2024_ines.jpg 198w, /static/f9d63e7895231ec68e7bba809dcf4005/16a07/2024_ines.jpg 395w, /static/f9d63e7895231ec68e7bba809dcf4005/d27a6/2024_ines.jpg 790w, /static/f9d63e7895231ec68e7bba809dcf4005/0b93b/2024_ines.jpg 1185w, /static/f9d63e7895231ec68e7bba809dcf4005/8f04a/2024_ines.jpg 1580w, /static/f9d63e7895231ec68e7bba809dcf4005/aaf92/2024_ines.jpg 1920w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/f9d63e7895231ec68e7bba809dcf4005/d27a6/2024_ines.jpg" alt="Photos of me" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <h2>Conferences and talks</h2> <p>This year, I decided to say yes to as many invitations as I could fit into my schedule. This meant a substantial amount of travelling, writing a <a href="https://speakerdeck.com/inesmontani">bunch of talks</a> and meeting lots and lots of people (which I love). Of course, I won’t be able to keep up this pace long-term, so in 2025, I’ll take it easier. I will be speaking at <a href="https://www.data-unplugged.de/festival">data:unplugged</a> in Münster in April and giving a talk in German for a change, and otherwise my focus will be on my favourite community and ecosystem conferences (current shortlist: PyCon DE, PyCon Italy and PyData Amsterdam).</p> <ul> <li><strong>Keynotes:</strong> PyCon Lithuania · DataHack Summit India · EuroSciPy · PyData Amsterdam · PyCon FR</li> <li><strong>Talks:</strong> QCon London · PyCon DE &#x26; PyData Berlin · PyCon Italy · Budapest ML Forum · PyData London · InfoQ Dev Summit Munich · PyBerlin · dotAI Paris</li> <li><strong>Roundups &#x26; Highlights:</strong> <a href="https://www.linkedin.com/posts/inesmontani_its-a-wrap-what-a-great-pyconde-pydata-activity-7188936519850622976-k7XP">Berlin</a> (PyCon &#x26; PyData) · <a href="https://www.linkedin.com/posts/inesmontani_thanks-for-a-great-pycon-italia-so-happy-activity-7200792507138404353-203A">Florence</a> (PyCon) · <a href="https://www.linkedin.com/posts/inesmontani_had-a-lovely-time-at-immergutrocken-ev-activity-7202944658526609409-nTQa">Immergut Festival</a> · <a href="https://www.linkedin.com/posts/inesmontani_llms-oss-ml-activity-7208392808263487488-sAzq">London</a> (PyData) · <a href="https://www.linkedin.com/posts/inesmontani_datahacksummit2024-nlp-genai-activity-7227930126775193600-CWAf">Bengaluru</a> (DataHack Summit) · <a href="https://www.linkedin.com/posts/inesmontani_genai-nlp-activity-7243203363926855680-_lTn">Amsterdam</a> (PyData) · <a href="https://www.linkedin.com/posts/inesmontani_nlp-genai-llms-activity-7246064796687548416-yA1M">Munich</a> (InfoQ Dev Summit) · <a href="https://www.linkedin.com/posts/inesmontani_dotai2024-ai-oss-activity-7253692456007876608-isfK">Paris</a> (dotAI)</li> </ul> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/546ad2bcbfb29922055e1d7b7c7d4c0a/b1c0f/2024_slides.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 57.07070707070707%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIEBf/EABYBAQEBAAAAAAAAAAAAAAAAAAIDBP/aAAwDAQACEAMQAAABWmBthvMoif/EABoQAAIDAQEAAAAAAAAAAAAAAAECABESEzH/2gAIAQEAAQUCWsowx1QEeWRDP//EABYRAAMAAAAAAAAAAAAAAAAAAAABEv/aAAgBAwEBPwG2Wz//xAAWEQADAAAAAAAAAAAAAAAAAAADEDH/2gAIAQIBAT8BJF//xAAZEAACAwEAAAAAAAAAAAAAAAAAEQECEKH/2gAIAQEABj8CIqxPmQs//8QAGxABAAICAwAAAAAAAAAAAAAAAQARIVExQWH/2gAIAQEAAT8ho4jtndCtRUSx6ibEsJJiK22f/9oADAMBAAIAAwAAABDsP//EABgRAAIDAAAAAAAAAAAAAAAAAAABESFh/9oACAEDAQE/EIrMEf/EABgRAAIDAAAAAAAAAAAAAAAAAAAxARFR/9oACAECAQE/ELtpCP/EABsQAQADAAMBAAAAAAAAAAAAAAEAESFBUaHR/9oACAEBAAE/EFsMdm+QJGmzTQLeah4aqR+EABxl1J1Yioq6rzP/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/546ad2bcbfb29922055e1d7b7c7d4c0a/55fac/2024_slides.webp 198w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/5b4d3/2024_slides.webp 395w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/848e4/2024_slides.webp 790w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/8d239/2024_slides.webp 1185w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/888d0/2024_slides.webp 1580w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/f63cc/2024_slides.webp 3900w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/546ad2bcbfb29922055e1d7b7c7d4c0a/9db10/2024_slides.jpg 198w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/16a07/2024_slides.jpg 395w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/d27a6/2024_slides.jpg 790w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/0b93b/2024_slides.jpg 1185w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/8f04a/2024_slides.jpg 1580w, /static/546ad2bcbfb29922055e1d7b7c7d4c0a/b1c0f/2024_slides.jpg 3900w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/546ad2bcbfb29922055e1d7b7c7d4c0a/d27a6/2024_slides.jpg" alt="Screenshots of title slides from the presentations" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <ul> <li><a href="https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms"><strong>The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs</strong></a><br />With the latest advancements in NLP and LLMs, and big companies like OpenAI dominating the space, many people wonder: Are we heading further into a black box era with larger and larger models, obscured behind APIs controlled by big tech monopolies? I don’t think so, and in this talk, I show you why.</li> <li><a href="https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation"><strong>Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation</strong></a><br />LLMs have enormous potential, but also challenge existing workflows in industry that require modularity, transparency and data privacy. In this talk, I show some practical solutions for using the latest models in real-world applications and distilling their knowledge into smaller and faster components that you can run and maintain in-house.</li> <li><a href="https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai"><strong>Applied NLP in the Age of Generative AI</strong></a><br />In this talk, I share the most important lessons we’ve learned from solving real-world information extraction problems in industry, and show you a new approach and mindset for designing robust and modular NLP pipelines in the age of Generative AI.</li> <li><a href="https://speakerdeck.com/inesmontani/10-years-of-open-source-navigating-the-next-ai-revolution"><strong>10 Years of Open Source: Navigating the Next AI Revolution</strong></a><br />In this talk, I share the most important lessons we’ve learned in 10 years of working on open-source software, our core philosophies that helped us adapt to an ever-changing AI landscape and why open source and interoperability still wins over black-box, proprietary APIs.</li> </ul> <p><link-button href="https://speakerdeck.com/inesmontani" icon="text">View all talks</link-button> <link-button href="https://explosion.ai/events" icon="calendar">Calendar</link-button> <br /><br /></p> <h2>Interviews and discussions</h2> <ul> <li><a href="https://se-radio.net/2024/04/se-radio-611-ines-montani-on-natural-language-processing/">Ines Montani on Natural Language Processing</a> (Software Engineering Radio)</li> <li><a href="https://www.linkedin.com/posts/inesmontani_had-a-lovely-time-at-immergutrocken-ev-activity-7202944658526609409-nTQa/">AI – The Artistic Intelligence?</a> (Immergut Festival)</li> <li><a href="https://talkpython.fm/episodes/show/465/the-ai-revolution-wont-be-monopolized">The AI Revolution Won’t Be Monopolized</a> (TalkPython)</li> <li><a href="https://www.youtube.com/watch?v=BXVxsUdlmMs">Building the Future of NLP: Insights on spaCy, Prodigy and Generative AI</a> (Leading With Data)</li> <li><a href="https://www.youtube.com/watch?v=-6o5-3cP0ik">The NLP and AI Revolution with the spaCy Creators</a> (Vanishing Gradients)</li> <li><a href="https://www.youtube.com/watch?v=neJ4J4PfdCE">Accelerate your Career with Open-Source AI</a> (dotAI)</li> <li><a href="https://www.youtube.com/watch?v=V73KeBCzXpM">PyLadies entrepreneurs and career development</a> (PyLadiesCon)</li> </ul> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/5412e8ef42d35d254781edcdd6b2744b/62db5/2024_websites.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 25.757575757575758%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB2aCgf//EABYQAAMAAAAAAAAAAAAAAAAAABARIf/aAAgBAQABBQKsf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAABD/2gAIAQEABj8Cf//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/IbT7jG72BzZ//9oADAMBAAIAAwAAABCDz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAQEBAAMAAAAAAAAAAAAAAAERACExYf/aAAgBAQABPxAkAEElpgqo46MgCn3f/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/5412e8ef42d35d254781edcdd6b2744b/55fac/2024_websites.webp 198w, /static/5412e8ef42d35d254781edcdd6b2744b/5b4d3/2024_websites.webp 395w, /static/5412e8ef42d35d254781edcdd6b2744b/848e4/2024_websites.webp 790w, /static/5412e8ef42d35d254781edcdd6b2744b/8d239/2024_websites.webp 1185w, /static/5412e8ef42d35d254781edcdd6b2744b/888d0/2024_websites.webp 1580w, /static/5412e8ef42d35d254781edcdd6b2744b/8b256/2024_websites.webp 2295w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/5412e8ef42d35d254781edcdd6b2744b/9db10/2024_websites.jpg 198w, /static/5412e8ef42d35d254781edcdd6b2744b/16a07/2024_websites.jpg 395w, /static/5412e8ef42d35d254781edcdd6b2744b/d27a6/2024_websites.jpg 790w, /static/5412e8ef42d35d254781edcdd6b2744b/0b93b/2024_websites.jpg 1185w, /static/5412e8ef42d35d254781edcdd6b2744b/8f04a/2024_websites.jpg 1580w, /static/5412e8ef42d35d254781edcdd6b2744b/62db5/2024_websites.jpg 2295w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/5412e8ef42d35d254781edcdd6b2744b/d27a6/2024_websites.jpg" alt="Screenshots of ines.io and explosion.ai" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <h2>Blog posts and writing</h2> <p>I wrote quite a few blog posts this year and especially enjoyed putting together practical <strong>case studies</strong> of NLP use cases with <a href="https://spacy.io">spaCy</a> and <a href="https://prodi.gy">Prodigy</a>, including projects from S&#x26;P Global, GitLab and Nesta. I would love to do more of those, so if you’re using spaCy and/or Prodigy at work and are open to sharing your use case, <a href="mailto:ines@explosion.ai">get in touch</a>!</p> <ul> <li><a href="https://ines.io/blog/beginners-guide-beautiful-slides-talks/">A beginner’s guide to making beautiful slides for your talks</a> (February)</li> <li><a href="https://explosion.ai/blog/nesta-skills">How Nesta uses NLP to process 7m job ads and shed light on the UK’s labor market</a> (February, Explosion)</li> <li><a href="https://ines.io/blog/three-transformative-tools/">Three transformative tools: a review of my favourite apps</a> (June)</li> <li><a href="https://ines.io/blog/beautiful-slides-talks-part-2-aesthetics/">Making beautiful slides for your talks, part 2: All about aesthetics</a> (June)</li> <li><a href="https://explosion.ai/blog/sp-global-commodities">How S&#x26;P Global is making markets more transparent with NLP, spaCy and Prodigy</a> (June, Explosion)</li> <li><a href="https://explosion.ai/blog/human-in-the-loop-distillation">A practical guide to human-in-the-loop distillation</a> (June, Explosion)</li> <li><a href="https://explosion.ai/blog/back-to-our-roots-company-update">Back to our roots: Company update and future plans</a> (July, Explosion)</li> <li><a href="https://ines.io/blog/window-knocking-machine-test/">The Window-Knocking Machine Test</a> (August)</li> <li><a href="https://explosion.ai/blog/gitlab-support-insights">How GitLab uses spaCy to analyze support tickets and empower their community</a> (September, Explosion)</li> <li><a href="https://explosion.ai/blog/modal-prodigy-serverless-nlp">Serverless custom NLP with LLMs, Modal and Prodigy</a> (October, Explosion)</li> <li><a href="https://explosion.ai/blog/pdfs-nlp-structured-data">From PDFs to AI-ready structured data: a deep dive</a> (December, Explosion)</li> </ul> <h2>Focus of my work and vision</h2> <p>🔮 distilling Large Language Models into smaller, task-specific components 🔮 developing new workflows to bring modularity and software engineering best practices to modern AI development 🔮 making specialised training workflows and UX around them as approachable as writing prompts 🔮 using clever automation to create better data faster 🔮 data privacy 🔮 strategies for refactoring code <em>and</em> data 🔮 taking Generative AI beyond just chat bots and natural language interfaces 🔮 structured data 🔮 helping developers take back control 🔮 scaling <em>down</em>, not just up</p> <hr> <h2>Personal</h2> <p>As I mentioned in my productivity tools <a href="/blog/three-transformative-tools">review</a>, I’m very much obsessed with tracking things and logging everything I do, watch, listen to, read and like. I also love my <a href="https://ouraring.com">Oura ring</a>, which I wear 24/7. The most notable change was that my morning routine and schedule has shifted and I wake up much earlier now. Maybe it’s age, or <a href="/blog/raspberry-pi-python-cats">cats</a> waking me up demanding their breakfast. Thanks to my bike, living in a super <a href="/blog/berlin-guide">walkable city</a> and my modest home gym, I’ve also been able to stay reasonably active.</p> <p>I listen to <strong>podcasts</strong> almost daily, mostly on topics completely unrelated to tech. It helps me unwind and makes chores and travelling less dull. My favourite genres include investigative journalism, true crime (I know, I know) and interesting cultural stories and audio reporting. I listened to over 150 this year alone, although this is counting every podcast I listened to at least one episode of.</p> <p>I don’t watch a lot of <strong>TV</strong>, but some series and films that stood out this year: <a href="https://en.wikipedia.org/wiki/Sh%C5%8Dgun_(2024_TV_series)"><em>Shōgun</em></a>, <a href="https://en.wikipedia.org/wiki/The_Zone_of_Interest_(film)"><em>The Zone of Interest</em></a>, <a href="https://en.wikipedia.org/wiki/The_Completely_Made-Up_Adventures_of_Dick_Turpin"><em>The Completely Made-Up Adventures of Dick Turpin</em></a> (definitely recommended for fellow fans of the <a href="https://en.wikipedia.org/wiki/The_Mighty_Boosh">Mighty Boosh</a>) and the new season of <a href="https://en.wikipedia.org/wiki/MasterChef:_The_Professionals"><em>MasterChef Professionals</em></a>, which started this autumn. Plus, my ultimate guilty pleasure when staying in hotels by myself (which I did a lot of this year): watching <em>Antiques Roadshow</em> or the German equivalent, curled up in bed with a snack.</p> <p>I also started several <strong>books</strong>, but finished very few. One of my favourites was the long-anticipated <a href="https://www.goodreads.com/book/show/211102398-rath"><em>Rath</em></a> by Volker Kutscher, the 10th and final part of a <a href="https://www.goodreads.com/series/82533-gereon-rath">series</a> that was also the basis for the neo-noir show <a href="https://en.wikipedia.org/wiki/Babylon_Berlin"><em>Babylon Berlin</em></a>, set in 1920s to 1930s Berlin. (Highly recommended! Outside of Germany, you should be able to watch it on Netflix with English subs.)</p> <p>In 2025, I really want to get back into <strong>music</strong> again. I’ve never been able to listen to music while working and programming, not even instrumental songs, so this limits the time I have to actually enjoy it. I did go to quite a few <strong>concerts</strong>, though, most notably several shows of my favourite German band <a href="https://en.wikipedia.org/wiki/Die_%C3%84rzte">Die Ärzte</a>, which would have made teenage me so proud and excited. I also took part in a panel discussion on AI and the music industry at Immergut Festival, combining my work with my love for live music – never thought those two worlds would ever collide!</p></content:encoded>
</item>
<item>
<title>
<![CDATA[ The Window-Knocking Machine Test ]]>
</title>
<description>
<![CDATA[ AI is making futurists of us all. With the dizzying speed of new innovations, it’s clear that our lives and work are going to change. So… ]]>
</description>
<link>https://ines.io/blog/window-knocking-machine-test</link>
<guid isPermaLink="false">https://ines.io/blog/window-knocking-machine-test</guid>
<pubDate>Wed, 07 Aug 2024 00:00:00 GMT</pubDate>
<content:encoded><p>AI is making futurists of us all. With the dizzying speed of new innovations, it’s clear that our lives and work are going to change. So what’s next? How will technology shape our world going forward? And what tools and products should we build? When imagining what the future could look like, it helps to look <em>back</em> in time and compare past visions to our reality today. The following paintings were created in the early 1900s and depict the artist’s ideas for what life could look like in the year 2000, assisted by new technology.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/e6932478a0a731eb7a600ab9a2dcd074/04bec/window-knocking_1900.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 29.7979797979798%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAID/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgAB/9oADAMBAAIQAxAAAAHeAINv/8QAFxAAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAQABBQJKlw//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwFn/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/AYx//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAEQMf/aAAgBAQAGPwJTD//EABkQAAIDAQAAAAAAAAAAAAAAAAERACFBYf/aAAgBAQABPyEwkTkDIrwx8VP/2gAMAwEAAgADAAAAEPAf/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAhMf/aAAgBAwEBPxAGRy//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAECAQE/EH1kH//EABsQAQACAgMAAAAAAAAAAAAAAAEAMREhUbHh/9oACAEBAAE/EKaKazZ7DEYczsinSroqs//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/e6932478a0a731eb7a600ab9a2dcd074/55fac/window-knocking_1900.webp 198w, /static/e6932478a0a731eb7a600ab9a2dcd074/5b4d3/window-knocking_1900.webp 395w, /static/e6932478a0a731eb7a600ab9a2dcd074/848e4/window-knocking_1900.webp 790w, /static/e6932478a0a731eb7a600ab9a2dcd074/8d239/window-knocking_1900.webp 1185w, /static/e6932478a0a731eb7a600ab9a2dcd074/888d0/window-knocking_1900.webp 1580w, /static/e6932478a0a731eb7a600ab9a2dcd074/64296/window-knocking_1900.webp 1600w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/e6932478a0a731eb7a600ab9a2dcd074/9db10/window-knocking_1900.jpg 198w, /static/e6932478a0a731eb7a600ab9a2dcd074/16a07/window-knocking_1900.jpg 395w, /static/e6932478a0a731eb7a600ab9a2dcd074/d27a6/window-knocking_1900.jpg 790w, /static/e6932478a0a731eb7a600ab9a2dcd074/0b93b/window-knocking_1900.jpg 1185w, /static/e6932478a0a731eb7a600ab9a2dcd074/8f04a/window-knocking_1900.jpg 1580w, /static/e6932478a0a731eb7a600ab9a2dcd074/04bec/window-knocking_1900.jpg 1600w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/e6932478a0a731eb7a600ab9a2dcd074/d27a6/window-knocking_1900.jpg" alt="Illustration of a woman using a machine operating a broom, and a group of flying firefighters with wings rescuing people from a burning house" title="How people in 1900 imagined the year 2000 (Source: &lt;a href=&#39;https://www.washingtonpost.com/news/wonk/wp/2015/10/04/what-people-in-1900-thought-the-year-2000-would-look-like&#39; target=&#39;_blank&#39;&gt;The Washington Post&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>How people in 1900 imagined the year 2000 (Source: <a href='https://www.washingtonpost.com/news/wonk/wp/2015/10/04/what-people-in-1900-thought-the-year-2000-would-look-like' target='_blank'>The Washington Post</a>)</p></figcaption> </figure> <p>Now 2000 has long gone and we know what life really looked like. What all of these visions have in common is that they imagine very literal translations of human-shaped tasks into technology. We did indeed solve many of these problems with technology, but we did it quite differently. We invented vacuum cleaners and robotic mops instead of sweeping machines that operate brooms. Other innovations tackled different problems altogether: we didn’t just engineer fire trucks, planes and drones, but also introduced smoke detectors, modern construction techniques and fireproof materials to prevent fires from breaking out in the first place.</p> <p>During the Industrial Revolution and up until the 1950s (!), people in Europe would employ so called <a href="https://en.wikipedia.org/wiki/Knocker-up">“knocker-uppers”</a>, who would walk around the neighbourhood with a long stick and knock on windows to ensure their clients woke up in time. This peculiar profession was of course made entirely obsolete by technology when alarm clocks became reliable enough and affordable for everyone. However, knocking on windows was simply a means to an end – we didn’t build window-knocking machines. We built alarm clocks that solved the same problem in a <em>different</em> and much more effective way. Just like how humans knocking on windows was the most effective way before.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/4798c5e9d8dac5e0c17c258b7c3ada02/a24e6/wired-brain_knockerupper.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 39.8989898989899%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAED/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABZBQf/8QAGRAAAgMBAAAAAAAAAAAAAAAAAhIAAxEx/9oACAEBAAEFAuQ9I62X/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRAAAwADAAAAAAAAAAAAAAAAAAERAiGh/9oACAEBAAY/ArBM1j0//8QAGBABAQEBAQAAAAAAAAAAAAAAAREAIUH/2gAIAQEAAT8hWuiQ8yiWQuSN5n//2gAMAwEAAgADAAAAEPAP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGRAAAwEBAQAAAAAAAAAAAAAAAREhADGB/9oACAEBAAE/EKwgkniJYUjDEEQpT5o+U5G//9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/4798c5e9d8dac5e0c17c258b7c3ada02/55fac/wired-brain_knockerupper.webp 198w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/5b4d3/wired-brain_knockerupper.webp 395w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/848e4/wired-brain_knockerupper.webp 790w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/cf465/wired-brain_knockerupper.webp 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/4798c5e9d8dac5e0c17c258b7c3ada02/9db10/wired-brain_knockerupper.jpg 198w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/16a07/wired-brain_knockerupper.jpg 395w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/d27a6/wired-brain_knockerupper.jpg 790w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/a24e6/wired-brain_knockerupper.jpg 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/4798c5e9d8dac5e0c17c258b7c3ada02/d27a6/wired-brain_knockerupper.jpg" alt="Old photographs of knocker-uppers in front of buildings, using a long stick to knock on the windows" title="“Knocker-uppers” at work (Source: &lt;a href=&#39;http://mashable.com/2016/09/04/knockers-up/&#39; target=&#39;_blank&#39;&gt;Mashable&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>“Knocker-uppers” at work (Source: <a href='http://mashable.com/2016/09/04/knockers-up/' target='_blank'>Mashable</a>)</p></figcaption> </figure> <p>When designing new technological solutions, it’s easy to fall into the trap of imagining them as human-shaped replacements because that’s all we know. But the most successful innovations don’t usually work this way. So whenever you’re tasked with developing a system to replace and automate a human task, ask yourself:</p> <blockquote> <p>Am I building a window-knocking machine or an alarm clock?</p> </blockquote> <hr> <p>Around 2015 when deep learning was widely adopted and conversational AI became more viable, the industry got <em>very</em> excited about chat bots. Compared to what we can do today, the capabilities were still pretty limited, but optimism and all the new possibilities led to many ambitious product ideas and attempts to make modern workplaces more productive.</p> <p>Some of the most attractive use cases were centered around automating tasks of personal assistants: placing orders, coordinating people or scheduling appointments. The latter is especially painful and time-consuming, as everyone who’s worked in a role with frequent meetings can attest to. So what if we could make a chat bot take over that conversation?</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/48d44a5ff16a732583c79a0756bf472d/84cd2/window-knocking_calendly.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 44.94949494949495%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwABBf/EABQBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAeowsylsF//EABkQAAMAAwAAAAAAAAAAAAAAAAACMgEDIf/aAAgBAQABBQLZnqSPSSf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQQf/aAAgBAwEBPwGn/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAECAQE/ATF//8QAFhAAAwAAAAAAAAAAAAAAAAAAASAh/9oACAEBAAY/AoW//8QAHBAAAwABBQAAAAAAAAAAAAAAAAERMRAhUYHR/9oACAEBAAE/IWqYc7+j1a72QzmPT//aAAwDAQACAAMAAAAQW8//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPxAWP//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/ECBn/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARsRAxkaH/2gAIAQEAAT8QsLRdKmsitVWlocjfu/ZhyfQ8f//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/48d44a5ff16a732583c79a0756bf472d/55fac/window-knocking_calendly.webp 198w, /static/48d44a5ff16a732583c79a0756bf472d/5b4d3/window-knocking_calendly.webp 395w, /static/48d44a5ff16a732583c79a0756bf472d/848e4/window-knocking_calendly.webp 790w, /static/48d44a5ff16a732583c79a0756bf472d/8d239/window-knocking_calendly.webp 1185w, /static/48d44a5ff16a732583c79a0756bf472d/888d0/window-knocking_calendly.webp 1580w, /static/48d44a5ff16a732583c79a0756bf472d/a14d8/window-knocking_calendly.webp 2415w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/48d44a5ff16a732583c79a0756bf472d/9db10/window-knocking_calendly.jpg 198w, /static/48d44a5ff16a732583c79a0756bf472d/16a07/window-knocking_calendly.jpg 395w, /static/48d44a5ff16a732583c79a0756bf472d/d27a6/window-knocking_calendly.jpg 790w, /static/48d44a5ff16a732583c79a0756bf472d/0b93b/window-knocking_calendly.jpg 1185w, /static/48d44a5ff16a732583c79a0756bf472d/8f04a/window-knocking_calendly.jpg 1580w, /static/48d44a5ff16a732583c79a0756bf472d/84cd2/window-knocking_calendly.jpg 2415w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/48d44a5ff16a732583c79a0756bf472d/d27a6/window-knocking_calendly.jpg" alt="A chat bot trying to schedule a meeting vs. the Calendly app" title="Two solutions for scheduling meetings: a chat bot and the Calendly app" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Two solutions for scheduling meetings: a chat bot and the Calendly app</p></figcaption> </figure> <p>An alternative approach was introduced by <a href="https://calendly.com">Calendly</a>, a product I love and highly recommend. The premise is simple: Calendly syncs with your calendars and gives you a booking link that lets others schedule appointments in a few clicks, optionally syncing with their calendars, too, and automatically converting time zones. It’s an incredibly effective solution that doesn’t even require AI at its core – it simply reframes the problem and solves it at the root, rather than translating the task performed by a human assistant. You could also say: Calendly is the alarm clock to the window-knocking machine of the chat bot.</p> <p>Now don’t get me wrong, there are many applications that really benefit from conversational interfaces. But natural language is exactly that: <a href="https://explosion.ai/blog/natural-user-interface">another interface</a>. Whether or not it’s the <em>right</em> interface is a decision you can’t make without considering the specifics of your application and its intended users.</p> <p>The more recent developments around LLMs and Generative AI have enabled a big leap in natural language understanding technology and also reignited the excitement around chat bots. <a href="https://en.wikipedia.org/wiki/Retrieval-augmented_generation">Retrieval-Augmented Generation</a> (RAG) lets users interact with applications and their specific underlying data, for instance to translate natural language questions into real-time database queries. If you want to know your company’s revenue figures, you can simply ask your bot, instead of looking at a table of numbers.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/6ac9f2556874bd9d2720cc3a8066f11b/1a782/window-knocking_rag.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 45.45454545454545%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdi6pEMH/8QAGBAAAgMAAAAAAAAAAAAAAAAAAQIRIEH/2gAIAQEAAQUCKycp/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bh//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/Aaf/xAAVEAEBAAAAAAAAAAAAAAAAAAAgMf/aAAgBAQAGPwKr/8QAHBAAAgICAwAAAAAAAAAAAAAAAREAIRAxQVHR/9oACAEBAAE/IXhG3b9goXSEFhg7nOf/2gAMAwEAAgADAAAAEFTP/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAR/9oACAEDAQE/EADpP//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxBaYz//xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhMbFhof/aAAgBAQABPxDGtbInnyhUCu5y21X17GGBBYmodR0w0T//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/6ac9f2556874bd9d2720cc3a8066f11b/55fac/window-knocking_rag.webp 198w, /static/6ac9f2556874bd9d2720cc3a8066f11b/5b4d3/window-knocking_rag.webp 395w, /static/6ac9f2556874bd9d2720cc3a8066f11b/848e4/window-knocking_rag.webp 790w, /static/6ac9f2556874bd9d2720cc3a8066f11b/8d239/window-knocking_rag.webp 1185w, /static/6ac9f2556874bd9d2720cc3a8066f11b/888d0/window-knocking_rag.webp 1580w, /static/6ac9f2556874bd9d2720cc3a8066f11b/8b966/window-knocking_rag.webp 2495w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/6ac9f2556874bd9d2720cc3a8066f11b/9db10/window-knocking_rag.jpg 198w, /static/6ac9f2556874bd9d2720cc3a8066f11b/16a07/window-knocking_rag.jpg 395w, /static/6ac9f2556874bd9d2720cc3a8066f11b/d27a6/window-knocking_rag.jpg 790w, /static/6ac9f2556874bd9d2720cc3a8066f11b/0b93b/window-knocking_rag.jpg 1185w, /static/6ac9f2556874bd9d2720cc3a8066f11b/8f04a/window-knocking_rag.jpg 1580w, /static/6ac9f2556874bd9d2720cc3a8066f11b/1a782/window-knocking_rag.jpg 2495w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/6ac9f2556874bd9d2720cc3a8066f11b/d27a6/window-knocking_rag.jpg" alt="A chat bot to query revenue and customer data vs. a visual interface" title="Two solutions for querying revenue and customer data: a chat bot and a graphical user interface" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Two solutions for querying revenue and customer data: a chat bot and a graphical user interface</p></figcaption> </figure> <p>The decision between alarm clock and window-knocking machine is much less clear-cut in this example and depends a lot on the intended usage. Natural language questions can be much more intuitive for non-experts, but they probably won’t replace the need for structured data as a source of truth that analysts can work with directly. If this is too inefficient, the answer isn’t to abstract it away behind a conversational interface – it indicates that the existing interface needs to be better.</p> <p>I believe a common misconception about professional tools is that providing a good user experience and making things “simple” requires <a href="https://speakerdeck.com/inesmontani/let-them-write-code-keynote-pycon-india-2019?slide=56">abstracting away</a> as many layers as possible. That’s how we end up with “one click” or “one line of code” solutions that sound great in theory, but have users hit a wall as soon as they want to do things the developers had not considered or intended. Just because a user is “non-technical” (whatever this means), it doesn’t mean they’re unable or unwilling to use complex professional products – it’s just that those products need to be designed well and get the job done efficiently.</p> <p>The latest AI technologies have a lot of potential to make humans more productive – but just like with past innovations, the way they’ll translate into products and solutions will likely be very different from our limited imagination of human-shaped tasks. We’re currently seeing a lot of window-knocking machines being built, but only the alarm clocks will remain.</p></content:encoded>
</item>
<item>
<title>
<![CDATA[ Making beautiful slides for your talks, part 2: All about aesthetics ]]>
</title>
<description>
<![CDATA[ After I published my beginner’s guide to making beautiful slides for your talks, I got a lot of great feedback and I especially loved that… ]]>
</description>
<link>https://ines.io/blog/beautiful-slides-talks-part-2-aesthetics</link>
<guid isPermaLink="false">https://ines.io/blog/beautiful-slides-talks-part-2-aesthetics</guid>
<pubDate>Sat, 22 Jun 2024 00:00:00 GMT</pubDate>
<content:encoded><p>After I published my <a href="/blog/beginners-guide-beautiful-slides-talks">beginner’s guide to making beautiful slides for your talks</a>, I got a lot of great feedback and I especially loved that others had already used it for their talks – some of which I even got to see in person! So in this post, I want to showcase two examples from the community, as well as my most recent talk, and dive deeper into the aesthetics and slide design process. Thanks to <a href="https://t-redactyl.io/">Jodie</a> and <a href="https://vickiboykis.com/">Vicki</a> for participating!</p> <p>🎨 <strong>Part 1:</strong> <a href="/blog/beginners-guide-beautiful-slides-talks">Design tips for beginners</a> ✨ <strong>Part 2: All about aesthetics</strong> 🛠️ <strong>Part 3:</strong> <a href="/blog/beautiful-slides-talks-part-3-technical-content">Technical content</a> 🧩 <strong>Part 4:</strong> <a href="/blog/beautiful-slides-talks-part-4-design-elements">Design elements</a> 💌 <strong>Part 5:</strong> <a href="/blog/beautiful-slides-talks-part-5-sharing-presentations">Sharing your presentations</a></p> <p><em><strong>Disclaimer</strong> (since my <a href="/blog/beginners-guide-beautiful-slides-talks">previous post</a> also got widely shared outside of my circles): This blog post series is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p> <hr> <h2>Jodie Burchell: “Mirror, mirror: LLMs and the illusion of humanity” (PyCon Italy keynote)</h2> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/95b06b9b59d990d931522d93ffb2bc08/e3932/slides_aesthetics-jodie.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAAB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAQaZ9A7I/8QAGRABAQEAAwAAAAAAAAAAAAAAAgMBABMi/9oACAEBAAEFAsfnrdtckNPJ0QN3rp//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwEn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHBAAAgICAwAAAAAAAAAAAAAAAhEAARASIjJx/9oACAEBAAY/Aus2EXESG/ccbUZW5//EABwQAAMAAQUAAAAAAAAAAAAAAAABESExQVFhcf/aAAgBAQABPyGaJI5p2LH1FTlLIxvJ2DxDNUkP/9oADAMBAAIAAwAAABCX7//EABcRAQADAAAAAAAAAAAAAAAAAAEAESH/2gAIAQMBAT8QF4Skyf/EABYRAQEBAAAAAAAAAAAAAAAAACEAEf/aAAgBAgEBPxDEm//EABwQAQEBAQACAwAAAAAAAAAAAAERIQAxQYGhsf/aAAgBAQABPxA0iCIPC764KIhAoYSfXX4widDnl7DLs4Mellv06XRAYGfHf//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/95b06b9b59d990d931522d93ffb2bc08/55fac/slides_aesthetics-jodie.webp 198w, /static/95b06b9b59d990d931522d93ffb2bc08/5b4d3/slides_aesthetics-jodie.webp 395w, /static/95b06b9b59d990d931522d93ffb2bc08/848e4/slides_aesthetics-jodie.webp 790w, /static/95b06b9b59d990d931522d93ffb2bc08/8d239/slides_aesthetics-jodie.webp 1185w, /static/95b06b9b59d990d931522d93ffb2bc08/8717d/slides_aesthetics-jodie.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/95b06b9b59d990d931522d93ffb2bc08/9db10/slides_aesthetics-jodie.jpg 198w, /static/95b06b9b59d990d931522d93ffb2bc08/16a07/slides_aesthetics-jodie.jpg 395w, /static/95b06b9b59d990d931522d93ffb2bc08/d27a6/slides_aesthetics-jodie.jpg 790w, /static/95b06b9b59d990d931522d93ffb2bc08/0b93b/slides_aesthetics-jodie.jpg 1185w, /static/95b06b9b59d990d931522d93ffb2bc08/e3932/slides_aesthetics-jodie.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/95b06b9b59d990d931522d93ffb2bc08/d27a6/slides_aesthetics-jodie.jpg" alt="Screenshots from the talk slides" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>✨ <strong>Aesthetic</strong></span></td> <td>cyberpunk / neon / retro futuristic</td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#110A36"></span> dark navy blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#FF41FF"></span> bubblegum pink, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#72FDFF"></span> electric blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#D883FF"></span> light violet, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#0096FF"></span> dodger blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#fff"></span> white</td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://fonts.google.com/specimen/Audiowide">Audiowide</a> (title slides), <a href="https://fonts.google.com/specimen/Michroma">Michroma</a> (titles), <a href="https://fonts.google.com/specimen/Rajdhani">Rajdhani</a> (body), <a href="https://www.jetbrains.com/lp/mono/">JetBrains Mono</a> (code), <a href="https://fonts.google.com/specimen/Roboto">Roboto</a> (ChatGPT slide)</td> </tr> <tr> <td><span>🛠️ <strong>Tools</strong></span></td> <td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.pixelmator.com/pro/">Pixelmator Pro</a>, <a href="https://support.apple.com/guide/digital-color-meter/welcome/mac">Digital Colour Meter</a></td> </tr> </tbody> </table> <blockquote> <p>“Due to my talk topic, I already had a “sci-fi” kind of theme in mind. Following Ines’ advice, I trawled through Google Fonts, looking for something that looked kind of retro but futuristic, and Audiowide jumped out at me. However, as this font is very distinctive and heavy I knew I’d need to use it sparingly. To get my title and body fonts, I just googled for fonts that go with Audiowide, and after a bit of trial and error settled on Michroma and Rajdhani. As I’m not great at design, I tend to google for ideas like this a lot - there are many people who have generously offered up their expertise, and you can use this to really polish your own designs.</p> <p>To fit with the talk title, I started looking for “futuristic” images that involved a mirror, and fell in love with the one I used for my title slide. Once I had that, I just used Mac’s built-in Digital Color Meter to extract the different colors used in that photo, and voila! I had my color palette ready made from that!</p> <p>When working out how to put together the title slide, I found a <a href="https://www.youtube.com/watch?v=jlfLEUj3MC8">cool video</a> where someone showed how to make a neon effect just using the built-in tools in Keynote. I messed around with this until I was happy with the result, and ended up using this quite heavily throughout the presentation. I think this additional detail (although it took ages to do!) really helped underscore the cyberpunk theme I was going for, and popped really nicely on the dark background!”</p> </blockquote> <p><link-button href="https://github.com/t-redactyl/mirror-mirror/blob/main/talk-materials/mirror-mirror-slides.pdf" icon="text">Slides</link-button></p> <hr> <h2>Vicki Boykis: “Closer to the Metal” (PyCon Italy keynote)</h2> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/a1108a8cb2d86ed93a276cbbb64e1acd/e3932/slides_aesthetics-vicki.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAAF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAULxWy60ST//xAAaEAEBAAIDAAAAAAAAAAAAAAABAgASISQx/9oACAEBAAEFAod5WWJ8OJk6gs5//8QAFhEBAQEAAAAAAAAAAAAAAAAAIQIQ/9oACAEDAQE/AaHP/8QAFxEBAAMAAAAAAAAAAAAAAAAAARARIf/aAAgBAgEBPwEbyP/EABsQAAMAAwEBAAAAAAAAAAAAAAABAhEhYTFR/9oACAEBAAY/AnNPS+EtU+HuTXCWYR//xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhQWEx4f/aAAgBAQABPyEabyrARoYWmYe3TE6GIINYl76wy2j5P//aAAwDAQACAAMAAAAQcx//xAAWEQEBAQAAAAAAAAAAAAAAAAAAESH/2gAIAQMBAT8QwJX/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQIBAT8QZ4hv/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARMSFxUf/aAAgBAQABPxC7gVjqrvA21gDXq3pXfuSoAL0WdWKMIezg8QRQZJ4tboXZ/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/a1108a8cb2d86ed93a276cbbb64e1acd/55fac/slides_aesthetics-vicki.webp 198w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/5b4d3/slides_aesthetics-vicki.webp 395w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/848e4/slides_aesthetics-vicki.webp 790w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/8d239/slides_aesthetics-vicki.webp 1185w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/8717d/slides_aesthetics-vicki.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/a1108a8cb2d86ed93a276cbbb64e1acd/9db10/slides_aesthetics-vicki.jpg 198w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/16a07/slides_aesthetics-vicki.jpg 395w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/d27a6/slides_aesthetics-vicki.jpg 790w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/0b93b/slides_aesthetics-vicki.jpg 1185w, /static/a1108a8cb2d86ed93a276cbbb64e1acd/e3932/slides_aesthetics-vicki.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/a1108a8cb2d86ed93a276cbbb64e1acd/d27a6/slides_aesthetics-vicki.jpg" alt="Screenshots from the talk slides" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>✨ <strong>Aesthetic</strong></span></td> <td>minimalist / robotic / pixel / classical art / renaissance</td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#4C84E9"></span> blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#FEAB3E"></span> orange, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#0097A7"></span> turqoise, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#EEFF41"></span> green-yellow, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#000"></span> black, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#fff"></span> white</td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://fonts.google.com/specimen/Jersey+25">Jersey 25</a> (titles), <a href="https://fonts.google.com/specimen/Jersey+15">Jersey 15</a> (titles), <a href="https://fonts.google.com/specimen/Roboto">Roboto</a> (body)</td> </tr> <tr> <td><span>🛠️ <strong>Tools</strong></span></td> <td><a href="https://www.google.com/slides/about/">Google Slides</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a></td> </tr> </tbody> </table> <blockquote> <p>“My general aesthetic is to keep the slide design process as minimal as possible because I’m not much of a designer and I don’t want people to know :D.</p> <p>But my overall approaches in any content I produce are to use real human art. I’m not sure when I started doing this, but adding some art to technology content always feels balanced to me: we are not just sitting here writing classes and configuration files and worrying about scaling strategies. Even as technologists we are part of the tradition of makers and creators in humanity and I always want to tie my content back to that. Also I just really like looking at paintings and artwork. I knew that I’d especially be using Renaissance and other related artwork for a talk given in Florence.</p> <p>At the same time, this was also a talk about LLMs, very deep technical dives into codebases, machine learning, and statistics. Hence the combination of the robotic-style fonts with the artwork and code and math displayed in monospaced/scientific fonts for clarity.</p> <p>Finally, I want people to come to my talks to feel entertained. We are here doing serious things, but if we take ourselves too seriously, it takes all the joy and fun out of tech. We’re here to build stuff, break stuff, learn together, and laugh afterwards. That’s why a lot of my slides feel like meme templates, and also why I picked the title slide art as an image from a US public service poster from World War 2 and played with the effects using Photoshop Actions.”</p> </blockquote> <p><link-button href="https://docs.google.com/presentation/d/1PL6xG0F5FuPSeudAELCXLgDnPaBGvSmtDod4gaaIRRE/edit#slide=id.p" icon="text">Slides</link-button> <link-button href="https://vickiboykis.com/2024/05/20/dont-worry-about-llms/" icon="text">Blog post</link-button></p> <hr> <h2>Ines Montani: “Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation”</h2> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/cb6e0308c9901b4b6c043894820c7d39/e3932/slides_aesthetics-ines.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAACAQP/2gAMAwEAAhADEAAAAdAS3RqSKf/EABoQAAEFAQAAAAAAAAAAAAAAAAEAAgMQMRH/2gAIAQEAAQUC22DkgR3/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwFH/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEQAjH/2gAIAQEABj8C6KaFP//EABgQAQEBAQEAAAAAAAAAAAAAAAEAESEx/9oACAEBAAE/IcFwOQD6uawLDNhhOFf/2gAMAwEAAgADAAAAECsv/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERIXH/2gAIAQMBAT8QtvBSP//EABcRAAMBAAAAAAAAAAAAAAAAAAABMRH/2gAIAQIBAT8Q2ih//8QAHBABAAMAAgMAAAAAAAAAAAAAAQARITFBUaHR/9oACAEBAAE/EA2kOhqfIqzZSAu5UeM2XApIancJQbh7mWeZ/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/cb6e0308c9901b4b6c043894820c7d39/55fac/slides_aesthetics-ines.webp 198w, /static/cb6e0308c9901b4b6c043894820c7d39/5b4d3/slides_aesthetics-ines.webp 395w, /static/cb6e0308c9901b4b6c043894820c7d39/848e4/slides_aesthetics-ines.webp 790w, /static/cb6e0308c9901b4b6c043894820c7d39/8d239/slides_aesthetics-ines.webp 1185w, /static/cb6e0308c9901b4b6c043894820c7d39/8717d/slides_aesthetics-ines.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/cb6e0308c9901b4b6c043894820c7d39/9db10/slides_aesthetics-ines.jpg 198w, /static/cb6e0308c9901b4b6c043894820c7d39/16a07/slides_aesthetics-ines.jpg 395w, /static/cb6e0308c9901b4b6c043894820c7d39/d27a6/slides_aesthetics-ines.jpg 790w, /static/cb6e0308c9901b4b6c043894820c7d39/0b93b/slides_aesthetics-ines.jpg 1185w, /static/cb6e0308c9901b4b6c043894820c7d39/e3932/slides_aesthetics-ines.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/cb6e0308c9901b4b6c043894820c7d39/d27a6/slides_aesthetics-ines.jpg" alt="Screenshots from the talk slides" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>✨ <strong>Aesthetic</strong></span></td> <td>iridescent / bubbly / chrome / gradient / Y2K</td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#DAAFF4"></span> lavender purple, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#A0B5F8"></span> light blue, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#EEB4F0"></span> pastel pink, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#FAEFAF"></span> light yellow-orange, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#180B28"></span> purple off-black, <span style="display:inline-block;position:relative;top:2px;width:1em;height:1em;border-radius:1em;border:1px solid var(--color-subtle-medium);background:#fff"></span> white</td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://creativemarket.com/SamParrett/11022092-Wubble-SVG-Font-Letterset">Wubble</a> (title accents), <a href="https://fonts.google.com/specimen/Poppins">Poppins</a> Extra Bold (titles), <a href="https://klim.co.nz/retail-fonts/calibre/">Calibre</a> (body), <a href="https://www.jetbrains.com/lp/mono/">JetBrains Mono</a> (code)</td> </tr> <tr> <td><span>🛠️ <strong>Tools</strong></span></td> <td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a></td> </tr> </tbody> </table> <blockquote> <p>“I’ve always wanted to create a modern take on a Y2K-inspired aesthetic and was looking for an opportunity to use that bubbly font, which is too much for full texts, but works nicely as an accent. It all came together when I found a set of iridescent chrome shapes, including cubes, blobs, rings and spheres, which felt like a good way to illustrate different types of NLP models. The concept of distilling large general-purpose models into smaller components is fairly abstract and I figured it’d help to introduce different shapes that I could keep referencing throughout the talk.</p> <p>The subtly grainy background gradient uses similar colors and adds some life to slides that are otherwise very empty, with an opaque white background or shadows to keep text readable. To separate external references, like my work in the intro and the example case studies, I used a design with a dark background instead. I had a lot of fun making the slides and seeing those bubbly shapes made me happy every time, which was great for staying motivated, and finish writing and putting together the content.”</p> </blockquote> <p><link-button href="https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation" icon="text">Slides</link-button> <link-button href="https://explosion.ai/blog/human-in-the-loop-distillation" icon="text">Blog post</link-button></p> <hr> <h2>Picking an aesthetic</h2> <p>I guess you could call my approach to making slides very aesthetics-driven. It’s not for everyone, but it works well for the types of talks I do, and it helps bring some life into technical topics and higher-level strategic concepts that are otherwise pretty dry and abstract. I like the element of surprise it adds, and maybe it can even make someone’s conference day a little bit less draining and exhausting. There’s something about us as humans that makes us enjoy themed experiences – it’s probably the same reason we like theme parks or other types of “immersive” escapism.</p> <p>Your visual aesthetic is a great opportunity to sprinkle in a little bit of your personality, which you don’t always get to do in tech. If you’re going all-in on an idea, I’d recommend making sure it’s something that the audience will likely get or that still conveys a more general, recognizable theme. For example, you can reference your favorite obscure video game if it’s still recognizable as a video game aesthetic or hell, even Taylor Swift album art if it still reads as <a href="https://en.wikipedia.org/wiki/Midnights">minimalist Helvetica</a> or <a href="https://en.wikipedia.org/wiki/Reputation_(album)">grunge newspaper clippings</a>. There’s obviously somewhat of a bias towards nerdy retro vibes at tech conferences, which you can totally lean into if you like.</p> <p>Another source of inspiration is the topic or venue of your talk. Deep tech topics like AI can be tricky to illustrate if you take them too literally (and you probably want to avoid all that generic ”<a href="/blog/wired-brain-ai-powered-future/">glowing brain</a>” imagery – Jodie solved this well by going for a more Blade-Runner-esque retro futuristic theme). You can also take it one step further. Maybe your talk uses practical examples from an industry associated with a certain visual style – like newspaper or magazine design for media, or <a href="https://creativemarket.com/search/x-ray-effect?categoryIDs=0">X-ray effects</a> for the medical field. In Vicki’s keynote, she used the historic <a href="https://en.wikipedia.org/wiki/House_of_Medici">House of Medici</a> of Florence (where the conference was held) as inspiration for a fictional “Medici Corp” who are exploring the use of AI and LLMs. This established a great storyline for the talk and naturally suggested the use of historic paintings, reminiscent of the great <a href="https://www.amazon.de/-/en/Nicole-Tersigni/dp/1797202839">“Men to Avoid in Art and Life”</a> book. The bold pixel font provides a nice contrast and brings it back around to technology.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/ec4e1a68703b5690119bd6bcf75aaf2a/e3932/tools_arc-easels.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 45.95959595959596%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHaSlEUCP/EABkQAAEFAAAAAAAAAAAAAAAAAAEAEBExQf/aAAgBAQABBQLJKFB//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhAAAwAAAAAAAAAAAAAAAAAAACBB/9oACAEBAAY/Air/AP/EABwQAQACAQUAAAAAAAAAAAAAAAEAETEQIUGBkf/aAAgBAQABPyFs2j7BOB3LUvMydf/aAAwDAQACAAMAAAAQZP8A/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8QJ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQADAAMBAAAAAAAAAAAAAAEAESExQaGR/9oACAEBAAE/EHdQi4UY7SpoN8/IMGqaXfs9k6jzP//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/ec4e1a68703b5690119bd6bcf75aaf2a/55fac/tools_arc-easels.webp 198w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/5b4d3/tools_arc-easels.webp 395w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/848e4/tools_arc-easels.webp 790w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/8d239/tools_arc-easels.webp 1185w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/8717d/tools_arc-easels.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/ec4e1a68703b5690119bd6bcf75aaf2a/9db10/tools_arc-easels.jpg 198w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/16a07/tools_arc-easels.jpg 395w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/d27a6/tools_arc-easels.jpg 790w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/0b93b/tools_arc-easels.jpg 1185w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/e3932/tools_arc-easels.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/ec4e1a68703b5690119bd6bcf75aaf2a/d27a6/tools_arc-easels.jpg" alt="Easels in Arc: visual inspiration for my talks" title="Early version of a moodboard collecting inspiration for my talk" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Early version of a moodboard collecting inspiration for my talk</p></figcaption> </figure> <p>I recently wrote about my <a href="/blog/three-transformative-tools">favorite tools</a> and how I use the <a href="https://arc.net/gift/d36640d6">Arc</a> browser and its “Easels” feature to plan out my talks. It comes with a very smooth and intuitive interface for moodboards and lets you “capture” any content from the web while browsing. Of course, you can also do something similar in any other note-taking app – but I recommend collecting all inspiration and references visually and in a single place, as it makes it so much easier to write your talk once you’re ready. If looking at your moodboard gets you excited, you’re in the perfect mindset to smash out those slides and tick that talk off your todo list.</p> <hr> <h2>Statement slides</h2> <p>Adding “statement slides” throughout your talk is a great way to summarize the most important takeaways and break down your content. They’re especially useful in talks that function as opinion pieces or present strategic advice or lessons learned from solving a particular problem. Sometimes I even start with them when writing a new talk and first establish a through line with statement slides, then fill in the sections.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/a6497d14da4385232fd9f651b9298826/e3932/slides_aesthetics-statement.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.56565656565656%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUDBv/EABUBAQEAAAAAAAAAAAAAAAAAAAEA/9oADAMBAAIQAxAAAAFpNuhPdAn/xAAbEAEAAgIDAAAAAAAAAAAAAAACAQQAAxETIf/aAAgBAQABBQKEcPMt1tzQmeqt7Vz/xAAVEQEBAAAAAAAAAAAAAAAAAAARAP/aAAgBAwEBPwEJv//EABYRAQEBAAAAAAAAAAAAAAAAAAARAf/aAAgBAgEBPwGJj//EAB4QAAICAAcAAAAAAAAAAAAAAAECABEDEBIhImGR/9oACAEBAAY/AiwxG8mviwYbXCy1R7jRby//xAAaEAEBAQEBAQEAAAAAAAAAAAABEQAxIVGx/9oACAEBAAE/IUMZV78whShWLPHfAidzdjwxJ17+4AIE3//aAAwDAQACAAMAAAAQXB//xAAXEQEBAQEAAAAAAAAAAAAAAAABABFB/9oACAEDAQE/EA5TsIv/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREx/9oACAECAQE/EIKaj//EABsQAAIDAQEBAAAAAAAAAAAAAAERACExQVFx/9oACAEBAAE/EBzhMOsfDHqsxsFA5Yz5HezMEwxqPbsABeQ5CLs7vsGgg8AU/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/a6497d14da4385232fd9f651b9298826/55fac/slides_aesthetics-statement.webp 198w, /static/a6497d14da4385232fd9f651b9298826/5b4d3/slides_aesthetics-statement.webp 395w, /static/a6497d14da4385232fd9f651b9298826/848e4/slides_aesthetics-statement.webp 790w, /static/a6497d14da4385232fd9f651b9298826/8d239/slides_aesthetics-statement.webp 1185w, /static/a6497d14da4385232fd9f651b9298826/8717d/slides_aesthetics-statement.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/a6497d14da4385232fd9f651b9298826/9db10/slides_aesthetics-statement.jpg 198w, /static/a6497d14da4385232fd9f651b9298826/16a07/slides_aesthetics-statement.jpg 395w, /static/a6497d14da4385232fd9f651b9298826/d27a6/slides_aesthetics-statement.jpg 790w, /static/a6497d14da4385232fd9f651b9298826/0b93b/slides_aesthetics-statement.jpg 1185w, /static/a6497d14da4385232fd9f651b9298826/e3932/slides_aesthetics-statement.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/a6497d14da4385232fd9f651b9298826/d27a6/slides_aesthetics-statement.jpg" alt="Examples of statement slides" title="Examples of statement slides from my talks (&lt;a href=&#39;https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;), Jodie (&lt;a href=&#39;https://github.com/t-redactyl/mirror-mirror/blob/main/talk-materials/mirror-mirror-slides.pdf&#39; target=&#39;_blank&#39;&gt;#3&lt;/a&gt;) and Vicki (&lt;a href=&#39;https://docs.google.com/presentation/d/1PL6xG0F5FuPSeudAELCXLgDnPaBGvSmtDod4gaaIRRE/edit#slide=id.p&#39; target=&#39;_blank&#39;&gt;#4&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of statement slides from my talks (<a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#2</a>), Jodie (<a href='https://github.com/t-redactyl/mirror-mirror/blob/main/talk-materials/mirror-mirror-slides.pdf' target='_blank'>#3</a>) and Vicki (<a href='https://docs.google.com/presentation/d/1PL6xG0F5FuPSeudAELCXLgDnPaBGvSmtDod4gaaIRRE/edit#slide=id.p' target='_blank'>#4</a>)</p></figcaption> </figure> <p>Your statement slides can contain as little as a word or single, punchy sentence in a large font, or short bullet points or speech bubbles for compact summaries. This also means they’re more likely to turn out okay in pictures if listeners want to snap a quick photo as a reminder, even if the conference uses a lower-resolution projector or unideal lighting. (Pro tip: If you’re new to speaking, a well-presented statement slide also increases the likelihood of someone sharing photos from your talk on social media!)</p> <hr> <h2>Closing slide</h2> <p>This one is pretty standard and should be the last slide of your presentation. Here, you can thank your audience and include further links and your social profiles. I typically choose a design similar to the title slide, which makes for a nice visual closure.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/1d137502344d23c84c11f946c9151790/e3932/slides_aesthetics-final.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 27.77777777777778%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMB/8QAFgEBAQEAAAAAAAAAAAAAAAAABAID/9oADAMBAAIQAxAAAAGWjpoMif/EABgQAAIDAAAAAAAAAAAAAAAAAAABAhEh/9oACAEBAAEFAkyVow//xAAWEQADAAAAAAAAAAAAAAAAAAADEDH/2gAIAQMBAT8BNF//xAAVEQEBAAAAAAAAAAAAAAAAAAADEP/aAAgBAgEBPwFZ/8QAGBAAAgMAAAAAAAAAAAAAAAAAABEiMaH/2gAIAQEABj8CSI6Uf//EABoQAQEAAgMAAAAAAAAAAAAAAAERACExQWH/2gAIAQEAAT8hEkke81iOPWDBds//2gAMAwEAAgADAAAAEIf/AP/EABoRAAEFAQAAAAAAAAAAAAAAAAABITFRccH/2gAIAQMBAT8Qg3ijUf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAIVH/2gAIAQIBAT8QSIFvb//EABkQAQEBAQEBAAAAAAAAAAAAAAERACExkf/aAAgBAQABPxAhXE4KYKsgPFblhgqXr93/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/1d137502344d23c84c11f946c9151790/55fac/slides_aesthetics-final.webp 198w, /static/1d137502344d23c84c11f946c9151790/5b4d3/slides_aesthetics-final.webp 395w, /static/1d137502344d23c84c11f946c9151790/848e4/slides_aesthetics-final.webp 790w, /static/1d137502344d23c84c11f946c9151790/8d239/slides_aesthetics-final.webp 1185w, /static/1d137502344d23c84c11f946c9151790/8717d/slides_aesthetics-final.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/1d137502344d23c84c11f946c9151790/9db10/slides_aesthetics-final.jpg 198w, /static/1d137502344d23c84c11f946c9151790/16a07/slides_aesthetics-final.jpg 395w, /static/1d137502344d23c84c11f946c9151790/d27a6/slides_aesthetics-final.jpg 790w, /static/1d137502344d23c84c11f946c9151790/0b93b/slides_aesthetics-final.jpg 1185w, /static/1d137502344d23c84c11f946c9151790/e3932/slides_aesthetics-final.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/1d137502344d23c84c11f946c9151790/d27a6/slides_aesthetics-final.jpg" alt="Examples of closing slides" title="Examples of closing slides from my talks (&lt;a href=&#39;https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of closing slides from my talks (<a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data' target='_blank'>#2</a>)</p></figcaption> </figure> <p>For <a href="https://linkedin.com/in/inesmontani">my LinkedIn</a>, I like to include a QR code so people can connect instantly. You can download yours by <a href="https://www.linkedin.com/help/linkedin/answer/a525286/using-a-linkedin-qr-code-to-connect-with-members">clicking the button</a> in the search bar on the mobile app and saving the image. Alternatively, you can also use a QR code pointing to additional resources, like a GitHub repo, although I’d recommend keeping it to one or two codes max so your slide doesn’t feel overwhelming. Also make sure that the code isn’t too small, so it can still be scanned from the back of the room.</p> <p><a href="https://www.qrcode-monkey.com/">This generator</a> makes it easy to create your own QR code and even customize its style to fit your slide design. You can also experiment with <a href="https://huggingface.co/spaces/huggingface-projects/QR-code-AI-art-generator">this generator</a>, which uses a stable diffusion model (thanks to <a href="https://twitter.com/summerscope">Laura</a> for the tip, you can see it in action in her also well-designed talk <a href="https://youtu.be/n88ZmqsTKig?si=Jeg9MmhfTgOjHrzN&#x26;t=1660">here</a>).</p> <p>If your talk is followed by a Q&#x26;A session, conferences will often leave your final slide on, which gives people in the audience time to check out your links, scan QR codes and connect with you on social media.</p> <hr> <p>If you want to go for an aesthetics-based approach, there are very few limits. If you’re worried about your slides becoming too gimmicky, start small and subtle – like with a themed font or illustration style for content you were planning to include anyway (see my <a href="/blog/beginners-guide-beautiful-slides-talks">previous post</a> for tips). Make it a habit to collect inspiration and any visuals you like, even outside of your work and conference talks – often, the best inspiration comes from everyday life and when you least expect it.</p> <p><link-button href="/blog/beautiful-slides-talks-part-3-technical-content/" icon="right">Part 3: Technical content</link-button></p></content:encoded>
</item>
<item>
<title>
<![CDATA[ Three transformative tools: a review of my favourite apps ]]>
</title>
<description>
<![CDATA[ There’s this feeling of joy and excitement you sometimes get when you start using a new tool, discover the little details that make a… ]]>
</description>
<link>https://ines.io/blog/three-transformative-tools</link>
<guid isPermaLink="false">https://ines.io/blog/three-transformative-tools</guid>
<pubDate>Sun, 09 Jun 2024 00:00:00 GMT</pubDate>
<content:encoded><p>There’s this feeling of joy and excitement you sometimes get when you start using a new tool, discover the little details that make a product great and feel the rush of motivation and new ideas that comes with it. It’s what I’ve always aspired to do with <a href="https://explosion.ai/software">our products</a>, too, and it’s what motivated this blog post. I use many tools in my day-to-day life and work, but these three have had the biggest impact recently.</p> <hr> <h2>Arc: Reinventing the browser</h2> <p>It’s a bold move to just go and reinvent something as fundamental as the web browser. But that’s exactly what NYC’s <a href="https://thebrowser.company/">The Browser Company</a> are doing with <a href="https://arc.net/gift/d36640d6">Arc</a>, and the result is pretty stunning and a breath of fresh air in the otherwise quite boring and cookie-cutter browser landscape.</p> <p>I’ve switched browsers a couple of times in my life: Internet Explorer because there weren’t many options, then Firefox when it was new and cool, over to Chrome, which felt much fresher and snappier at the time, then back to <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a> for better speed and privacy. And now I’m using Arc, which is based on <a href="https://www.chromium.org/">Chromium</a> under the hood.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/37ad97c646e9add90b8ab7df95ed75f9/e3932/tools_arc-spaces.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 58.080808080808076%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe3c0YD/xAAYEAEBAAMAAAAAAAAAAAAAAAABABARIf/aAAgBAQABBQIyT0DV/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAERIP/aAAgBAQAGPwJYhEf/xAAYEAEBAQEBAAAAAAAAAAAAAAABABExQf/aAAgBAQABPyHU2MzuwMIDLjAfC//aAAwDAQACAAMAAAAQoB//xAAWEQEBAQAAAAAAAAAAAAAAAAAAAWH/2gAIAQMBAT8QXH//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEBAQEBAQAAAAAAAAAAAAABEQAxQVH/2gAIAQEAAT8QLOodyRRED2YIRH6uUiVPbjBoRMBCDhv/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/37ad97c646e9add90b8ab7df95ed75f9/55fac/tools_arc-spaces.webp 198w, /static/37ad97c646e9add90b8ab7df95ed75f9/5b4d3/tools_arc-spaces.webp 395w, /static/37ad97c646e9add90b8ab7df95ed75f9/848e4/tools_arc-spaces.webp 790w, /static/37ad97c646e9add90b8ab7df95ed75f9/8d239/tools_arc-spaces.webp 1185w, /static/37ad97c646e9add90b8ab7df95ed75f9/8717d/tools_arc-spaces.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/37ad97c646e9add90b8ab7df95ed75f9/9db10/tools_arc-spaces.jpg 198w, /static/37ad97c646e9add90b8ab7df95ed75f9/16a07/tools_arc-spaces.jpg 395w, /static/37ad97c646e9add90b8ab7df95ed75f9/d27a6/tools_arc-spaces.jpg 790w, /static/37ad97c646e9add90b8ab7df95ed75f9/0b93b/tools_arc-spaces.jpg 1185w, /static/37ad97c646e9add90b8ab7df95ed75f9/e3932/tools_arc-spaces.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/37ad97c646e9add90b8ab7df95ed75f9/d27a6/tools_arc-spaces.jpg" alt="My spaces setup in Arc: pinned global tabs for socials and spaces for personal, work, random browsing and talks with pinned space tabs organised in folders" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>The concept of tab containers and separate spaces or profiles isn’t new, but Arc implements it very well, with nice visual customisations to tell your spaces apart, keyboard shortcuts to switch between them and per-space bookmarks pinned to the sidebar.</p> <p>Which leads me to the elephant in the room and the main difference you’ll notice immediately, compared to conventional browser designs: the sidebar. It’s definitely the one feature that took me the longest to get used to, but it makes a lot of sense conceptually as a more natural way to organise tabs and bookmarks. It can be toggled using keyboard shortcuts, giving you a clean, fullscreen experience of the web. Clicking links with <code>shift</code> lets you peek before opening a new tab (nice little detail: the visual indicator of open peeks in the sidebar!), and split mode lets you view multiple tabs side-by-side.</p> <p>”<a href="https://resources.arc.net/hc/en-us/articles/19235387524503-Little-Arc-Quick-Lookups-Instant-Triaging">Little Arc</a>” is a simple browser window for opening links from other applications, which you can optionally move to the main browser. It’s a smart solution to the otherwise almost inevitable “tab hell” where important work pages mix freely with that one meme someone sent you two weeks ago.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/ec4e1a68703b5690119bd6bcf75aaf2a/e3932/tools_arc-easels.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 45.95959595959596%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHaSlEUCP/EABkQAAEFAAAAAAAAAAAAAAAAAAEAEBExQf/aAAgBAQABBQLJKFB//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhAAAwAAAAAAAAAAAAAAAAAAACBB/9oACAEBAAY/Air/AP/EABwQAQACAQUAAAAAAAAAAAAAAAEAETEQIUGBkf/aAAgBAQABPyFs2j7BOB3LUvMydf/aAAwDAQACAAMAAAAQZP8A/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8QJ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQADAAMBAAAAAAAAAAAAAAEAESExQaGR/9oACAEBAAE/EHdQi4UY7SpoN8/IMGqaXfs9k6jzP//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/ec4e1a68703b5690119bd6bcf75aaf2a/55fac/tools_arc-easels.webp 198w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/5b4d3/tools_arc-easels.webp 395w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/848e4/tools_arc-easels.webp 790w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/8d239/tools_arc-easels.webp 1185w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/8717d/tools_arc-easels.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/ec4e1a68703b5690119bd6bcf75aaf2a/9db10/tools_arc-easels.jpg 198w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/16a07/tools_arc-easels.jpg 395w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/d27a6/tools_arc-easels.jpg 790w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/0b93b/tools_arc-easels.jpg 1185w, /static/ec4e1a68703b5690119bd6bcf75aaf2a/e3932/tools_arc-easels.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/ec4e1a68703b5690119bd6bcf75aaf2a/d27a6/tools_arc-easels.jpg" alt="Easels in Arc: visual inspiration for my talks" title="My Easels collecting inspiration for my talks" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>My Easels collecting inspiration for my talks</p></figcaption> </figure> <p>Do we need <em>even more</em> note-taking tools? Arguably not, but when it’s about capturing content from the web, we might as well do it in the browser. ”<a href="https://resources.arc.net/hc/en-us/articles/19231142050071-Easels-Capture-Create">Easels</a>” are essentially whiteboards that you can write and draw on, and use to collect links and images. It’s only tangentially related to web browsing, but Arc just casually gives you one of the smoothest user interfaces for organising content: it <em>just works</em>, aligns and looks good out-of-the-box. This feature is what first got me interested in Arc and I started using it for planning my <a href="/blog/beginners-guide-beautiful-slides-talks/">talks and slides</a> and for collecting moodboard-style visual inspiration and resources.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/dbc0bf17fbecfd068990870880d2bb8a/e3932/tools_arc-custom.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 57.57575757575757%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAECAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB1rU4ZiLP/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEREiH/2gAIAQEAAQUCvRGVRH//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwFn/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BJ//EABYQAQEBAAAAAAAAAAAAAAAAAEEgMf/aAAgBAQAGPwLVr//EABcQAQEBAQAAAAAAAAAAAAAAAAEAETH/2gAIAQEAAT8hVnAcM5PSy1Jc3//aAAwDAQACAAMAAAAQ/M//xAAWEQADAAAAAAAAAAAAAAAAAAAQITH/2gAIAQMBAT8QpD//xAAWEQEBAQAAAAAAAAAAAAAAAAABERD/2gAIAQIBAT8QLI5//8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFhcZH/2gAIAQEAAT8QEF1QXJuHcWi8z6MENqt7TT1MtV9nP7P/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/dbc0bf17fbecfd068990870880d2bb8a/55fac/tools_arc-custom.webp 198w, /static/dbc0bf17fbecfd068990870880d2bb8a/5b4d3/tools_arc-custom.webp 395w, /static/dbc0bf17fbecfd068990870880d2bb8a/848e4/tools_arc-custom.webp 790w, /static/dbc0bf17fbecfd068990870880d2bb8a/8d239/tools_arc-custom.webp 1185w, /static/dbc0bf17fbecfd068990870880d2bb8a/8717d/tools_arc-custom.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/dbc0bf17fbecfd068990870880d2bb8a/9db10/tools_arc-custom.jpg 198w, /static/dbc0bf17fbecfd068990870880d2bb8a/16a07/tools_arc-custom.jpg 395w, /static/dbc0bf17fbecfd068990870880d2bb8a/d27a6/tools_arc-custom.jpg 790w, /static/dbc0bf17fbecfd068990870880d2bb8a/0b93b/tools_arc-custom.jpg 1185w, /static/dbc0bf17fbecfd068990870880d2bb8a/e3932/tools_arc-custom.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/dbc0bf17fbecfd068990870880d2bb8a/d27a6/tools_arc-custom.jpg" alt="UI customization in Arc" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>If you know me, you know I’m a sucker for excessive UI and design customisations (which is also why tools I build tend to have <a href="https://prodi.gy/docs/api-web-app#themes">a lot of it</a>). It just makes me happy to adjust the look and feel of my apps. Does a browser sidebar <em>need</em> multi-colour gradient backgrounds with adjustable levels of grain effect? Probably not, but Arc just has it and it looks great.</p> <p>There are many browser extensions (e.g. <a href="https://en.wikipedia.org/wiki/Greasemonkey">Greasemonkey</a>) for changing the look of websites, either for fun or to fix accessibility issues and improve readability, or to get rid of annoying content, non-blockable ads and other elements that websites added because it’s good for “engagement” or whatever. Arc’s version of this is called ”<a href="https://arc.net/boosts">Boosts</a>” and ships out-of-the-box with an intuitive visual interface. You can adjust colours, contrast, fonts and zoom levels on a per-website basis, “zap” elements to hide them, and even add fully custom CSS and JavaScript. Now that it’s so easy, I definitely want to use it more.</p> <p>In general, there are many features that Arc confidently takes out of the extension space and into the core application. It increases the scope of what a browser can and wants to do, but it makes for a consistent user experience with the same attention to detail across all parts of the app. The opt-in AI features, called ”<a href="https://arc.net/max">Max</a>”, are tasteful and include some nice and practical ideas, including summarisation, in-page question answering and automated tab tidying, plus a shortcut for ChatGPT in your command bar. The <a href="https://resources.arc.net/hc/en-us/articles/19228534606743-Share-Spaces-Folders-Splits-with-Anyone#sharequote">quote sharing</a> feature feels very useful, too: if you highlight text on a website, you can auto-generate a sharable link that points right to the highlight. I also love Arc’s visual identity, and the playfully designed release notes that double up as a kind of newsletter are a joy to read. I don’t think I’ve ever looked forward to updating my browser this much.</p> <p>A development philosophy we’ve set for ourselves <a href="https://speakerdeck.com/inesmontani/let-them-write-code-keynote-pycon-india-2019?slide=33">a couple of years ago</a> is “You can reinvent the wheel, but don’t reinvent the road.” What this means is: it’s okay reimagine something that already exists to make it better, but don’t lock users into your new end-to-end way of doing things. (One could argue that this is what Google is doing by controlling Chrome, search and navigation, and not-so-subtly forcing the web to adopt <a href="https://en.wikipedia.org/wiki/Accelerated_Mobile_Pages#Google_control">AMP</a>.) Arc sticks to reinventing the wheel and it’s refreshing.</p> <!-- _Disclaimer: We're currently working with the Arc team on some cool NLP stuff over at [Explosion](https://explosion.ai), but I had already adopted the browser before that. If you use my [referral link](https://arc.net/gift/d36640d6), I get fancy new [app icons](https://resources.arc.net/hc/en-us/articles/19335111735959-Share-Arc-with-Friends)._ --> <p><link-button href="https://arc.net/gift/d36640d6" icon="globe">Arc</link-button></p> <hr> <h2>Missive: Collaborative email</h2> <p>There are many tools that promise to help you get in control of your email, which can become overwhelming, especially once you add user and customer support to the mix. We did a bunch of research to find the best-suited collaborative email tool for <a href="https://explosion.ai">Explosion</a> and eventually ended up with <a href="https://missiveapp.com">Missive</a>, which integrates with Gmail and provides a web, desktop and mobile app. There’s something about tools built by small independent teams that we naturally seem to gravitate towards: you can just tell that somebody <em>cared</em>, and it’s reflected across the product and its user experience. Missive really was a game changer for me and I honestly couldn’t imagine my day-to-day work without it.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/3d2e007652130b9a9f007aa1e53880b6/fdb5a/tools_missive.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 58.080808080808076%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAezVymgf/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAEQEkH/2gAIAQEAAQUCdhQjT//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABoQAAICAwAAAAAAAAAAAAAAABAhAAERMYH/2gAIAQEABj8CV45Gdj//xAAaEAEBAQEAAwAAAAAAAAAAAAABEQAxEEGB/9oACAEBAAE/ITRMfWKdV9wzuM2ojx//2gAMAwEAAgADAAAAECfP/8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQMBAT8Qh//EABcRAQADAAAAAAAAAAAAAAAAAAEQESH/2gAIAQIBAT8QLcj/xAAdEAABBAIDAAAAAAAAAAAAAAABABEhMRBBYZHR/9oACAEBAAE/ECY4S9naBWtmXKCd4BccAAPEbX//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/3d2e007652130b9a9f007aa1e53880b6/55fac/tools_missive.webp 198w, /static/3d2e007652130b9a9f007aa1e53880b6/5b4d3/tools_missive.webp 395w, /static/3d2e007652130b9a9f007aa1e53880b6/848e4/tools_missive.webp 790w, /static/3d2e007652130b9a9f007aa1e53880b6/8d239/tools_missive.webp 1185w, /static/3d2e007652130b9a9f007aa1e53880b6/888d0/tools_missive.webp 1580w, /static/3d2e007652130b9a9f007aa1e53880b6/548e7/tools_missive.webp 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/3d2e007652130b9a9f007aa1e53880b6/9db10/tools_missive.jpg 198w, /static/3d2e007652130b9a9f007aa1e53880b6/16a07/tools_missive.jpg 395w, /static/3d2e007652130b9a9f007aa1e53880b6/d27a6/tools_missive.jpg 790w, /static/3d2e007652130b9a9f007aa1e53880b6/0b93b/tools_missive.jpg 1185w, /static/3d2e007652130b9a9f007aa1e53880b6/8f04a/tools_missive.jpg 1580w, /static/3d2e007652130b9a9f007aa1e53880b6/fdb5a/tools_missive.jpg 2400w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/3d2e007652130b9a9f007aa1e53880b6/d27a6/tools_missive.jpg" alt="Overview of Missive app" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>At the core of Missive is a collaborative-first design: email threads can be shared with individual people or teams, <a href="https://missiveapp.com/help/assignment">assigned</a> to others and discussed inline. Team members are then able to collaborate on drafts, create todo-style <a href="https://missiveapp.com/help/missive-tips-and-tricks/how-to-use-tasks">tasks</a> within a thread and upload files. The chat history is preserved so you can always see the internal discussion that led up to a reply. This cuts out a huge amount of fragmented communication that would otherwise happen on Slack or elsewhere, and removes the need for email forwarding or disjointed inboxes.</p> <p>Need someone to find you a file to attach to an email? Assign them a task on the email thread and they can upload it right there. Want feedback on a draft reply? Share it with the team. A new purchase order comes in? Assign it to the operations team and move it out of your inbox. Got multiple emails related to the same conversation? Link or merge them into a single thread.</p> <p>Having good automation is probably the single most important trick for staying productive and efficient as a small team and we try to take advantage of it wherever we can. Different types of emails are automatically routed to different <a href="https://missiveapp.com/help/team-inboxes/overview">inboxes</a> and shared with different people, specific <a href="https://missiveapp.com/help/labels/overview">labels</a> can auto-snooze threads for a given period of time and <a href="https://missiveapp.com/help/responses/overview">canned responses</a> with variables make it easy to handle common questions and requests.</p> <p>When looking at tools to adopt, a <a href="https://missiveapp.com/help/api-documentation/overview">developer API</a> is always a big plus because we know that we can add our own automations if needed. For Missive, we built integrations to automatically stream in GitHub issues, discussion posts and <a href="https://support.prodi.gy">Prodigy forum</a> threads and also connected it to Typeform, e.g. for our <a href="https://explosion.ai/tailored-solutions">consulting application</a> form, making Missive the central hub for all communication.</p> <p><link-button href="https://missiveapp.com/?ref_id=E2930605B536" icon="globe">Missive</link-button></p> <hr> <h2>DayOne: More than just a diary</h2> <p>It might be the nerd in me, but I’m low-key obsessed with tracking various things I do. I take a lot of random photos, document how I feel, where I went, what I read, watched or listened to, and my <a href="https://ouraring.com/">Oura ring</a> logs my sleep phases, heart rate and body temperature day and night. Will I ever care about what podcast I listened to or what I had for dinner last Tuesday? Maybe? Maybe not? Aside from leaving an enormous digital footprint and possibly helping me establish an alibi should I ever need one, there’s little purpose to it. But hey, people say that journalling helps with general wellbeing and mindfulness, which is about as far as I’m willing to go in terms of <a href="/blog/i-fell-for-self-help-so-you-dont-have-to/">self-help</a>.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/a19594c4ba8eeaeeb0f198e114f84e0d/d58d1/tools_dayone.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 57.57575757575757%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB20thEGF//8QAGhAAAwEAAwAAAAAAAAAAAAAAAAECEQMSIf/aAAgBAQABBQLPSeSWs06oUSj/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAYEAACAwAAAAAAAAAAAAAAAAAQMQABIf/aAAgBAQAGPwJhnKn/xAAaEAADAQEBAQAAAAAAAAAAAAAAAREhMWHR/9oACAEBAAE/Ia6Zmx/TLVHHhHR5l+KrrP/aAAwDAQACAAMAAAAQXw//xAAVEQEBAAAAAAAAAAAAAAAAAAAREP/aAAgBAwEBPxAJ/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Qp//EAB0QAQACAgIDAAAAAAAAAAAAAAEAESExUWFxobH/2gAIAQEAAT8QSOdHr5LwLUvN8eY7zs0ik3sjoLrUA17Qw2B2PM//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/a19594c4ba8eeaeeb0f198e114f84e0d/55fac/tools_dayone.webp 198w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/5b4d3/tools_dayone.webp 395w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/848e4/tools_dayone.webp 790w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/8d239/tools_dayone.webp 1185w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/f3efb/tools_dayone.webp 1536w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/a19594c4ba8eeaeeb0f198e114f84e0d/9db10/tools_dayone.jpg 198w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/16a07/tools_dayone.jpg 395w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/d27a6/tools_dayone.jpg 790w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/0b93b/tools_dayone.jpg 1185w, /static/a19594c4ba8eeaeeb0f198e114f84e0d/d58d1/tools_dayone.jpg 1536w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/a19594c4ba8eeaeeb0f198e114f84e0d/d27a6/tools_dayone.jpg" alt="Overview of DayOne" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>I’ve cycled through <em>so</em> many todo list and note taking apps in my life and occasionally dabbled in diary writing, but nothing ever stuck until I tried out <a href="https://dayoneapp.com">DayOne</a>. It’s marketed as a journalling and diary app for web, desktop and mobile, but I mainly use it as a daily planner, todo list and multi-media life log. My “daily check-in” <a href="https://dayoneapp.com/guides/tips-and-tutorials/templates/">template</a> includes sections for short-term and long-term tasks, a log for what I listened to, watched or read, bullet-point thoughts and photos (I try to add at least one a day, even if it’s just a <a href="/blog/raspberry-pi-python-cats/">cat</a> picture).</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/1e8870305f3c37d5ee263603b1e8e071/e3932/tools_dayone-map.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 38.888888888888886%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIE/8QAFAEBAAAAAAAAAAAAAAAAAAAAAv/aAAwDAQACEAMQAAABxSMSA//EABgQAAMBAQAAAAAAAAAAAAAAAAABAiES/9oACAEBAAEFAqeR0zT/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwEJ/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRAAAgMBAAAAAAAAAAAAAAAAAAEREiFB/9oACAEBAAY/Ap0bdjp//8QAGRAAAwEBAQAAAAAAAAAAAAAAAAERIVGB/9oACAEBAAE/IXLTwO2hOF2f/9oADAMBAAIAAwAAABCD7//EABYRAAMAAAAAAAAAAAAAAAAAABARIf/aAAgBAwEBPxCCH//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxBcJ//EABsQAQEAAQUAAAAAAAAAAAAAAAERACExQVFh/9oACAEBAAE/ELgajCrclydiavmFYdzy5//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/1e8870305f3c37d5ee263603b1e8e071/55fac/tools_dayone-map.webp 198w, /static/1e8870305f3c37d5ee263603b1e8e071/5b4d3/tools_dayone-map.webp 395w, /static/1e8870305f3c37d5ee263603b1e8e071/848e4/tools_dayone-map.webp 790w, /static/1e8870305f3c37d5ee263603b1e8e071/8d239/tools_dayone-map.webp 1185w, /static/1e8870305f3c37d5ee263603b1e8e071/8717d/tools_dayone-map.webp 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/1e8870305f3c37d5ee263603b1e8e071/9db10/tools_dayone-map.jpg 198w, /static/1e8870305f3c37d5ee263603b1e8e071/16a07/tools_dayone-map.jpg 395w, /static/1e8870305f3c37d5ee263603b1e8e071/d27a6/tools_dayone-map.jpg 790w, /static/1e8870305f3c37d5ee263603b1e8e071/0b93b/tools_dayone-map.jpg 1185w, /static/1e8870305f3c37d5ee263603b1e8e071/e3932/tools_dayone-map.jpg 1500w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/1e8870305f3c37d5ee263603b1e8e071/d27a6/tools_dayone-map.jpg" alt="Map view in DayOne" title="Map view of my journal" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Map view of my journal</p></figcaption> </figure> <p>Although the <a href="https://dayoneapp.com/guides/tips-and-tutorials/tagging-guide/">tagging</a> system is fairly basic, I’ve come up with my own hierarchy for everything from mood to various activities. DayOne also includes location data and I get a nice overview of places I’ve been. A second “meta” journal I’ve created gives me a place to store other lists that accumulated over the years, like the hundreds of concerts I’ve been to since 2004, which I started as a <a href="/blog/how-i-started-coding/">teenager</a> and meticulously updated on my Livejournal profile back in the day.</p> <p>I’m currently on a 750-day streak of daily updates and preparing my check-in has become a nice and consistent morning routine while I’m getting ready for the day and loading up on caffeine. Perhaps future me will thank me for it one day.</p> <p><link-button href="https://dayoneapp.com" icon="globe">DayOne</link-button></p></content:encoded>
</item>
<item>
<title>
<![CDATA[ A beginner’s guide to making beautiful slides for your talks ]]>
</title>
<description>
<![CDATA[ I’ve done quite a bit of conference speaking over the years, and I love designing slides and coming up with a new visual theme for each… ]]>
</description>
<link>https://ines.io/blog/beginners-guide-beautiful-slides-talks</link>
<guid isPermaLink="false">https://ines.io/blog/beginners-guide-beautiful-slides-talks</guid>
<pubDate>Sat, 17 Feb 2024 00:00:00 GMT</pubDate>
<content:encoded><p>I’ve done quite a bit of conference <a href="/#talks">speaking</a> over the years, and I love designing <a href="https://speakerdeck.com/inesmontani">slides</a> and coming up with a new visual theme for each topic. It’s fun and keeps me motivated to put in the work and actually write my talks. People often ask me for tips and tooling recommendations, so in this guide, I’m sharing some of my not-so-secret secrets and <strong>three beginner-friendly steps</strong> for how you can up your slides game for the upcoming conference season!</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/94d2f7c43e4e2ffcb586a8245edc273a/33266/slides_styles.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.37373737373737%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgED/9oADAMBAAIQAxAAAAGtDQZAM//EABoQAAICAwAAAAAAAAAAAAAAAAACAwQREhP/2gAIAQEAAQUCSFVLD4j6an//xAAYEQACAwAAAAAAAAAAAAAAAAAAEQITIf/aAAgBAwEBPwFvCuJ//8QAGBEAAgMAAAAAAAAAAAAAAAAAAAIREkH/2gAIAQIBAT8BjS7H/8QAGhAAAgIDAAAAAAAAAAAAAAAAAAEREgJRcf/aAAgBAQAGPwKyymr0dZCSP//EABkQAQADAQEAAAAAAAAAAAAAAAEAESFhgf/aAAgBAQABPyFMXxTSZlHrG7C4s//aAAwDAQACAAMAAAAQBD//xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAEDAQE/EDBXJd1L/8QAFxEBAQEBAAAAAAAAAAAAAAAAAREAUf/aAAgBAgEBPxAE6LgCDv/EABsQAQADAAMBAAAAAAAAAAAAAAEAESExUZGh/9oACAEBAAE/EGEe5Q6F58hmXAG3Eu0ht0Ps/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/94d2f7c43e4e2ffcb586a8245edc273a/55fac/slides_styles.webp 198w, /static/94d2f7c43e4e2ffcb586a8245edc273a/5b4d3/slides_styles.webp 395w, /static/94d2f7c43e4e2ffcb586a8245edc273a/848e4/slides_styles.webp 790w, /static/94d2f7c43e4e2ffcb586a8245edc273a/8d239/slides_styles.webp 1185w, /static/94d2f7c43e4e2ffcb586a8245edc273a/95f20/slides_styles.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/94d2f7c43e4e2ffcb586a8245edc273a/9db10/slides_styles.jpg 198w, /static/94d2f7c43e4e2ffcb586a8245edc273a/16a07/slides_styles.jpg 395w, /static/94d2f7c43e4e2ffcb586a8245edc273a/d27a6/slides_styles.jpg 790w, /static/94d2f7c43e4e2ffcb586a8245edc273a/0b93b/slides_styles.jpg 1185w, /static/94d2f7c43e4e2ffcb586a8245edc273a/33266/slides_styles.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/94d2f7c43e4e2ffcb586a8245edc273a/d27a6/slides_styles.jpg" alt="Example slide designs" title="Some of my slides designs over the years" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Some of my slides designs over the years</p></figcaption> </figure> <p>🎨 <strong>Part 1: Design tips for beginners</strong> ✨ <strong>Part 2:</strong> <a href="/blog/beautiful-slides-talks-part-2-aesthetics">All about aesthetics</a> 🛠️ <strong>Part 3:</strong> <a href="/blog/beautiful-slides-talks-part-3-technical-content">Technical content</a> 🧩 <strong>Part 4:</strong> <a href="/blog/beautiful-slides-talks-part-4-design-elements">Design elements</a> 💌 <strong>Part 5:</strong> <a href="/blog/beautiful-slides-talks-part-5-sharing-presentations">Sharing your presentations</a></p> <p><em><strong>Disclaimer</strong> (since this post also got widely shared outside of my circles): This blog post is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p> <hr> <h2>1. A good font can make a world of difference</h2> <p>Fonts are truly a secret weapon and it’s my number one recommendation for a quick and easy way to spice up your slides. Even if you do nothing else, a good font can add a lot of personality, and discovering new fonts is a lot of fun. (Just be careful because it can become <em>very</em> addictive – if you enjoy buying domains you don’t need, you’ll love shopping for fonts!).</p> <p>Two recent sets of slides I made are almost entirely carried by their respective font: <a href="https://creativemarket.com/SamParrett/58623442-Mangrove-Font-Duo">Mangrove</a> Sans and Script for <a href="https://speakerdeck.com/honnibal/how-many-labelled-examples-do-you-need-for-a-bert-sized-model-to-beat-gpt-4-on-predictive-tasks">Matt’s talk</a> on beating GPT-4 on predictive tasks, and <a href="https://creativemarket.com/tantype/7261366-TAN-MARJORIE">Marjorie</a> for <a href="https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production-europython-keynote">my keynote</a> on LLMs from prototype to production. I also took inspiration from the examples provided of the fonts in context and used some of them in the overall design to really use the fonts to their full potential.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/c5fbed9250af59badfc85f7098b954d9/33266/slides_fonts.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.06060606060607%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEDBAX/xAAXAQADAQAAAAAAAAAAAAAAAAAAAQID/9oADAMBAAIQAxAAAAHS10KJkBaf/8QAGhABAQEAAwEAAAAAAAAAAAAAAgEAAxMiMv/aAAgBAQABBQK8N3QsRTI1cPRX1//EABcRAQEBAQAAAAAAAAAAAAAAAAEAAyH/2gAIAQMBAT8BexgX/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAIBAxL/2gAIAQIBAT8BauVMn//EABwQAAICAgMAAAAAAAAAAAAAAAABAhEhIjFBUv/aAAgBAQAGPwJ3Jc+iO/RtKzImxn//xAAbEAACAgMBAAAAAAAAAAAAAAAAARFRITFBcf/aAAgBAQABPyHZKZbIbLUi7kikuzKsm/EdoY8yWf/aAAwDAQACAAMAAAAQGx//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREx/9oACAEDAQE/EEiMi0//xAAXEQEAAwAAAAAAAAAAAAAAAAAAAREh/9oACAECAQE/EIXVH//EABwQAQEAAgMBAQAAAAAAAAAAAAERADEhUWFB0f/aAAgBAQABPxDj1EGl5wZBpH4UId33GplbRIdZU7IfywAmhF196Ma5Yg8DP//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/c5fbed9250af59badfc85f7098b954d9/55fac/slides_fonts.webp 198w, /static/c5fbed9250af59badfc85f7098b954d9/5b4d3/slides_fonts.webp 395w, /static/c5fbed9250af59badfc85f7098b954d9/848e4/slides_fonts.webp 790w, /static/c5fbed9250af59badfc85f7098b954d9/8d239/slides_fonts.webp 1185w, /static/c5fbed9250af59badfc85f7098b954d9/95f20/slides_fonts.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/c5fbed9250af59badfc85f7098b954d9/9db10/slides_fonts.jpg 198w, /static/c5fbed9250af59badfc85f7098b954d9/16a07/slides_fonts.jpg 395w, /static/c5fbed9250af59badfc85f7098b954d9/d27a6/slides_fonts.jpg 790w, /static/c5fbed9250af59badfc85f7098b954d9/0b93b/slides_fonts.jpg 1185w, /static/c5fbed9250af59badfc85f7098b954d9/33266/slides_fonts.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/c5fbed9250af59badfc85f7098b954d9/d27a6/slides_fonts.jpg" alt="Slide examples carried by fonts" title="Example of slides almost entirely carried by fonts" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Example of slides almost entirely carried by fonts</p></figcaption> </figure> <p>Of course, you don’t need to pick or buy a new font for every talk – if there’s a font you particularly like, it can become your “signature font” and it will give your slides a unique, but consistent look. For instance, I’ve been using <a href="https://www.grillitype.com/typeface/gt-walsheim">GT Walsheim</a> on this site since pretty much the beginning, and <a href="https://klim.co.nz/retail-fonts/calibre/">Calibre</a> has been the primary font for most of my slides and <a href="https://explosion.ai">Explosion</a>’s websites for years.</p> <h3>Budget option: free fonts</h3> <p>Over the years, <a href="https://fonts.google.com/">Google Fonts</a> has amassed a significant collection of free fonts you can try out in the browser and download for use in your project, and even find suitable font pairings for. If you’re looking for interesting fonts for slide titles, the “Display” category is a good one to start browsing through, and you can also define more fine-grained filtering. The site also provides a handy <a href="https://fonts.google.com/knowledge/glossary">glossary</a> that explains all relevant font terminology.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/33266/slides_google.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 25.252525252525253%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3AUH/8QAFhABAQEAAAAAAAAAAAAAAAAAAAEx/9oACAEBAAEFAlyP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAFxABAQEBAAAAAAAAAAAAAAAAAAFBUf/aAAgBAQABPyGuCrr/2gAMAwEAAgADAAAAEAgP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAQACAwAAAAAAAAAAAAAAAREAIUFRYf/aAAgBAQABPxBRNcZcKjqYwau+vDP/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/55fac/slides_google.webp 198w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/5b4d3/slides_google.webp 395w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/848e4/slides_google.webp 790w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/8d239/slides_google.webp 1185w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/95f20/slides_google.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/9db10/slides_google.jpg 198w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/16a07/slides_google.jpg 395w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/d27a6/slides_google.jpg 790w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/0b93b/slides_google.jpg 1185w, /static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/33266/slides_google.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/4b676e982d7fb8d8d1c4ed2a6d6e2e96/d27a6/slides_google.jpg" alt="Google Fonts" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>For a less curated and more hit-or-miss selection, there’s also <a href="https://www.dafont.com/">Dafont</a>, which offers over 80k and mostly free fonts including many niche types of styles.</p> <h3>Premium fonts</h3> <p>High-quality fonts available on sites like <a href="https://www.fonts.com/">Fonts.com</a> can sometimes get pretty expensive but marketplaces like <a href="https://creativemarket.com/fonts">Creative Market</a> offer many great alternatives by independent creators, often for under $20 per font family. As a nice bonus, many font stores include not only plain examples of the font itself but also designs showing the font in use that you can take inspiration from.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/57c3b7c2295c3568ebe88a48ec9007a4/33266/slides_creativemarket.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 28.787878787878785%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAv/aAAwDAQACEAMQAAABvhGNgFf/xAAZEAACAwEAAAAAAAAAAAAAAAABAwIEERL/2gAIAQEAAQUCV1rQw2BE5//EABURAQEAAAAAAAAAAAAAAAAAAAIQ/9oACAEDAQE/ARP/xAAWEQADAAAAAAAAAAAAAAAAAAACEDH/2gAIAQIBAT8BKr//xAAaEAACAgMAAAAAAAAAAAAAAAAAAgERIXLh/9oACAEBAAY/AssPTTWx0//EABsQAAICAwEAAAAAAAAAAAAAAAABESExQVGx/9oACAEBAAE/IVzTrooFtLqKIifZ/9oADAMBAAIAAwAAABAD3//EABgRAAIDAAAAAAAAAAAAAAAAAAABETFx/9oACAEDAQE/EHvSEf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QH//EABsQAQEAAgMBAAAAAAAAAAAAAAERADEhQWFx/9oACAEBAAE/ECwXyW1PlyuWCTTOgm8skqgr4Z//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/57c3b7c2295c3568ebe88a48ec9007a4/55fac/slides_creativemarket.webp 198w, /static/57c3b7c2295c3568ebe88a48ec9007a4/5b4d3/slides_creativemarket.webp 395w, /static/57c3b7c2295c3568ebe88a48ec9007a4/848e4/slides_creativemarket.webp 790w, /static/57c3b7c2295c3568ebe88a48ec9007a4/8d239/slides_creativemarket.webp 1185w, /static/57c3b7c2295c3568ebe88a48ec9007a4/95f20/slides_creativemarket.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/57c3b7c2295c3568ebe88a48ec9007a4/9db10/slides_creativemarket.jpg 198w, /static/57c3b7c2295c3568ebe88a48ec9007a4/16a07/slides_creativemarket.jpg 395w, /static/57c3b7c2295c3568ebe88a48ec9007a4/d27a6/slides_creativemarket.jpg 790w, /static/57c3b7c2295c3568ebe88a48ec9007a4/0b93b/slides_creativemarket.jpg 1185w, /static/57c3b7c2295c3568ebe88a48ec9007a4/33266/slides_creativemarket.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/57c3b7c2295c3568ebe88a48ec9007a4/d27a6/slides_creativemarket.jpg" alt="Fonts on Creative Market" title="Preview of fonts and design examples on Creative Market (&lt;a href=&#39;https://creativemarket.com/Aiyari/3338445-Lucidity-Extras&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://creativemarket.com/MehmetRehaTugcu/42280946-Rampage-Typeface&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Preview of fonts and design examples on Creative Market (<a href='https://creativemarket.com/Aiyari/3338445-Lucidity-Extras' target='_blank'>#1</a>, <a href='https://creativemarket.com/MehmetRehaTugcu/42280946-Rampage-Typeface' target='_blank'>#2</a>)</p></figcaption> </figure> <p>Remember that fonts are made by people and require significant design effort, so please don’t pirate them. You can always try them out interactively in your browser, and many fonts also offer free trial versions with limited character sets so you can test them in your project before you commit.</p> <h3>Pro tip: Get a font manager</h3> <p>The default font apps that come with standard operating systems aren’t particularly nice so if you’ve already downloaded a lot of fonts, it can be helpful to install a font manager with features for previewing, sorting, filtering, organizing and activating your fonts. I use <a href="https://rightfontapp.com/">RightFont</a> for Mac, which integrates with Google Fonts out of the box, and there’s also <a href="https://fontba.se/">FontBase</a>, which is free and supports Windows and Linux as well.</p> <hr> <h2>2. Focus on the most powerful editing features</h2> <p>You don’t need to become an expert at graphic design to make beautiful slides! I wouldn’t even consider myself a designer because there’s <em>so</em> much I can’t do and I rely a lot on existing design assets – the only advantage I have, really, is that I’ve been hacking around with Photoshop and web design since I was a <a href="/blog/how-i-started-coding/">teenager</a>.</p> <h3>Using effects in Adobe Photoshop</h3> <p><a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> can be intimidating at first because there’s just <em>so much</em> that’s possible and so many tools and features. But once you have a basic grasp of the controls, moving things around, copy-pasting and working with layers (you can find many beginner tutorials online), there are really only two killer features you need to know to take your visuals to the next level: <strong>actions and smart objects</strong>.</p> <p><a href="https://www.adobe.com/products/photoshop/actions.html">Actions</a> are essentially programmed workflows that perform a series of steps on your image. There are many cool effects you can buy and download from sites like <a href="https://creativemarket.com">Creative Market</a> to transform images or text into cool designs in a single click.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/3d04c0b77d71e16fdf92aac3bba91f6e/33266/slides_effects.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 33.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABnXAohP/EABoQAAICAwAAAAAAAAAAAAAAAAEDAAIEERL/2gAIAQEAAQUCoU9qG8Sf/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BJ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAQACAwAAAAAAAAAAAAAAAAEAAgMQgf/aAAgBAQAGPwJbnJjNf//EABoQAAICAwAAAAAAAAAAAAAAAAABESExQXH/2gAIAQEAAT8hlDhqk0yHXTR3J//aAAwDAQACAAMAAAAQ8D//xAAWEQEBAQAAAAAAAAAAAAAAAAABECH/2gAIAQMBAT8Qyk//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAcEAEBAAICAwAAAAAAAAAAAAABEQAhMUFRccH/2gAIAQEAAT8QIrHQsr1Hie8TWzLxoV+GFhp5TP/Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/3d04c0b77d71e16fdf92aac3bba91f6e/55fac/slides_effects.webp 198w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/5b4d3/slides_effects.webp 395w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/848e4/slides_effects.webp 790w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/8d239/slides_effects.webp 1185w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/95f20/slides_effects.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/3d04c0b77d71e16fdf92aac3bba91f6e/9db10/slides_effects.jpg 198w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/16a07/slides_effects.jpg 395w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/d27a6/slides_effects.jpg 790w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/0b93b/slides_effects.jpg 1185w, /static/3d04c0b77d71e16fdf92aac3bba91f6e/33266/slides_effects.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/3d04c0b77d71e16fdf92aac3bba91f6e/d27a6/slides_effects.jpg" alt="Different effects on Creative Market" title="Different Photoshop effects with examples available on Creative Market (&lt;a href=&#39;https://creativemarket.com/cursedesign/6478021-Liquid-Melting-Text-Effects-Vol.1&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://creativemarket.com/bangingjoints/7187170-GhostScan-Photoshop-Plugin&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Different Photoshop effects with examples available on Creative Market (<a href='https://creativemarket.com/cursedesign/6478021-Liquid-Melting-Text-Effects-Vol.1' target='_blank'>#1</a>, <a href='https://creativemarket.com/bangingjoints/7187170-GhostScan-Photoshop-Plugin' target='_blank'>#2</a>)</p></figcaption> </figure> <p><a href="https://www.adobe.com/products/photoshop/smart-objects.html">Smart objects</a> are editable containers for images and text that are then used or transformed as part of a larger design – so basically, a Photoshop file within a Photoshop file. Many pre-made design assets come with smart objects that you can edit by double-clicking on the layer and saving when you’re done. A classic example of this are <a href="https://creativemarket.com/mockups">mockups</a>: you copy your content into the smart object, and it’s transformed into a realistic-looking paper flyer, book or even an embroidered patch or enamel pin.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/06b9a7a5b112c7183c449466c94b9786/33266/slides_mockups.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 39.8989898989899%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGu4AP/xAAZEAACAwEAAAAAAAAAAAAAAAACEQASFCL/2gAIAQEAAQUCDQ+4N1//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPwFn/8QAGhAAAQUBAAAAAAAAAAAAAAAAAAECIjFhwf/aAAgBAQAGPwJ/RCV4f//EABsQAAEEAwAAAAAAAAAAAAAAACEAARFBMYGx/9oACAEBAAE/IXOyzIrpOBEyu3ov/9oADAMBAAIAAwAAABAID//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/ECf/xAAWEQADAAAAAAAAAAAAAAAAAAABECH/2gAIAQIBAT8Qor//xAAcEAEAAgEFAAAAAAAAAAAAAAARASEAMUFxgZH/2gAIAQEAAT8Qroo1QLl4BiCNIQTJT3kAatjxn//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/06b9a7a5b112c7183c449466c94b9786/55fac/slides_mockups.webp 198w, /static/06b9a7a5b112c7183c449466c94b9786/5b4d3/slides_mockups.webp 395w, /static/06b9a7a5b112c7183c449466c94b9786/848e4/slides_mockups.webp 790w, /static/06b9a7a5b112c7183c449466c94b9786/8d239/slides_mockups.webp 1185w, /static/06b9a7a5b112c7183c449466c94b9786/95f20/slides_mockups.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/06b9a7a5b112c7183c449466c94b9786/9db10/slides_mockups.jpg 198w, /static/06b9a7a5b112c7183c449466c94b9786/16a07/slides_mockups.jpg 395w, /static/06b9a7a5b112c7183c449466c94b9786/d27a6/slides_mockups.jpg 790w, /static/06b9a7a5b112c7183c449466c94b9786/0b93b/slides_mockups.jpg 1185w, /static/06b9a7a5b112c7183c449466c94b9786/33266/slides_mockups.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/06b9a7a5b112c7183c449466c94b9786/d27a6/slides_mockups.jpg" alt="Different mockups on Creative Market" title="Mockups for realistic-looking patches and enamel pins using smart objects (&lt;a href=&#39;https://creativemarket.com/MrMockup/4825446-Patch-Mockups-Embroidery-Generator&#39; target=&#39;_blank&#39;&gt;#1&lt;/a&gt;, &lt;a href=&#39;https://creativemarket.com/MrMockup/3759809-Logo-Pin-Enamel-Mockup&#39; target=&#39;_blank&#39;&gt;#2&lt;/a&gt;)" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Mockups for realistic-looking patches and enamel pins using smart objects (<a href='https://creativemarket.com/MrMockup/4825446-Patch-Mockups-Embroidery-Generator' target='_blank'>#1</a>, <a href='https://creativemarket.com/MrMockup/3759809-Logo-Pin-Enamel-Mockup' target='_blank'>#2</a>)</p></figcaption> </figure> <p>If you know how to use actions and make small edits in Photoshop, there’s an abundance of high-quality design assets and effects for all kinds of different styles to choose from online. You’ll also find many design packs or bundles that consist of different elements: seamless patterns for backgrounds, textures, effects, images, pre-designed vector graphics and sometimes even matching fonts. They also typically come with several examples that show what’s possible and are great for inspiration.</p> <h3>Working with colors</h3> <p>If you’re unsure which colors work well together, there are many tools for creating color palettes, like <a href="https://coolors.co/">Coolors</a>, which is one of my favorites. You can generate random combinations, or add your existing colors, lock them in and generate a matching palette. There’s also <a href="https://uigradients.com">uiGradients</a>, which provides a collection of colorful gradients that can work well as backgrounds to give your slides a more designed touch.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/243f6b9f454d2069acf24f7b4a143f47/33266/slides_colors.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 26.262626262626267%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFgEBAQEAAAAAAAAAAAAAAAAAAwEE/9oADAMBAAIQAxAAAAHUCvYNm//EABkQAAIDAQAAAAAAAAAAAAAAAAECAxESIf/aAAgBAQABBQKVm2XNjo//xAAYEQACAwAAAAAAAAAAAAAAAAAAAQMxcf/aAAgBAwEBPwGe1gj/xAAYEQADAQEAAAAAAAAAAAAAAAAAAQMSIf/aAAgBAgEBPwGPYoyj/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAEQETH/2gAIAQEABj8C1lR//8QAGhAAAgIDAAAAAAAAAAAAAAAAAREAITFRgf/aAAgBAQABPyEKguxeGdtuUCW5/9oADAMBAAIAAwAAABBz3//EABgRAQEAAwAAAAAAAAAAAAAAAAEAITHw/9oACAEDAQE/EAHDZLF//8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERUf/aAAgBAgEBPxBVXo6H/8QAGxABAQACAwEAAAAAAAAAAAAAAREAIUFRYdH/2gAIAQEAAT8QkBuhnGXChdtQ9HWRZkbafM//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/243f6b9f454d2069acf24f7b4a143f47/55fac/slides_colors.webp 198w, /static/243f6b9f454d2069acf24f7b4a143f47/5b4d3/slides_colors.webp 395w, /static/243f6b9f454d2069acf24f7b4a143f47/848e4/slides_colors.webp 790w, /static/243f6b9f454d2069acf24f7b4a143f47/8d239/slides_colors.webp 1185w, /static/243f6b9f454d2069acf24f7b4a143f47/95f20/slides_colors.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/243f6b9f454d2069acf24f7b4a143f47/9db10/slides_colors.jpg 198w, /static/243f6b9f454d2069acf24f7b4a143f47/16a07/slides_colors.jpg 395w, /static/243f6b9f454d2069acf24f7b4a143f47/d27a6/slides_colors.jpg 790w, /static/243f6b9f454d2069acf24f7b4a143f47/0b93b/slides_colors.jpg 1185w, /static/243f6b9f454d2069acf24f7b4a143f47/33266/slides_colors.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/243f6b9f454d2069acf24f7b4a143f47/d27a6/slides_colors.jpg" alt="Coolors palette generator and uiGradients" title="The interactive Coolors palette generator and the uiGradients collection" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>The interactive Coolors palette generator and the uiGradients collection</p></figcaption> </figure> <p>If you’re creating graphs and visualizations, make sure your colors are clearly distinguishable and <strong>accessible</strong> for people with visual impairments. <a href="https://venngage.com/blog/accessible-colors/">This guide</a> has many helpful tips and infographics, as well as a <a href="https://venngage.com/tools/accessible-color-palette-generator">generator</a> for accessible color palettes. As a general strategy, try to <strong>not solely rely on color</strong> to get your point across – in addition, you can use style (like solid versus dotted lines), or emoji and icons (<a href="https://thenounproject.com/">The Noun Project</a> has an icon for everything!).</p> <h3>Pro tip: Presenting code with syntax highlighting</h3> <p>When presenting code on your slides, you want it to be clear and easily understood. Did you know that if you’re using <a href="https://code.visualstudio.com/">Visual Studio Code</a>, your syntax highlighting is automatically copied to your clipboard as well? If you paste it into an app like Keynote, the colors will be preserved and you’ll end up with out-of-the-box pretty code. The same might be true for other code editors as well, but I haven’t tried it.</p> <p>Another option is to use images or screenshots, but be careful here: you can easily end up with lower image quality, which is especially problematic for text. For beautiful high-quality code screenshots, I recommend <a href="https://carbon.now.sh/">Carbon</a>, which supports many languages, themes and customizations in a cool terminal-style look.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/86273d07ff7504347077c8b0e60cef9c/33266/slides_code.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 28.28282828282828%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAd5gkFf/xAAZEAADAAMAAAAAAAAAAAAAAAACAwQAERT/2gAIAQEAAQUCmE90OYDul2f/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAaEAACAgMAAAAAAAAAAAAAAAAAAgESMTOh/9oACAEBAAY/Ams3RlhsGyT/xAAaEAACAgMAAAAAAAAAAAAAAAABEQAhEEFh/9oACAEBAAE/IRXJoKxiyATXMB//2gAMAwEAAgADAAAAEP8A3//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAABBB/9oACAECAQE/EKf/xAAcEAACAgIDAAAAAAAAAAAAAAABEQBBIVExcdH/2gAIAQEAAT8QV6mgMncJDCQANHURwHpeT//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/86273d07ff7504347077c8b0e60cef9c/55fac/slides_code.webp 198w, /static/86273d07ff7504347077c8b0e60cef9c/5b4d3/slides_code.webp 395w, /static/86273d07ff7504347077c8b0e60cef9c/848e4/slides_code.webp 790w, /static/86273d07ff7504347077c8b0e60cef9c/8d239/slides_code.webp 1185w, /static/86273d07ff7504347077c8b0e60cef9c/95f20/slides_code.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/86273d07ff7504347077c8b0e60cef9c/9db10/slides_code.jpg 198w, /static/86273d07ff7504347077c8b0e60cef9c/16a07/slides_code.jpg 395w, /static/86273d07ff7504347077c8b0e60cef9c/d27a6/slides_code.jpg 790w, /static/86273d07ff7504347077c8b0e60cef9c/0b93b/slides_code.jpg 1185w, /static/86273d07ff7504347077c8b0e60cef9c/33266/slides_code.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/86273d07ff7504347077c8b0e60cef9c/d27a6/slides_code.jpg" alt="Code examples in slides" title="Examples of code with syntax highlighting presented in different styles" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Examples of code with syntax highlighting presented in different styles</p></figcaption> </figure> <hr> <h2>3. Less is more</h2> <p>Good design doesn’t mean “more stuff” – it’s often the opposite. When you discover the magic of design elements and effects, it can be tempting to go overboard, like many did with the introduction of <a href="https://www.wired.com/2016/11/express-like-1999-wordart-generator/">Word Art</a> and <a href="https://clipart-library.com/">Clip Arts</a> back in the 90s.</p> <h3>Slides should support your talk</h3> <p>Ultimately, what your talk is about is the <em>content</em>. Anything visual that you add is only there to support your points, keep your listeners interested and help them follow along. There’s a fine line between making your slides stand out and making them work against you.</p> <p>You don’t want your audience to get distracted and stop paying attention to your talk because they’re busy processing the slides or reading long texts instead of listening. I personally prefer slides that only include short summaries of the main points and examples or illustrations, and only use them as a visual guide through what I’m saying while a slide is on. This means that the slides might not always be fully understood on their own and out of context, but I’m okay with that. (Of course, how you handle this depends a lot on the type of talk and venue. For academically-oriented talks, it can be common to include a lot more text and content, whereas keynote speakers at industry conferences may sometimes present with slides showing only supporting images.)</p> <h3>You don’t need fancy animations</h3> <p>Tools like Keynote and PowerPoint offer a lot of options for <a href="https://support.apple.com/guide/keynote/animate-objects-on-a-slide-tanf96d92cb6/mac">animating</a> elements on your slides, but the only built-in animation I ever use is “appear”. Fancier animations can be nice as a little gag, but they’re not only distracting, they also come with a big disadvantage: they only work in your program. I typically export my slides with all animation steps as a PDF as a fallback, in case there are technical issues at the conference and I can’t use my laptop, and so I can upload them to <a href="https://speakerdeck.com/inesmontani/">Speaker Deck</a> later. This won’t support animations anyway, so I don’t bother with them in the first place.</p> <h3>Pick a theme and stick to it</h3> <p>For my talks, I usually decide on a single theme or “aesthetic” that I use consistently across all slides as a visual through line, reflected in the headline fonts, colors, background and style of graphics and illustrations. For example, <a href="https://speakerdeck.com/inesmontani/let-them-write-code-keynote-pycon-india-2019">glitchy analog</a> vibes, <a href="https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020">80s</a>, <a href="https://speakerdeck.com/inesmontani/advanced-nlp-for-diverse-languages">70s</a>, <a href="https://speakerdeck.com/inesmontani/applied-nlp-thinking">paper collage</a> or a <a href="https://speakerdeck.com/inesmontani/workshop-half-hour-of-labeling-power-can-we-beat-gpt">Y2K-inspired</a> design. How playful you want to go with it is up to you, your personality and the type of event. If you feel good about your slides and style, it’ll show and will help you feel more comfortable on stage.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/94d2f7c43e4e2ffcb586a8245edc273a/33266/slides_styles.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.37373737373737%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgED/9oADAMBAAIQAxAAAAGtDQZAM//EABoQAAICAwAAAAAAAAAAAAAAAAACAwQREhP/2gAIAQEAAQUCSFVLD4j6an//xAAYEQACAwAAAAAAAAAAAAAAAAAAEQITIf/aAAgBAwEBPwFvCuJ//8QAGBEAAgMAAAAAAAAAAAAAAAAAAAIREkH/2gAIAQIBAT8BjS7H/8QAGhAAAgIDAAAAAAAAAAAAAAAAAAEREgJRcf/aAAgBAQAGPwKyymr0dZCSP//EABkQAQADAQEAAAAAAAAAAAAAAAEAESFhgf/aAAgBAQABPyFMXxTSZlHrG7C4s//aAAwDAQACAAMAAAAQBD//xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAEDAQE/EDBXJd1L/8QAFxEBAQEBAAAAAAAAAAAAAAAAAREAUf/aAAgBAgEBPxAE6LgCDv/EABsQAQADAAMBAAAAAAAAAAAAAAEAESExUZGh/9oACAEBAAE/EGEe5Q6F58hmXAG3Eu0ht0Ps/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/94d2f7c43e4e2ffcb586a8245edc273a/55fac/slides_styles.webp 198w, /static/94d2f7c43e4e2ffcb586a8245edc273a/5b4d3/slides_styles.webp 395w, /static/94d2f7c43e4e2ffcb586a8245edc273a/848e4/slides_styles.webp 790w, /static/94d2f7c43e4e2ffcb586a8245edc273a/8d239/slides_styles.webp 1185w, /static/94d2f7c43e4e2ffcb586a8245edc273a/95f20/slides_styles.webp 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/94d2f7c43e4e2ffcb586a8245edc273a/9db10/slides_styles.jpg 198w, /static/94d2f7c43e4e2ffcb586a8245edc273a/16a07/slides_styles.jpg 395w, /static/94d2f7c43e4e2ffcb586a8245edc273a/d27a6/slides_styles.jpg 790w, /static/94d2f7c43e4e2ffcb586a8245edc273a/0b93b/slides_styles.jpg 1185w, /static/94d2f7c43e4e2ffcb586a8245edc273a/33266/slides_styles.jpg 1440w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/94d2f7c43e4e2ffcb586a8245edc273a/d27a6/slides_styles.jpg" alt="Example slide designs" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>If you’re ever stuck on a slide and not sure how to present a piece of information, take a step back and ask yourself: What styles and elements does my theme and aesthetic have that could fit? Maybe it’s a ripped piece of paper if you’re going for a DIY vibe. Or maybe it’s an asymmetric box, or a browser window illustration with a strong shadow. Maybe your content works best on a minimalistic statement slide with a strong color and no visual distractions. If you’re not sure, go with “less” instead of “more”.</p> <hr> <h2>Resources and tools I use</h2> <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><span>👩‍🎨 <strong>Design</strong></span></td> <td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a>, <a href="https://www.adobe.com/products/illustrator.html">Adobe Illustrator</a>, <a href="https://www.figma.com/">Figma</a>, <a href="https://www.sketch.com/">Sketch</a></td> </tr> <tr> <td><span>✍️ <strong>Fonts</strong></span></td> <td><a href="https://creativemarket.com">Creative Market</a>, <a href="https://fonts.google.com">Google Fonts</a>, <a href="https://dafont.com">Dafont</a>, <a href="https://rightfontapp.com/">RightFont</a>, <a href="https://fontba.se/">FontBase</a></td> </tr> <tr> <td><span>🎨 <strong>Colors</strong></span></td> <td><a href="https://coolors.co/">Coolors</a>, <a href="https://uigradients.com">uiGradients</a></td> </tr> <tr> <td><span>🖼️ <strong>Assets</strong></span></td> <td><a href="https://creativemarket.com">Creative Market</a>, <a href="https://www.freepik.com/">Freepik</a></td> </tr> <tr> <td><span>ℹ️ <strong>Icons</strong></span></td> <td><a href="https://emojipedia.org/apple">Apple Emoji</a>, <a href="https://github.com/twitter/twemoji">Twemoji</a>, <a href="https://thenounproject.com/">The Noun Project</a></td> </tr> <tr> <td><span>💻 <strong>Code</strong></span></td> <td><a href="https://carbon.now.sh/">Carbon</a>, <a href="https://code.visualstudio.com/">Visual Studio Code</a></td> </tr> <tr> <td><span>🔗 <strong>Sharing</strong></span></td> <td><a href="https://speakerdeck.com">Speaker Deck</a></td> </tr> </tbody> </table> <p><link-button href="/blog/beautiful-slides-talks-part-2-aesthetics/" icon="right">Part 2: All about aesthetics</link-button></p></content:encoded>
</item>
<item>
<title>
<![CDATA[ My Guide to Berlin ]]>
</title>
<description>
<![CDATA[ I’ve been living in Berlin since 2010 and making this city my home base and the place to start our company was a very conscious choice… ]]>
</description>
<link>https://ines.io/blog/berlin-guide</link>
<guid isPermaLink="false">https://ines.io/blog/berlin-guide</guid>
<pubDate>Fri, 15 Dec 2023 00:00:00 GMT</pubDate>
<content:encoded><p>I’ve been living in Berlin since 2010 and making this city my home base and the place to start our company was a very conscious choice. Berlin is vibrant, a bit gritty, very walkable and offers a high quality of life relative to the cost of living. It’s also a city full of culture and history, having been at the centre of modern European history for the past 100+ years, from two world wars to the Cold War and the years spent as a city divided between <a href="https://en.wikipedia.org/wiki/East_Germany">East</a> and <a href="https://en.wikipedia.org/wiki/West_Germany">West</a> Germany.</p> <p>This guide collects some of my personal favourite places and recommendations, including restaurants, cafés, bars, shopping, activities, museums and practical tips. Of course, my selection of places is very biased and heavily centered around the district of <a href="https://en.wikipedia.org/wiki/Kreuzberg">Kreuzberg</a>, where I live and work.</p> <p><em>Use the sidebar to navigate by category or expand the map to view it in a new window. Click on a place for my notes and more info.</em></p> <iframe src="https://www.google.com/maps/d/u/0/embed?mid=1TTPMNoR-g2sdY9ZcRQtP27PgN2bwb4o&ehbc=2E312F&noprof=1" width="100%" height="500"></iframe> <h2>Areas and streets</h2> <p>Sometimes you just want to walk through the city, take in the surroundings, do some shopping and maybe stop for a coffee or food along the way. Berlin’s central districts are very walkable and dense, so here’s a non-exhaustive selection of streets to start on. I recommend starting at a more central point and then walking outwards.</p> <iframe src="https://www.google.com/maps/d/u/0/embed?mid=1Er4jnOZJyEsZ4F2vY0aX8yqajPH2hOA&ehbc=2E312F&noprof=1" width="100%" height="300"></iframe> <ul> <li><strong><a href="https://www.google.com/search?q=Oranienstra%C3%9Fe+Berlin++map">Oranienstraße</a></strong> (Kreuzberg): Vibrant and slightly gritty street at the centre of the alternative Kreuzberg district with many shops, restaurants, cafés and bars.</li> <li><strong><a href="https://www.google.com/search?q=Gr%C3%A4festra%C3%9Fe+Berlin++map">Gräfestraße</a></strong> (Kreuzberg): Street with beautiful architecture and many nice restaurants and some shops, connecting the Hasenheide park to the Landwehr Canal. I used to live around there and it’s still one of my favourite areas of Berlin.</li> <li><strong><a href="https://www.google.com/search?q=Boxhagener+Stra%C3%9Fe+Berlin++map">Boxhagener Straße</a></strong> (Friedrichshain): Street leading you through the alternative and free-spirited district of Friedrichshain and past Boxhagener Platz, a small park surrounded by many restaurants, bars and shops. Also check out the various side streets. I often take this route when shopping for clothes and gifts.</li> <li><strong><a href="https://www.google.com/search?q=Neue+Sch%C3%B6nhauser+Stra%C3%9Fe+Berlin++map">Neue</a> / <a href="https://www.google.com/search?q=Alte+Sch%C3%B6nhauser+Stra%C3%9Fe+Berlin++map">Alte</a> Schönhauser Straße</strong> (Mitte): A slightly more traditional shopping area with international stores and brands like Weekday, &#x26; Other Stories and Doc Martens, mixed with some local shops and cafés. But hey, better than a mall!</li> <li><strong><a href="https://www.google.com/search?q=Bergmannstra%C3%9Fe+Berlin++map">Bergmannstraße</a></strong> (Kreuzberg): Popular street taking you through the “other side” of Kreuzberg, less gritty and with nice architecture and many small side streets, restaurants, cafés, a market hall and independent local shops.</li> <li><strong><a href="https://www.google.com/search?q=Weserstra%C3%9Fe+Berlin+Neuk%C3%B6lln++map">Weserstraße</a></strong> (Neukölln): Although Neukölln is considered one of the hippest districts, its appeal is definitely less obvious compared to Kreuzberg or Friedrichshain. This street is a nice intro and has several cool bars and restaurants. I sometimes take tourist friends for a “Späti” (kiosk) tour through the area: grab a drink for the way (see notes on drinking below) and walk along to the next Späti (there are <em>many</em>).</li> <li><strong><a href="https://www.google.com/search?q=Kurf%C3%BCrstendamm+Berlin++map">Kurfürstendamm</a></strong> (Charlottenburg): Also called “Ku’damm”, this historic boulevard is probably the most famous and touristy street. Likely more of a sightseeing experience, because shopping-wise, it’s mostly big brands and chains, tourist shops and luxury fashion (think Dior and Hermès).</li> </ul> <h2>News and events</h2> <ul> <li><strong><a href="https://mitvergnuegen.com/">Mit Vergnügen</a></strong>: German online magazine keeping you up to date on new places, events and what else is on, with nice themed and seasonal roundups.</li> <li><strong><a href="https://the-berliner.com">The Berliner</a></strong>: English-language city magazine for Berlin (formerly called Exberliner), online and as print edition every other month, available in <a href="https://www.the-berliner.com/berlin/where-to-buy-the-berliner-magazine/">stores</a> across the city.</li> <li><strong><a href="https://www.20percent.berlin">20 Percent</a></strong>: News, updates and commentary about everything that’s happening in the city, published twice a week. Also available as a podcast!</li> <li><strong><a href="https://thenextday.substack.com">The Next Day</a></strong>: Weekend guides released every Wednesday, featuring concerts, culture, arts, cinema and other events.</li> <li><strong><a href="https://www.songkick.com/metro-areas/28443-germany-berlin">Songkick</a></strong>: View all concerts in Berlin for a given day. Pro tip: if you create an account, you can sync it with your Spotify and get personalised recommendations for artists you like.</li> <li><strong><a href="https://ra.co/events/de/berlin">Resident Advisor</a></strong>: Club nights and concerts focused on electronic music.</li> </ul> <h2>Useful apps and websites</h2> <ul> <li><strong><a href="https://citymapper.com/?lang=en">CityMapper</a></strong>: All-in-one transport app for pros that helps you map out your route, including public transport, walking, cycling, scooting, driving and car sharing. My favourite feature: when taking public transport, CityMapper tells you which wagon to get on and which exit to take to get to your destination fast and hassle-free.</li> <li><strong><a href="https://www.free-now.com/de/fahrgast/taxi/">FREE NOW</a></strong>: Support your local taxi drivers, order a real taxi and pay via the app! When ordering, make sure to actually select “taxi”, not “ride” (which is their Uber-like service). Note that unlike with Uber, the price you see when booking is only an estimate and not locked in beforehand, although they did recently introduce an Uber-like fixed price feature.</li> <li><strong><a href="https://www.bvg.de/en">BVG</a></strong>: Berlin’s public transport is one of the best in the world and includes subways, trams, buses and even its own taxi service. Download the app so you can get whatever ticket is right for you when you need it. If you’re planning on getting around a lot, day or week tickets are definitely worth it.</li> <li><strong><a href="https://www.li.me/en-de/vehicles/scooter">Lime</a></strong>: If you want to get an e-scooter, Lime has the best and they can be booked via their app or on Uber. E-scooters are actually a great way to get around as an alternative to biking and public transport, and they’ve really grown on me. Keep an eye on the red areas on the map where parking isn’t allowed, and always park your scooter next to the sidewalk and out of the way of pedestrians.</li> <li><strong><a href="https://wolt.com/en/">Wolt</a></strong>: My favourite delivery app, offering food from some of the best restaurants and all kinds of products from a growing selection of local stores, including groceries, drinks, pet food, beauty products, electronics and even over-the-counter medication from pharmacies. (Note that unlike in the US, medication is not sold in regular drug stores, only in pharmacies.)</li> <li><strong><a href="https://www.goflink.com/en-DE/">Flink</a></strong>: Get groceries and essentials from a large selection delivered to your door in under 30 minutes, depending on your location. Keep in mind that just like supermarkets, the service is closed on Sundays (see below).</li> <li><strong><a href="https://www.flaschenpost.de/">Flaschenpost</a></strong>: App and online shop for ordering drinks and some food and household items, delivered to your door (even to the top floor!) within 2 hours. They even take all your empty bottles and crates with deposit and credit the money.</li> <li><strong><a href="https://www.toogoodtogo.com/en-us">Too Good To Go</a></strong>: Help reduce waste and rescue food from a restaurant or shop near you. After selecting a place, you can then collect your surprise bag at the specified pick-up time. Prices are super cheap and you can discover some real gems.</li> <li><strong><a href="https://urbansportsclub.com/en/venues?city_id=1&#x26;plan_type=1&#x26;show-map">Urban Sports Club</a></strong>: A huge variety of different sports all across the city with a single monthly membership. Especially nice for testing and finding places you like.</li> <li><strong><a href="https://www.treatwell.de/">Treatwell</a></strong>: Need a haircut, cosmetics appointment or massage? This site and app makes it easy to find available salons and appointments nearby, including last-minute slots (especially helpful if you’re only visiting and need something <em>right now</em>)!</li> </ul> <h2>Practical tips</h2> <ul> <li><strong>Cash is king</strong>: Although things have changed a bit, especially after COVID, many places are still big on cash. Especially bars, clubs or takeaway places are often cash-only. So make sure to get enough money out.</li> <li><strong>Language</strong>: Berlin is an international city and you should get by okay with English. However, not everyone speaks English or is comfortable with it, so I’d recommend downloading the German dictionary on Google Translate for offline use, just in case.</li> <li><strong>Wi-Fi</strong>: There’s free wi-fi on public transport and in many cafés and restaurants, but it’s not as developed as you might expect from a big city. I recommend getting a cheap pre-paid (e)SIM just for mobile data.</li> <li><strong>Drinking</strong>: It’s legal to drink alcohol on the streets and there’s even a German word for a beer you have on the way to a place: “Wegbier”. Drinking on the subway is not officially allowed, but common and tolerated. When you’re done, don’t throw your bottle in the trash but place it on the ground below the orange bin. There’s deposit (“Pfand”) on bottles and cans, so if you’re not taking your empties back to a store yourself, make it easy for someone else who needs it to collect them.</li> <li><strong>Smoking</strong>: Despite the general German smoking ban, many bars, pubs and clubs still allow or tolerate smoking inside. If that’s not something you’re into, make sure to check before you head to a place. Cannabis is legal from April 1, 2024, with certain restrictions, so if you’re interested in that, make sure to check online for the latest rules, and don’t buy anything from random people trying to sell it to you in the parks.</li> <li><strong>Sundays</strong>: Shops and supermarkets are closed on Sundays. You may find a “Späti” (kiosk) selling essentials, although that’s not officially allowed for places selling supermarket goods. If you’re desperate, there’s an exception for supermarkets at long-distance train stations, for example <a href="https://maps.app.goo.gl/JLap5DfrorvMwX7z8">Ostbahnhof</a> or <a href="https://maps.app.goo.gl/tWstiF6rhLFdgT7a6">Central Station</a>.</li> <li><strong>Rhythm</strong>: Berlin stays open late and likes to sleep in. It’s not uncommon for people to head out to a club way past midnight (or in the morning, really), and most cafés won’t open before 9 or 10am.</li> </ul></content:encoded>
</item>
<item>
<title>
<![CDATA[ Raspberry Pi, Python and cats: my first foray into embedded development ]]>
</title>
<description>
<![CDATA[ I love shitty robots. And I love Python, and cats. I never thought I’d be a cat mom myself, but in March 2022 we started hosting a family… ]]>
</description>
<link>https://ines.io/blog/raspberry-pi-python-cats</link>
<guid isPermaLink="false">https://ines.io/blog/raspberry-pi-python-cats</guid>
<pubDate>Sat, 29 Apr 2023 00:00:00 GMT</pubDate>
<content:encoded><p>I love <a href="https://www.reddit.com/r/shittyrobots/">shitty robots</a>. And I love Python, and cats. I never thought I’d be a cat mom myself, but in March 2022 we started hosting a family from Ukraine who brought with them their adorable cat boy Rizhik and we ended up adopting him. And here we are, with two additional fluffy Siberian kittens, Baikal and Tunguska, that we’ll adopt soon to keep him company.</p> <p>The other day, I was in need of a hobby project – preferably “recreational programming” and different from what I normally do in my <a href="https://explosion.ai">day-to-day work</a>. What if I could make it easier for my remote friends and colleagues to get in on the fun of petting our fluffy boy? Build a remotely controlled robot to do the <a href="https://www.reddit.com/r/brushybrushy/">brushy brushy</a>? I’ve always wanted to get more into embedded development and programming a Raspberry Pi, to get inspired and to see what’s possible these days. So I decided to build a shitty <strong>cat petting robot</strong>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/dc744c1d6be38dfedfdfd24aa6fbc5ad/be0d8/raspberry-pi_cats.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 62.121212121212125%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwACBP/EABUBAQEAAAAAAAAAAAAAAAAAAAID/9oADAMBAAIQAxAAAAHtINTZTzH/xAAbEAABBAMAAAAAAAAAAAAAAAABAAMREgIhMf/aAAgBAQABBQITd0SoKGk5zFsU/8QAFREBAQAAAAAAAAAAAAAAAAAAAhD/2gAIAQMBAT8BRn//xAAXEQADAQAAAAAAAAAAAAAAAAABAhAR/9oACAECAQE/AQ2z/8QAHRAAAQQCAwAAAAAAAAAAAAAAAAECETEQIVFxkf/aAAgBAQAGPwJZLiNlp6I7nDej/8QAGRAAAgMBAAAAAAAAAAAAAAAAAREAITFR/9oACAEBAAE/IXELMg1Gyi24QplCpwRWs7cN3t9hL3H/2gAMAwEAAgADAAAAEM8f/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAwEBPxCOlR//xAAWEQEBAQAAAAAAAAAAAAAAAAARAAH/2gAIAQIBAT8QcRt//8QAHRAAAgMAAgMAAAAAAAAAAAAAAREAITFBUWGBkf/aAAgBAQABPxBnBN1LAL6+Rr1LmBaCFvYMcjLgr2vMaohaUNNQxd6k2VcQmMqryzP/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/dc744c1d6be38dfedfdfd24aa6fbc5ad/55fac/raspberry-pi_cats.webp 198w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/5b4d3/raspberry-pi_cats.webp 395w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/848e4/raspberry-pi_cats.webp 790w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/8d239/raspberry-pi_cats.webp 1185w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/888d0/raspberry-pi_cats.webp 1580w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/91ec5/raspberry-pi_cats.webp 1816w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/dc744c1d6be38dfedfdfd24aa6fbc5ad/9db10/raspberry-pi_cats.jpg 198w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/16a07/raspberry-pi_cats.jpg 395w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/d27a6/raspberry-pi_cats.jpg 790w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/0b93b/raspberry-pi_cats.jpg 1185w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/8f04a/raspberry-pi_cats.jpg 1580w, /static/dc744c1d6be38dfedfdfd24aa6fbc5ad/be0d8/raspberry-pi_cats.jpg 1816w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/dc744c1d6be38dfedfdfd24aa6fbc5ad/d27a6/raspberry-pi_cats.jpg" alt="Photo of Rizhik with my tattoo of him, Tunguska and Baikal" title="Rizhik with my tattoo of him, and little siblings Tunguska and Baikal" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Rizhik with my tattoo of him, and little siblings Tunguska and Baikal</p></figcaption> </figure> <h2>Picking the hardware</h2> <p>This was my first embedded development project so I started off as a complete noob. Enter my brother, Julian. When we were kids, I was more into language, writing and liberal arts-y stuff, so being the younger sibling, he picked a niche for himself that I had nothing to do with: he became an event technician. Over the pandemic, he taught himself programming, too, and has been building cool automations for Raspberry Pi ever since. So he seemed like the perfect person to ask for advice.</p> <p>What I needed for my project felt pretty straightforward: a mechanical arm that’s only able to move horizontally in a straight line, and tilt slightly upwards for the reset. After all, you only pet a cat in the direction of the fur, not backwards. And some way to talk to it over the internet. That must exist, right? Well, it doesn’t really. Julian’s advice: get set up with 3D modelling software, design the arm, get someone to print the parts, assemble it all and trial and error until it works. Or, buy a robot arm kit that does slightly more than I need. I chose the latter and ended up ordering a <a href="https://www.raspberrypi.com/products/raspberry-pi-3-model-b/">Raspberry Pi 3</a> and the <a href="https://www.welectron.com/Waveshare-16376-Robot-Arm-for-Pi-EU">Waveshare 16376 Robot Arm kit</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/6f5ec001d58fba73ec8c83bb4d10efad/3c60f/raspberry-pi_arm.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 29.292929292929294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAb8QSQT/xAAZEAACAwEAAAAAAAAAAAAAAAAAAgEEETL/2gAIAQEAAQUCt61fkl1k/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGxAAAQQDAAAAAAAAAAAAAAAAAAECEUEhMWH/2gAIAQEABj8ClbcZ1ws//8QAGhAAAgIDAAAAAAAAAAAAAAAAAREAITFBYf/aAAgBAQABPyHDFK4INTLQoQoFc//aAAwDAQACAAMAAAAQdC//xAAWEQEBAQAAAAAAAAAAAAAAAAAAATH/2gAIAQMBAT8QuI//xAAWEQEBAQAAAAAAAAAAAAAAAAAAATH/2gAIAQIBAT8Qmq//xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhQXExgf/aAAgBAQABPxC1cqCaBwvbjFtTxd/ZQaGZS3K67P/Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/6f5ec001d58fba73ec8c83bb4d10efad/55fac/raspberry-pi_arm.webp 198w, /static/6f5ec001d58fba73ec8c83bb4d10efad/5b4d3/raspberry-pi_arm.webp 395w, /static/6f5ec001d58fba73ec8c83bb4d10efad/848e4/raspberry-pi_arm.webp 790w, /static/6f5ec001d58fba73ec8c83bb4d10efad/8d239/raspberry-pi_arm.webp 1185w, /static/6f5ec001d58fba73ec8c83bb4d10efad/abbb1/raspberry-pi_arm.webp 1218w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/6f5ec001d58fba73ec8c83bb4d10efad/9db10/raspberry-pi_arm.jpg 198w, /static/6f5ec001d58fba73ec8c83bb4d10efad/16a07/raspberry-pi_arm.jpg 395w, /static/6f5ec001d58fba73ec8c83bb4d10efad/d27a6/raspberry-pi_arm.jpg 790w, /static/6f5ec001d58fba73ec8c83bb4d10efad/0b93b/raspberry-pi_arm.jpg 1185w, /static/6f5ec001d58fba73ec8c83bb4d10efad/3c60f/raspberry-pi_arm.jpg 1218w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/6f5ec001d58fba73ec8c83bb4d10efad/d27a6/raspberry-pi_arm.jpg" alt="Photo of the robot arm and me finding out it needs to be assembled" title="Translation: &quot;Something like this? Woah, so you have to assemble this yourself 😱&quot; – &quot;Haha yeah, what did you expect?&quot;" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Translation: “Something like this? Woah, so you have to assemble this yourself 😱” – “Haha yeah, what did you expect?”</p></figcaption> </figure> <h2>Setting up the Raspberry Pi</h2> <p>Two days later, the hardware arrived. I couldn’t wait, so the first thing I tried was connecting to the Raspberry Pi in headless mode, i.e. without a display, keyboard or anything else. After some trial and error and going through various tutorials, I finally found the solution I should have gone with all along: the <a href="https://www.raspberrypi.com/software/">Raspberry Pi Imager</a> app for Mac. It creates a bootable MicroSD and takes care of setting a custom host name, enabling SSH and even connecting to wifi automatically so you can connect to the Raspberry Pi from your computer.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/713577fa09742475f58fc07dab797434/bf788/raspberry-pi_imager.png" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 35.35353535353536%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAACPElEQVR42iWOX0hTcRzFLwX5kpB/ylTIGKURVESUGIRQmxo5r2BCdo0cU3MOtrUt1svc3d2DGoK5B6dEE30oiFAfFILNSvyzcBIpFE642Wqruz3szrva7u6f3zduHTgc+JzzcLDBgceXBgcpn8tFjlFut9f1xON1DXm8FOn2kiQ55ibJZ2aL9eyA3XjB4bCOmExmymazeRwOh8dut3ssFovHZDJRVqt1WK/Xn8RCqysPkgwDSSYBoijB3PQULL58Afm8AMlf//lSINi+HAwaY7EfEIvH4Wc8DjRNQzQahUQiAQzDwB79FeZnZ29h2/TufQT/xDNcSlh7tyxsrn8QWIkXACCnFOHtT/gmHenO5/OQY/f5LM8LfI4XZFlWNor5NJ+Ft+FQI7ZocOoiw9PwbXJO2hryo4/kOPoyOoM+U5NoZ8An7jjHYd7gxF93O3qSoS34k0pLLMuiDMchURQRIKT8kaKLyzDV1teE+Q+e072v64W1O5S03u5GYY0ZRfQU2qjtQgsFtWKg9Do8L6lrHcWO9nyfWVAOi2mWlbnfGTnH87IoCLLCth6OgBsraML8lfW6QGUDLJVrIKi4ogECxzUQKFPDysUO2Lj9CHwV11qfYqq+yMQryEkicPv7EHuzCqndPchwHGQlAbapCaCwYzcxvLCqgiiqbiGKa5qJ4hotUVSt7SxR8rS2o1DVfPewCm88UlV679AJVf/5+i6DBif61TjRdeoy0XvlBmHU4IRB3UIYz1ztbDtQXvYXAHBqQRZkdckAAAAASUVORK5CYII='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/713577fa09742475f58fc07dab797434/55fac/raspberry-pi_imager.webp 198w, /static/713577fa09742475f58fc07dab797434/5b4d3/raspberry-pi_imager.webp 395w, /static/713577fa09742475f58fc07dab797434/848e4/raspberry-pi_imager.webp 790w, /static/713577fa09742475f58fc07dab797434/8d239/raspberry-pi_imager.webp 1185w, /static/713577fa09742475f58fc07dab797434/888d0/raspberry-pi_imager.webp 1580w, /static/713577fa09742475f58fc07dab797434/68526/raspberry-pi_imager.webp 1584w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/713577fa09742475f58fc07dab797434/c7176/raspberry-pi_imager.png 198w, /static/713577fa09742475f58fc07dab797434/50f4b/raspberry-pi_imager.png 395w, /static/713577fa09742475f58fc07dab797434/88e66/raspberry-pi_imager.png 790w, /static/713577fa09742475f58fc07dab797434/4ee41/raspberry-pi_imager.png 1185w, /static/713577fa09742475f58fc07dab797434/7e99c/raspberry-pi_imager.png 1580w, /static/713577fa09742475f58fc07dab797434/bf788/raspberry-pi_imager.png 1584w" sizes="(max-width: 790px) 100vw, 790px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/713577fa09742475f58fc07dab797434/88e66/raspberry-pi_imager.png" alt="Screenshots of the Raspberry Pi Imager app" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>After rebooting my Raspberry Pi, I was finally able to do the following on my Mac and set up Visual Studio Code for <a href="https://code.visualstudio.com/docs/remote/ssh">remote development via SSH</a>.</p> <div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash"><span class="token function">ssh</span> ines@raspberrypi.local ines@raspberrypi:~ $</code></pre></div> <h2>Assembly</h2> <p>This was the part I was most worried about, so I enlisted the help of our 11-year-old Ukrainian guest Yelysei, fellow cat lover and aspiring programmer (he’s pretty good at <a href="https://scratch.mit.edu/">Scratch</a> already) and his 14-year-old sister Emilia, who’s better than me at a lot of things, including making her own clothes and rolling sushi. Over the next couple of hours we actually managed to put it all together, and the only re-adjustments needed were matching up the positions of the little servos to allow the arm to rotate at the correct angles.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/ad1868f0ea28149a66b05fbe17be7c96/e8460/raspberry-pi_assembly.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.37373737373737%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdCcJBL/AP/EABgQAQADAQAAAAAAAAAAAAAAAAECAxIR/9oACAEBAAEFAjXLdkp3o//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/ASf/xAAWEQADAAAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8BbpD/xAAXEAEBAQEAAAAAAAAAAAAAAAAAIQIR/9oACAEBAAY/Aqw5X//EABoQAQEAAwEBAAAAAAAAAAAAAAERACFhMUH/2gAIAQEAAT8hkNILTmPxZd93gZIh8z//2gAMAwEAAgADAAAAEA/v/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAwEBPxBJhT//xAAWEQADAAAAAAAAAAAAAAAAAAAQETH/2gAIAQIBAT8QoQf/xAAdEAEBAAIBBQAAAAAAAAAAAAABEQAhMUFhkbHB/9oACAEBAAE/EA/KUBqu2LApTOmU+OvzJtUgtJye8//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/ad1868f0ea28149a66b05fbe17be7c96/55fac/raspberry-pi_assembly.webp 198w, /static/ad1868f0ea28149a66b05fbe17be7c96/5b4d3/raspberry-pi_assembly.webp 395w, /static/ad1868f0ea28149a66b05fbe17be7c96/848e4/raspberry-pi_assembly.webp 790w, /static/ad1868f0ea28149a66b05fbe17be7c96/8d239/raspberry-pi_assembly.webp 1185w, /static/ad1868f0ea28149a66b05fbe17be7c96/f3741/raspberry-pi_assembly.webp 1338w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/ad1868f0ea28149a66b05fbe17be7c96/9db10/raspberry-pi_assembly.jpg 198w, /static/ad1868f0ea28149a66b05fbe17be7c96/16a07/raspberry-pi_assembly.jpg 395w, /static/ad1868f0ea28149a66b05fbe17be7c96/d27a6/raspberry-pi_assembly.jpg 790w, /static/ad1868f0ea28149a66b05fbe17be7c96/0b93b/raspberry-pi_assembly.jpg 1185w, /static/ad1868f0ea28149a66b05fbe17be7c96/e8460/raspberry-pi_assembly.jpg 1338w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/ad1868f0ea28149a66b05fbe17be7c96/d27a6/raspberry-pi_assembly.jpg" alt="Photo of the parts and us assembling the robot arm" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <h2>Building the front-end</h2> <p>I love front-end and the cat petting UI was the part of the project that was easiest to imagine: a hand that follows your cursor and tracks the start and end position of the cursor as you drag across the screen. I only wanted to allow horizontal petting in one direction, so all the app needed to track is the <code>clientX</code>. Assuming the browser width corresponds to the full pettable cat surface, the <code>start</code> and <code>end</code> position can be calculated as a percentage relative to the full with. It’s all implemented in vanilla JavaScript and you can view the source <a href="https://github.com/ines/shitty-cat-petting-robot/blob/master/app/app.js">on GitHub</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/7e7174c1a06d7e5641d3e6d563a8728a/219e3/raspberry-pi_app.png" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 70.70707070707071%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEBklEQVR42qXM20+bdRwG8Dde7NYL9cILE52LqIscBryMDhgnObScCqXtKn05teNQaKFjhZZTKaOcKYfRAWXTCYOGuTEEFzXDkEWjU8ANUcDh2KK4TF5mGOe+fX+PGdl/4MUnT75PnnypyYnJVzY31gz/bm+a2PUN4+b2nnF7jzNubO0ad138ga2dfePOHmfc2Xcbt3ZdB3Zd7hf4sn0Xb3q2tVPy3fc/vkZ1NjfQj5buYXVlEUvzP2P2zrdY+mUG9+dn8PuLfHR/Hsu/3T24HyzOYWVp7mCzeO8n/PVgEY//XMbD5QVcdQ6eoMKPvk4XhB3eb8k66R6slHMXtNFcb0EEN1Qu5hy6GM4q8+U+NiRz15pOcxMdBdyX3TpuvC2PG66ScdfqlNyVahnXoU/iBxvyd63FcgEl9H2LbsmNcduLk1CV6keqxJ6kMuEoOZ8fRWzZoWSkOoFMtKWS6/UMGWvMJCM1cjLpMJCx1lzitCjJzfZcMmplMFKrcNXrpQIqWfAObcuLddczwaiQ+BGLMhhN6ki0qMJxoy4Om7OF2PlVi8k+KfoKo+GsluFmRx56i0SwMiEoS/QirTlRaNfEuUzZcQIqzv8IbZIEuCvEXrCkehOD6H3UfSRAkyoUq7dzsD2rgXtBh1v9UnTkijDRUYDRNg0cZxLRVRADS1oQaVRFwlaY6MoSBgio2GNv0tro99xliV4oF3uTCokvaqT+6NML8eQHDXYXdCAP9Zi6nIFbfQzG29MxZFaiMy8KTguDq9YM0pAeBJOEdoV5vCqgMkUBdKUi2G1mwtCpjSfnmBDUKE6gSyvEP9MauFbO4NmMBk+ndZgeS8eAWYHxthzUZ4bjvDYeFw0p5JPKNNh0YpfiQ18BlS46Tjeqo9w1yhBc0CeRi+UK9JTKMWjJxN93tMCKHjt3C4EnZ/FZmxxOM4NvHEX4qluL3lI5WnNjyEhdOj6tVroq81IElND/CH1W7O82SmhcKJGQ660a9BvlcFpP43K1GH9MqbE+V4gv+uUwp0fCJPaBTR2Kr3v0GG1UwaqgSa30GOxFCS5DVoKAkob70PbSU1xdViSxG6S8s17Nd+uTeXtJCt+iSeKfdwO1Sr427SRvyxfymhhPXhvryQ9bVbxdK+LNKV7u5qxQMlCdtl+VlySgRP5vH7ekBaNWEQhHqRSXTDJ0FyXAYTyF24Nm9Jemok4RiB5dLMZa1Pi8RQWHUY5LlQyuWBg0qSLQpY3HjXYdytXxQZT3Gy9758Z4Pi4W0+tVTPiaSRbI6oQfsL0VDDvcrGGzw99lM0I92BJZMFvBRLDDjTns1NA51laUwhol/mxJos9amTTwqd2UtqpTxvpRFPXSIYqiDlMU5fE/Pf9x6D8O9njaqvdO7gAAAABJRU5ErkJggg=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/7e7174c1a06d7e5641d3e6d563a8728a/55fac/raspberry-pi_app.webp 198w, /static/7e7174c1a06d7e5641d3e6d563a8728a/5b4d3/raspberry-pi_app.webp 395w, /static/7e7174c1a06d7e5641d3e6d563a8728a/848e4/raspberry-pi_app.webp 790w, /static/7e7174c1a06d7e5641d3e6d563a8728a/8d239/raspberry-pi_app.webp 1185w, /static/7e7174c1a06d7e5641d3e6d563a8728a/888d0/raspberry-pi_app.webp 1580w, /static/7e7174c1a06d7e5641d3e6d563a8728a/fdd3a/raspberry-pi_app.webp 2458w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/7e7174c1a06d7e5641d3e6d563a8728a/c7176/raspberry-pi_app.png 198w, /static/7e7174c1a06d7e5641d3e6d563a8728a/50f4b/raspberry-pi_app.png 395w, /static/7e7174c1a06d7e5641d3e6d563a8728a/88e66/raspberry-pi_app.png 790w, /static/7e7174c1a06d7e5641d3e6d563a8728a/4ee41/raspberry-pi_app.png 1185w, /static/7e7174c1a06d7e5641d3e6d563a8728a/7e99c/raspberry-pi_app.png 1580w, /static/7e7174c1a06d7e5641d3e6d563a8728a/219e3/raspberry-pi_app.png 2458w" sizes="(max-width: 790px) 100vw, 790px" type="image/png" /> <img class="gatsby-resp-image-image" src="/static/7e7174c1a06d7e5641d3e6d563a8728a/88e66/raspberry-pi_app.png" alt="Screenshot of the app showing a hand cursor" title="The final app: it allows you to click and drag to pet" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>The final app: it allows you to click and drag to pet</p></figcaption> </figure> <h2>Writing the back-end code</h2> <p>The robot arm I chose came with <a href="https://www.waveshare.com/wiki/Robot_Arm_for_Pi">sample Python code</a>, which was very helpful to get started. However, it was also slightly messy and didn’t use type hints or follow the consistent style I normally like to use in my projects. So as a first step, I started to rewrite it. Refactoring, documenting and adding type hints is one of my go-to ways to get across a new code base.</p> <p>Good editor support is crucial here and I can’t recommend it enough. Visual Studio Code and the <a href="https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance">Pylance</a> extension do an excellent job at inferring types from existing functions. Once everything is neatly organised and typed, it’s much easier to understand what’s going on, and how data flows through the robot arm driver. To better manage the interactions I needed, I implemented a custom <code>Controller</code> class with the methods <code>reset</code> (reset arm to start position), <code>set</code> (set arm position) and <code>move</code> (move arm from current position).</p> <p>While the original code sample uses websockets, which adds another layer of complexity, I figured I’d be fine with a simpler REST API powered by <a href="https://fastapi.tiangolo.com/">FastAPI</a>, <a href="https://docs.pydantic.dev/">Pydantic</a> and <a href="https://www.uvicorn.org/">Uvicorn</a>. What I really needed was one endpoint to submit the start and end position to:</p> <div class="gatsby-highlight" data-language="python"><pre class="language-python"><code class="language-python"><span class="token decorator annotation punctuation">@app<span class="token punctuation">.</span>post</span><span class="token punctuation">(</span><span class="token string">"/pet"</span><span class="token punctuation">)</span> <span class="token keyword">def</span> <span class="token function">pet</span><span class="token punctuation">(</span>data<span class="token punctuation">:</span> Instructions<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span> <span class="token boolean">None</span><span class="token punctuation">:</span> ctrl<span class="token punctuation">.</span><span class="token builtin">set</span><span class="token punctuation">(</span><span class="token string">"rotate"</span><span class="token punctuation">,</span> <span class="token builtin">int</span><span class="token punctuation">(</span><span class="token number">45</span> <span class="token operator">+</span> data<span class="token punctuation">.</span>start <span class="token operator">*</span> <span class="token number">90</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment"># rotate to start position</span> ctrl<span class="token punctuation">.</span>move<span class="token punctuation">(</span><span class="token string">"y"</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">40</span><span class="token punctuation">)</span> <span class="token comment"># lower arm</span> ctrl<span class="token punctuation">.</span>move<span class="token punctuation">(</span><span class="token string">"rotate"</span><span class="token punctuation">,</span> <span class="token builtin">int</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>end <span class="token operator">*</span> <span class="token number">90</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment"># rotate to end position</span> ctrl<span class="token punctuation">.</span>move<span class="token punctuation">(</span><span class="token string">"y"</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">)</span> <span class="token comment"># move arm back up</span></code></pre></div> <p>You can view the full server code <a href="https://github.com/ines/shitty-cat-petting-robot/tree/master/server">on GitHub</a>. The app runs entirely on the Raspberry Pi and can be exposed over the public internet using a service like <a href="https://ngrok.com/">ngrok</a> so others can operate it from anywhere.</p> <h2>The result</h2> <p>After attaching the brush, part of an old <a href="https://www.tangleteezer.com/">Tangle Teezer</a>, I was finally able to test the result. A true shitty robot, absolutely not fit for purpose and guaranteed to make your cats run away in horror. But it was mine, and I had built and programmed it myself more or less from scratch! It was ridiculous, but incredibly satisfying.</p> <video controls> <source src="/raspberry-pi_result.webm" type="video/webm"> <source src="/raspberry-pi_result.mp4" type="video/mp4"> </video> <p>In hindsight, it would have been a better choice to build a remote cat toy with a laser pointer attached and I might repurpose my robot for that in the future. For now, I’ll resort to petting my cats manually.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/fa5b4ea7b5c4e685e8788fb098f24c6b/6f725/raspberry-pi_petting.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 58.58585858585859%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAACAf/aAAwDAQACEAMQAAABI2XNbKgf/8QAGhAAAgMBAQAAAAAAAAAAAAAAAQIAAxIRE//aAAgBAQABBQJTuVLuFF7WAK1Y+rT/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAIAQMBAT8BiY//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8BbX//xAAbEAACAgMBAAAAAAAAAAAAAAAAAQIREDFxUf/aAAgBAQAGPwJqNcPKYxNbon3H/8QAGRABAQEBAQEAAAAAAAAAAAAAARExAFGx/9oACAEBAAE/IXhY49hqt3ktdfM4kit8Mb6+cIjdK9//2gAMAwEAAgADAAAAEFjv/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAEDAQE/EBCv/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERMUH/2gAIAQIBAT8Qmxo0/8QAHhABAAMAAgIDAAAAAAAAAAAAAQARITFRQWFxkbH/2gAIAQEAAT8QINJgY18xvhoa6xoPM7YSn6ILkS67TtX1rCNSic4cfjKiVn7Gf//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/fa5b4ea7b5c4e685e8788fb098f24c6b/55fac/raspberry-pi_petting.webp 198w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/5b4d3/raspberry-pi_petting.webp 395w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/848e4/raspberry-pi_petting.webp 790w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/8d239/raspberry-pi_petting.webp 1185w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/888d0/raspberry-pi_petting.webp 1580w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/4c478/raspberry-pi_petting.webp 2381w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/fa5b4ea7b5c4e685e8788fb098f24c6b/9db10/raspberry-pi_petting.jpg 198w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/16a07/raspberry-pi_petting.jpg 395w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/d27a6/raspberry-pi_petting.jpg 790w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/0b93b/raspberry-pi_petting.jpg 1185w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/8f04a/raspberry-pi_petting.jpg 1580w, /static/fa5b4ea7b5c4e685e8788fb098f24c6b/6f725/raspberry-pi_petting.jpg 2381w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/fa5b4ea7b5c4e685e8788fb098f24c6b/d27a6/raspberry-pi_petting.jpg" alt="Photos of Rizhik being petted manually" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p><link-button href="https://github.com/ines/shitty-cat-petting-robot" icon="github">Code on GitHub</link-button></p></content:encoded>
</item>
<item>
<title>
<![CDATA[ Building Prodigy: Our new tool for efficient machine teaching ]]>
</title>
<description>
<![CDATA[ I’m excited and proud to finally share what we’ve been working on since launching Explosion AI, alongside our NLP library spaCy and our… ]]>
</description>
<link>https://ines.io/blog/prodigy-annotation-tool</link>
<guid isPermaLink="false">https://ines.io/blog/prodigy-annotation-tool</guid>
<pubDate>Sat, 05 Aug 2017 00:00:00 GMT</pubDate>
<content:encoded><p>I’m excited and proud to finally share what we’ve been working on since <a href="/blog/announcing-explosion-ai">launching Explosion AI</a>, alongside our <a href="/blog/spacy-commercial-open-source">NLP library spaCy</a> and our consulting projects. Prodigy is a project very dear to my heart and seeing it come to life has been one of the most exciting experiences as a software developer so far.</p> <p>A lot of the consulting projects we’ve worked on in the past year ended up circling back to the problem of <strong>labelling data to train custom models</strong>. Data annotation can be very tedious and time consuming. You need to select the examples, write manuals and hire annotators for the boring work. As a result, many companies dread this process. I’ve always had a hard time accepting that this was simply <em>how things are</em>.</p> <p>When we first started working on the idea of a better, more efficient annotation tool, we were met with some skepticism. “Annotation is boring, that’s just how it is. Why do you care about making it enjoyable?” Conversations like these were what inspired <a href="/blog/how-front-end-can-improve-ai">last year’s post</a> about huge potential of better tooling and UX for AI development.</p> <blockquote> <p>In many cases, the creation of annotated data can seem like the ultimate unskilled labour. This suggests a tempting theory: annotation time should be dirt cheap, right? If so, then investment in annotation tools should be a waste. Just buy more labour. I think if you try this, you’ll see that people don’t behave so simply. The workers you’re hoping to hire so cheaply are homo sapiens, not homo economicus.</p> <p><a href="https://explosion.ai/blog/how-front-end-can-improve-ai">How front-end development can improve Artificial Intelligence</a></p> </blockquote> <p>Prodigy takes this idea one step further, by letting developers and data scientists <strong>train models interactively</strong>, test out ideas and collect annotations themselves. Instead of wasting a human’s time with boring interfaces and repetitive questions, it uses what the model already knows to suggest what to ask next, and reduces the annotation to a simple, binary decision: yes or no. It’s a <strong>downloadable tool</strong> with a powerful command-line interface for <strong>training and evaluating</strong> models, and a flexible <strong>web application</strong> for collecting annotations straight from the browser.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/cc9d8f70f56ab99a6eefbb2666502276/3d1a1/prodigy.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 51.010101010101%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAa+ghLGh/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAECERP/2gAIAQEAAQUCVV31E7hCXQ//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAABBAMBAAAAAAAAAAAAAAABABARMQIhIkH/2gAIAQEABj8CxHQE+q1sy1N//8QAGxABAQACAwEAAAAAAAAAAAAAAREAECExQVH/2gAIAQEAAT8hqihUXeXYC4Dwl9Cav8PfNf/aAAwDAQACAAMAAAAQIM//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEBAAMAAwAAAAAAAAAAAAABEQAhURBBcf/aAAgBAQABPxA9IQaDfQ1gzK6nHIC69FPlcAUpcqN92jvj/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/cc9d8f70f56ab99a6eefbb2666502276/55fac/prodigy.webp 198w, /static/cc9d8f70f56ab99a6eefbb2666502276/5b4d3/prodigy.webp 395w, /static/cc9d8f70f56ab99a6eefbb2666502276/848e4/prodigy.webp 790w, /static/cc9d8f70f56ab99a6eefbb2666502276/8d239/prodigy.webp 1185w, /static/cc9d8f70f56ab99a6eefbb2666502276/888d0/prodigy.webp 1580w, /static/cc9d8f70f56ab99a6eefbb2666502276/527b8/prodigy.webp 2846w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/cc9d8f70f56ab99a6eefbb2666502276/9db10/prodigy.jpg 198w, /static/cc9d8f70f56ab99a6eefbb2666502276/16a07/prodigy.jpg 395w, /static/cc9d8f70f56ab99a6eefbb2666502276/d27a6/prodigy.jpg 790w, /static/cc9d8f70f56ab99a6eefbb2666502276/0b93b/prodigy.jpg 1185w, /static/cc9d8f70f56ab99a6eefbb2666502276/8f04a/prodigy.jpg 1580w, /static/cc9d8f70f56ab99a6eefbb2666502276/3d1a1/prodigy.jpg 2846w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/cc9d8f70f56ab99a6eefbb2666502276/d27a6/prodigy.jpg" alt="Prodigy application" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>While the web application was what originally inspired Prodigy, it quickly grew into a more complex “machine teaching” tool. At the core of it are <strong>recipes</strong>, Python functions that orchestrate data streams, update the model and if necessary, start the web server to collect annotations. In other cases, recipes can simply run a training loop, or evaluate an already trained model using an evaluation set created with Prodigy. There are <a href="https://prodi.gy/docs/recipes">built-in recipes</a> for training models with live annotations, recipes to batch train from already annotated datasets, recipes to test different training configurations and recipes to evaluate trained models.</p> <p>A big challenge when designing user APIs is keeping the right balance between <strong>out-of-the-box functionality</strong>, <strong>simplicity</strong>, and <strong>extensibility</strong>. How much can you assume about a user’s workflow? Where do you offer built-in hooks, and when, how and where do you ask the user to customise? Recipes seemed to be the best way to address this problem: the built-in ones cover most basic use cases, while custom recipes allow executing any Python code and returning a dictionary of components to use.</p> <div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash">prodigy my_recipe my_dataset -F my_recipe.py</code></pre></div> <div class="gatsby-highlight" data-language="python"><pre class="language-python"><code class="language-python"><span class="token decorator annotation punctuation">@prodigy<span class="token punctuation">.</span>recipe</span><span class="token punctuation">(</span><span class="token string">'my_recipe'</span><span class="token punctuation">)</span> <span class="token keyword">def</span> <span class="token function">my_recipe</span><span class="token punctuation">(</span>dataset<span class="token punctuation">)</span><span class="token punctuation">:</span> model <span class="token operator">=</span> load_my_model<span class="token punctuation">(</span><span class="token punctuation">)</span> stream <span class="token operator">=</span> load_my_stream<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token string">'dataset'</span><span class="token punctuation">:</span> dataset<span class="token punctuation">,</span> <span class="token string">'stream'</span><span class="token punctuation">:</span> stream<span class="token punctuation">,</span> <span class="token string">'update'</span><span class="token punctuation">:</span> model<span class="token punctuation">.</span>update<span class="token punctuation">}</span></code></pre></div> <h2>Why Prodigy is cloud-free</h2> <p>Prodigy will be a downloadable tool with a lifetime license, that you can install and run yourself – not a subscription service. This has become an unusual choice for a software startup. SaaS is a very popular business model and supposedly “the way to go”, because it promises repeat revenue and is very attractive to investors. However, not all tools are a good fit for a service model. Making Prodigy work “in the cloud” would mean taking away most of its benefits: running it on your local machine, streaming in your own data without having to upload it to a third-party server and easily configuring it with simple Python scripts.</p> <p>For now, Prodigy’s main focus is making data science workflows easier, and allowing rapid iteration on <em>both</em> the code and the data. Because annotations can be collected quicker and models require less annotations to produce first results, it’s easier to conduct supervised learning experiments and find out whether an idea is working or not. This works best with extensible tools, not services.</p> <p>Without a service layer, there was one problem, though: securely <strong>sharing annotation projects</strong> online, for example, to use Prodigy on your phone, or send the project over to a colleague or an external annotator. Running it on your server with a password-protected front-end is possible, but inconvenient. Ultimately, we decided on an end-to-end encrypted REST service that communicates with the user’s local machine. Annotation tasks are encrypted locally and decrypted only on the client in the web app by the annotator. The only data that will leave the user’s servers and hit ours is encrypted annotation tasks.</p> <h2>Next steps</h2> <p>Prodigy is currently in beta – you can still apply via the <a href="https://prodi.gy">the website</a>. Many of the beta signups we’ve received so far included interesting usage ideas from all kinds of different fields. We’re looking forward to shipping Prodigy to developers so it can be put to work.</p> <p>To read more about Prodigy and see it in action, you can check out our <a href="https://explosion.ai/blog/prodigy-annotation-tool-active-learning">blog post</a>, see the <a href="https://prodi.gy/docs">more detailed docs</a> and play with the <a href="https://prodi.gy/demo">live demo</a>.</p></content:encoded>
</item>
<item>
<title>
<![CDATA[ Reflections on running spaCy: commercial open-source NLP ]]>
</title>
<description>
<![CDATA[ As more and more people and companies are getting involved with open-source software, balancing the expectations of an open community and a… ]]>
</description>
<link>https://ines.io/blog/spacy-commercial-open-source-nlp</link>
<guid isPermaLink="false">https://ines.io/blog/spacy-commercial-open-source-nlp</guid>
<pubDate>Wed, 10 May 2017 00:00:00 GMT</pubDate>
<content:encoded><p>As more and more people and companies are getting involved with open-source software, balancing the expectations of an open community and a traditional provider vs. consumer relationship is becoming increasingly difficult. Are maintainers becoming too authoritarian? Are users becoming too demanding? Are large companies selling out open-source?</p> <p>In this post I’ll share some lessons we’ve learned from running <a href="https://spacy.io">spaCy</a>, the popular and fast-growing library for Natural Language Processing in Python. I’ll also give you my perspective on how to make commercial open-source work for both users and developers.</p> <h2>Unpacking open-source</h2> <p>Looking at the open-source ecosystem as one giant space with a fixed set of rules and best practices can be problematic and frustrating. It’s frustrating for maintainers of private projects, who end up overwhelmed by the flood of bug reports and often demanding support requests. It’s frustrating for companies who open-source their tools and are suddenly expected to get as many contributors involved as possible. And it’s frustrating for users, who keep getting told to “submit a PR or shut up”, and are struggling to decide which project to adopt and trust.</p> <p>Most open-source projects roughly fall into one of three categories:</p> <table> <thead> <tr> <th> </th> <th align="center"><h4>Private</h4><em>“I made a thing and it’s over here.”</em></th> <th align="center"><h4>Community</h4><em>“Let’s make a thing together.”</em></th> <th align="center"><h4>Commercial</h4><em>“We made a product and it’s free.”</em></th> </tr> </thead> <tbody> <tr> <td><strong>Maintainer Control</strong></td> <td align="center">high</td> <td align="center">low</td> <td align="center">high</td> </tr> <tr> <td><strong>Maintainer Responsibility</strong></td> <td align="center">low</td> <td align="center">medium</td> <td align="center">high</td> </tr> <tr> <td><strong>User Responsibility</strong></td> <td align="center">high</td> <td align="center">high</td> <td align="center">low</td> </tr> </tbody> </table> <p>Private projects are usually maintained by one person making most of the decisions, but bearing little responsibility. After all, it’s just a person sharing their code or showcasing their work, hoping it might be useful to others. Community projects tend to make decisions collectively: maintainers take responsibility for the software, but ultimately, users are expected to get involved, instead of only making demands. In return, they get a say in the project direction.</p> <p>Commercial projects on the other hand generally stay more centralised: maintainers often run a business related to their software and retain more control over their project, while investing more resources and expecting less of their users. Even projects by very large companies like Google and Facebook with sizable developer communities roughly follow the same line of thought.</p> <h2>A case for centralised, commercial open-source</h2> <p>In many ways, <a href="https://spacy.io">spaCy</a> is a pretty typical commercial open-source project. It’s developed and maintained by mostly two people – Matt and me. spaCy puts our work in front of many developers, which has allowed us to bootstrap our company <a href="https://explosion.ai">Explosion AI</a> independently through consulting work while keeping our software free.</p> <p>spaCy’s strength is that it’s easy to use, fast and opinionated. There’s only one implementation of each component, and we’re trying to make it the best possible one. At the same time, the core of spaCy is inherently hard to contribute to. It’s fast because it’s written in <a href="http://cython.org/">Cython</a>, a relatively niche language. The API is easy to use because it’s cohesive and was mostly written by a single author.</p> <p>All of this makes spaCy a good fit for production use, and we’re excited to see more and more companies using it to power great products. But growth also comes with responsibility. By making the choice to adopt our open-source software, our users are offering us a large amount of trust upfront. <strong>We’re asking for that trust, so we need to keep up our end of the bargain</strong>. If something is broken, <em>we</em> need to fix it. If we rely on users to report problems, <em>we</em> better make their experience pleasant. If we’re encouraging people to use spaCy in production, <em>we</em> are responsible for making it work. And if we want to keep spaCy cohesive and maintain attention to detail, <em>we</em> need to take the lead.</p> <p>As we’re moving into a phase with more options for contributions, we want to encourage them where they make the biggest difference: language data, interoperation, tests and documentation. After we provided more docs and refactored our website’s markup language, we saw a big increase in small pull requests – from fixing minor typos in the docs (I admire everyone who goes out of their way to do this!) to adding tokenizer exceptions for Bengali or Hebrew.</p> <p>Our community consists of people with very different backgrounds and motivations – developers who’ve been working in computational linguistics since before it was cool, deep learning engineers training models with text input, data scientists and digital humanities researchers, mobile app developers working on their first bot and computer science students looking to get started. (For the record, my background is front-end development, marketing and linguistics.) <strong>AI is not a field of homogenous skills and experiences</strong>, and if we want to build great software, need to adapt the way we think about community-driven development.</p> <h2>Challenges for open-source NLP</h2> <p>One of the biggest challenges for Natural Language Processing is dealing with fast-moving and unpredictable technologies. Most open-source development follows a basic assumption: There’s a bug, and there’s a fix. There’s a feature, and there’s an implementation. The quality of the code may vary and there are always trade-offs. But ultimately, there’s a path, and there’s a goal. This is a lot less true in AI or NLP.</p> <p>Since spaCy was released, the best practices for NLP have changed considerably. This also means that the library has had to change a lot. For instance, dependency labels used to be much more relevant – now, our biggest focus is getting spaCy up to speed with deep learning. However, new features and enhancements are still based on very subjective assumptions about how people are going to do NLP in the future. And it’s not only about code. There’s another component that’s just as important: <strong>statistical models</strong>.</p> <p>In the past, spaCy’s models had to be downloaded via a server maintained by us. Although they played a huge part in spaCy’s performance, they were mostly hidden away from the user. This was problematic – black-boxing technology is pretty much the opposite of what we want to stand for. But how do you “open-source” large binary data?</p> <p>In spaCy v1.7, we finally introduced a <a href="https://spacy.io/docs/usage/saving-loading">new way of loading models</a>, by wrapping them as Python packages that can be installed via pip. All files are also available attached to individual <a href="https://github.com/explosion/spacy-models/releases">GitHub releases</a>, containing more information on the model’s capabilities, license and data. We’ve also included a model packaging tool in spaCy’s CLI so users can package their own models.</p> <p>Aside from the obvious advantages, like native versioning and pip installation, model as packages send a much more <strong>reasonable message</strong>: A model is a component of your application, just like any other dependency. In reality, there’s not one “the model”. There can be many different ones with different capabilities, that will produce very different results depending on what you do with them. You can train your own models from scratch, or update existing ones. And you can package and share your models with the community, just like we do.</p> <h2>Giving projects a voice</h2> <p>Whether you want it or not, your project will have a voice. Yours. This includes everything you say and do – from documentation you write to issues you answer. If a project sends mixed messaging, it causes confusion and conflicts. The website says “Use our software!”, while the maintainers say “PR or GTFO”. The community guidelines say that “there are no stupid questions, just stupid answers”, while the maintainers mock their user’s issues on Twitter. Being rude is not quirky, and it doesn’t save you any time or money either. People will not appreciate your work more if you put them down.</p> <p>This is also important to keep in mind when talking about diversity in open-source and building an inclusive community. It’s not enough to simply adopt community standards and state that “everybody’s welcome”. If this is what you believe in, it also needs to be reflected in the overall messaging of your project. (GitHub’s <a href="https://opensource.guide/building-community/">Open Source Guide</a> has a nice summary on this topic.) There’s also a difference between giving detailed guidance, and enforcing strict rules. People are less likely to invest time and contribute to a project if there’s a high potential of “doing things wrong” — either due to lack of clarity, or arbitrary and overly rigid rules where every deviation will be scrutinised.</p> <p>Another root cause of mixed messaging is a lack of predictability. Users and contributors should know where the project is going – even if ultimately, the maintainers are going to be the ones making the decisions. <a href="https://medium.com/swlh/the-unreliable-startup-69461f629383">Unreliable startups</a> and their amazing journeys have made people wary of being lured in with big promises, only to be let down.</p> <p>One of our goals for spaCy is to focus on communicating our plans and ideas more openly. This is one of the downsides of being such a small team: a lot of decisions happen in one or two heads, which deprives the community of insights into the process. Some of our decisions have been <a href="https://github.com/explosion/spaCy/issues/962">more controversial</a> than others, but no matter how much thought we put into them, it becomes irrelevant if we don’t talk about it publicly. (Docker’s <a href="https://github.com/moby/moby/pull/32691">recent fiasco</a> is an example of how this can go very wrong and cause a lot of frustration.)</p> <h2>Avoiding issue tracker bankruptcy</h2> <p>By running spaCy in a centralised way, we accept that we have to be the main source of support for now. This is hard, and we’ve not always been doing a great job at this. It’s easy to get get stressed out when seeing the issue count go up and falling behind on maintenance. We’ve all seen it before in other projects: issues keep piling up and the maintainers, unable to keep up, eventually declare issue tracker bankruptcy.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; " > <a class="gatsby-resp-image-link" href="/static/e01c7326e8deb5bf061bea74e956066e/8a7c7/open-source_bankruptcy.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 15.656565656565657%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAADABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3AUH/8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABBQJ//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAGBAAAgMAAAAAAAAAAAAAAAAAAAERIUH/2gAIAQEAAT8hek2I/9oADAMBAAIAAwAAABDzz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAQACAwAAAAAAAAAAAAAAAAEAESExUf/aAAgBAQABPxBoUXcVQvkamWf/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/e01c7326e8deb5bf061bea74e956066e/55fac/open-source_bankruptcy.webp 198w, /static/e01c7326e8deb5bf061bea74e956066e/5b4d3/open-source_bankruptcy.webp 395w, /static/e01c7326e8deb5bf061bea74e956066e/bc8a3/open-source_bankruptcy.webp 590w" sizes="(max-width: 590px) 100vw, 590px" type="image/webp" /> <source srcset="/static/e01c7326e8deb5bf061bea74e956066e/9db10/open-source_bankruptcy.jpg 198w, /static/e01c7326e8deb5bf061bea74e956066e/16a07/open-source_bankruptcy.jpg 395w, /static/e01c7326e8deb5bf061bea74e956066e/8a7c7/open-source_bankruptcy.jpg 590w" sizes="(max-width: 590px) 100vw, 590px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/e01c7326e8deb5bf061bea74e956066e/8a7c7/open-source_bankruptcy.jpg" alt="Screenshot of GitHub tab bar with lots of issues and pull requests" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <p>We try to label issues as they come in, even if we don’t have time to reply or get to the bottom of them. Of course, reorganising the reports won’t actually fix any bugs – but it makes it much easier to work through them systematically. It also sends a message to our users: your report has been acknowledged and we’re on it.</p> <p>As we tackle larger improvements to the library, we make a list of related issues and merge them all into one master issue that summarises the problem and planned solution. This lets us communicate our plans and add valuable information, while reducing overhead – and closing a bunch of issues at once! If the master issue is self-contained and easy to fix, we’ll add a <code>help wanted</code> label to offer it for contributions. If somebody else wants to take it on, they’ll already have all the instructions they need, plus a handy list of related issues for reference.</p> <p>Another tool that has made a huge impact is <a href="https://gitter.im/explosion/spaCy">Gitter</a>, a chat client that integrates with GitHub. With the Gitter widget added to our website, users can even chat while browsing the documentation. It’s a great way to connect with our community, find out what people are working on, answer simple questions and discuss topics related to spaCy and NLP. The more we learn about people’s workflows and what they’re trying to achieve, the better we’ll become at anticipating what’s needed to solve future NLP problems. After all, we’re not just fixing bugs here.</p> <p>With almost 400 members, we don’t always get around to answering <em>every</em> question. But it also means other people can step in. It always makes me happy to see community members helping each other – whether it’s fixing a bug in someone else’s code, or exchanging contact details to work on language models together.</p> <h2>Monetising open-source without selling your docs</h2> <p>We often get asked why we don’t accept donations. While it’s flattering to hear that people like the project and want to support it, we’ve decided to keep a stricter separation between our free software and how we’re making money.</p> <p>Services like <a href="https://gratipay.com">Gratipay</a>, <a href="https://www.bountysource.com">BountySource</a> or <a href="https://www.patreon.com">Patreon</a> are great for personal projects and offer a quick and effective way of saying “thank you”. So is selling merchandise. But for a commercial project, monetising your user’s gratitude is a pretty bad business model. Ultimately, it comes down to this: Are you a business, or a charity? If you’re not a charity, it’s not even possible for companies to “just give you money”. Instead, you’re asking private people to fund a project so companies can profit from it for free.</p> <p>For a long time, the predominant idea of monetising an open-source project was offering a commercial version, enterprise offerings, “OSSaaS” or paid support. Even today, some people still seem to believe that those are the only options. <strong>The problem is that the incentives here are entirely misaligned</strong>. If you’re making money off helping people use your software, you need to be strategic about the help you provide for free. No matter how you twist it, you’ll eventually end up in a deadlock: If your software becomes better and more popular, you’ll lose business, as other people become less dependent on you for services and support. If it doesn’t, you’ll keep losing even faster, as your software is the only source of new customers.</p> <p>The good news is: If your users like your software, it’s clearly solving a problem for them. If they build a business on top of it, even more so. This gives you a unique perspective on people’s needs and a lot of valuable relationships. What you go on to offer them commercially doesn’t have to be tightly coupled to your open-source project. In fact, it’s often best if it isn’t.</p> <p>Our users like spaCy because they’re building applications using NLP and want to do this as efficiently as possible. spaCy’s capabilities are all pretty useful in themselves – but they only become really valuable in combination with data. This is what makes open-source NLP and machine learning software different from a lot of other open-source tools. If you’re serious about what you’re doing, you’ll eventually need models that go far beyond general-purpose language models, and you want to train and update them with your own data. Software can help you achieve this – but it won’t do all the work for you.</p> <p>We believe that our users will get the most value out of tools and data assets they can own and keep. We’re still working on our line of products and I hate talking too much about what we’re <em>going to do</em>, it just makes me impatient. But we hope we’ll be able to keep providing value to our users – both in the open-source library and with product offerings.</p></content:encoded>
</item>
<item>
<title>
<![CDATA[ The wired brain: How not to talk about an AI-powered future ]]>
</title>
<description>
<![CDATA[ The way we talk about AI is a mess. It starts with the most obvious, the imagery. Just like stock photos of happy people pointing at… ]]>
</description>
<link>https://ines.io/blog/wired-brain-ai-powered-future</link>
<guid isPermaLink="false">https://ines.io/blog/wired-brain-ai-powered-future</guid>
<pubDate>Thu, 09 Mar 2017 00:00:00 GMT</pubDate>
<content:encoded><p>The way we talk about AI is a mess. It starts with the most obvious, the imagery. Just like stock photos of happy people pointing at whiteboards were a symbol of the modern workplace, wired brains and robots have now come to represent “the AI”. But the visual messaging is only a small part of a much larger problem.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/89fe4e9872b0b8413713d6a3f07ccedd/03ffe/wired-brain_imagery.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 73.23232323232322%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAABA//aAAwDAQACEAMQAAABmt52qzQNF//EABsQAQACAgMAAAAAAAAAAAAAAAIDEwABESEx/9oACAEBAAEFAhJ2nZFWsHlnGSNaX//EABgRAAIDAAAAAAAAAAAAAAAAAAABEiEx/9oACAEDAQE/AVWE2f/EABcRAAMBAAAAAAAAAAAAAAAAAAABIVH/2gAIAQIBAT8Ba0p//8QAGhAAAgMBAQAAAAAAAAAAAAAAAAECETEhQf/aAAgBAQAGPwKLrCceq16eGCp6cP/EABsQAQACAwEBAAAAAAAAAAAAAAEAIRExUUFx/9oACAEBAAE/ITKu9nyOCBt0j5qOhOVAXcEBkwvJ5MIAB2f/2gAMAwEAAgADAAAAENc//8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARQf/aAAgBAwEBPxDAhwb/xAAXEQADAQAAAAAAAAAAAAAAAAABEBFR/9oACAECAQE/EDXS/wD/xAAbEAEBAAMBAQEAAAAAAAAAAAABEQAhMVFh8f/aAAgBAQABPxBLEAMWP6w0ZtYVptMNNZ0iJ7gVMkNbudjm/wBwFg6Z5zIvhILNv3P/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/89fe4e9872b0b8413713d6a3f07ccedd/55fac/wired-brain_imagery.webp 198w, /static/89fe4e9872b0b8413713d6a3f07ccedd/5b4d3/wired-brain_imagery.webp 395w, /static/89fe4e9872b0b8413713d6a3f07ccedd/848e4/wired-brain_imagery.webp 790w, /static/89fe4e9872b0b8413713d6a3f07ccedd/8d239/wired-brain_imagery.webp 1185w, /static/89fe4e9872b0b8413713d6a3f07ccedd/cbd37/wired-brain_imagery.webp 1200w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/89fe4e9872b0b8413713d6a3f07ccedd/9db10/wired-brain_imagery.jpg 198w, /static/89fe4e9872b0b8413713d6a3f07ccedd/16a07/wired-brain_imagery.jpg 395w, /static/89fe4e9872b0b8413713d6a3f07ccedd/d27a6/wired-brain_imagery.jpg 790w, /static/89fe4e9872b0b8413713d6a3f07ccedd/0b93b/wired-brain_imagery.jpg 1185w, /static/89fe4e9872b0b8413713d6a3f07ccedd/03ffe/wired-brain_imagery.jpg 1200w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/89fe4e9872b0b8413713d6a3f07ccedd/d27a6/wired-brain_imagery.jpg" alt="A collage of stock photos and illustrations used to visualise AI, including a wired brain, robots and cyborgs" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <image-caption> <p>Sources: <a href="http://www.wallpaperhd.pk/machine-learning-smart-brain-wallpaper/">WallpaperHD</a>, <a href="http://www.gettyimages.com">GettyImages</a>, <a href="https://codepen.io/chriscoyier/post/code-in-stock-photos">CodePen</a></p> </image-caption> <p>Illustration is symbolic — it relies on familiarity and evokes associations and expectations. The “wired brain” is pretty straightforward in that way: Intelligence is rooted in our brains, and we want to replicate some of the decisions made by our brains using technology. As technology progresses, it’s steadily competing with our brains, becoming the ultimate extension of man. But the above imagery also sends a different message: there’s an end game, and AI development is merely the search for a key to finally unlock Artificial General Intelligence.</p> <p>This narrative is misleading and deceptive, because it presents the technology as a monolithic, all-or-nothing endeavor, benchmarked against a human. It sets high expectations, but reveals very little and perpetuates the stereotype of AI as a magical black box. I think there’s actually a very simple reason for why this has been so popular. It sells well. If you have a piece of magical software, if you can make the wired brain happen, people will pay you a lot of money for it.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/68577bf9f5dd2d33c345db1d984de9c3/63217/wired-brain_ai-powered.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 53.535353535353536%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB30igf//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEAAQUCX//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABYQAAMAAAAAAAAAAAAAAAAAAAAgMf/aAAgBAQABPyEi/wD/2gAMAwEAAgADAAAAELMP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAHBABAAICAwEAAAAAAAAAAAAAAQARMUEhUYGR/9oACAEBAAE/EEsqFbPrBsuay47gcb+wn//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/68577bf9f5dd2d33c345db1d984de9c3/55fac/wired-brain_ai-powered.webp 198w, /static/68577bf9f5dd2d33c345db1d984de9c3/5b4d3/wired-brain_ai-powered.webp 395w, /static/68577bf9f5dd2d33c345db1d984de9c3/848e4/wired-brain_ai-powered.webp 790w, /static/68577bf9f5dd2d33c345db1d984de9c3/d71bc/wired-brain_ai-powered.webp 1024w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/68577bf9f5dd2d33c345db1d984de9c3/9db10/wired-brain_ai-powered.jpg 198w, /static/68577bf9f5dd2d33c345db1d984de9c3/16a07/wired-brain_ai-powered.jpg 395w, /static/68577bf9f5dd2d33c345db1d984de9c3/d27a6/wired-brain_ai-powered.jpg 790w, /static/68577bf9f5dd2d33c345db1d984de9c3/63217/wired-brain_ai-powered.jpg 1024w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/68577bf9f5dd2d33c345db1d984de9c3/d27a6/wired-brain_ai-powered.jpg" alt="A graph showing attention in tech media for the term &#39;Uber for&#39; vs. &#39;AI powered&#39;. It shows a huge spike for &#39;AI powered&#39; since mid-2016, while &#39;Uber for&#39; peaked a little lower in mid-2015." title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <image-caption> <p>Source: <a href="https://index.12k.co/index/%22Uber_for%22,%22Ai_Powered%22">12K INDEX</a></p> </image-caption> <p>The startup playbook says the hard part is figuring out what people want. Actually building it is a minor detail. In other words, the key role is “imagineering”, not engineering. Many great businesses have been built on this assumption. Now we’re simply adding AI to the mix and hoping the same will happen. The truth is, the technology is much less predictable than that, and the way we will actually make use of it in the future will be very different from how we imagine it today.</p> <h2>Imagineering the future</h2> <p>The new opportunities emerging from Machine Learning are very tempting. The wildest scenarios from decades of futuristic science fiction are suddenly (almost) possible. But does that mean they’re actually the most practical things to build? The problem here lies in how those fictional ideas were conceived. The way people imagine technology of the future is heavily biased by their current experiences and expectations.</p> <p>One of my favourite examples of this are <a href="https://www.washingtonpost.com/news/wonk/wp/2015/10/04/what-people-in-1900-thought-the-year-2000-would-look-like/?utm_term=.d35ba42ce172">these images</a> of how people in 1900 imagined life in the year 2000:</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/276ff7b0887bcf6246c3a78f05df884d/a24e6/wired-brain_1900.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 118.68686868686868%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAYABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMCAf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABtntAosFl5FaBX//EABsQAAMBAAMBAAAAAAAAAAAAAAABEQISISJB/9oACAEBAAEFAloRULyrDWbrn19rZ//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPwESZk//xAAWEQADAAAAAAAAAAAAAAAAAAABESD/2gAIAQIBAT8BLj//xAAbEAABBAMAAAAAAAAAAAAAAAAAAREhMQIQcf/aAAgBAQAGPwIy4SoxViuTY+v/xAAcEAEBAQACAwEAAAAAAAAAAAABEQAhMUFRYXH/2gAIAQEAAT8hta37nb99sAHE6bL350npnCKvxwGPw84oot16lTf/2gAMAwEAAgADAAAAEOMIPv/EABcRAQEBAQAAAAAAAAAAAAAAAAABETH/2gAIAQMBAT8QC1jhr//EABgRAQEBAQEAAAAAAAAAAAAAAAEAESEx/9oACAECAQE/EAIBN23bzhf/xAAcEAEBAQEAAgMAAAAAAAAAAAABEQAhQVFhcYH/2gAIAQEAAT8QcBg84mgisJ+MFRw5X1pAwcebcTYHFwsDMIQPWEidNBX1h54L8eZgYgYKReb/2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/276ff7b0887bcf6246c3a78f05df884d/55fac/wired-brain_1900.webp 198w, /static/276ff7b0887bcf6246c3a78f05df884d/5b4d3/wired-brain_1900.webp 395w, /static/276ff7b0887bcf6246c3a78f05df884d/848e4/wired-brain_1900.webp 790w, /static/276ff7b0887bcf6246c3a78f05df884d/cf465/wired-brain_1900.webp 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/276ff7b0887bcf6246c3a78f05df884d/9db10/wired-brain_1900.jpg 198w, /static/276ff7b0887bcf6246c3a78f05df884d/16a07/wired-brain_1900.jpg 395w, /static/276ff7b0887bcf6246c3a78f05df884d/d27a6/wired-brain_1900.jpg 790w, /static/276ff7b0887bcf6246c3a78f05df884d/a24e6/wired-brain_1900.jpg 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/276ff7b0887bcf6246c3a78f05df884d/d27a6/wired-brain_1900.jpg" alt="Illustration of a woman using a machine operating a broom, and a group of flying firefighters with wings rescuing people from a burning house" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <image-caption> <p>Source: <a href="https://www.washingtonpost.com/news/wonk/wp/2015/10/04/what-people-in-1900-thought-the-year-2000-would-look-like">The Washington Post</a></p> </image-caption> <p>Those illustrations all seem very cute and quaint, and at the same time, they’re not actually <em>that</em> far from our reality today. The problems depicted are still relevant – but we didn’t just automate the processes of 1900, we also reengineered the ways we were solving those problems, and our society adjusted accordingly.</p> <p>We didn’t build a machine to operate a broom – we built vacuum cleaners. We didn’t engineer wings for firefighters – we built fire extinguisher drones. We also didn’t create robot personal shoppers – we built online stores.</p> <p>A 1900-style broom-operating machine would have been about as useful as your average chat bot today. Kind of okay at its task once you’ve figured out how to operate it correctly and make sure it doesn’t keep crashing into walls. Completely hopeless in some cases, that also happen to be ones you’d mostly appreciate help with, like corners and door steps. After the novelty has worn off, I’m sure the diligent housewife of 1900 would have gone back to doing it properly and by hand. It took a lot of iterations, a change of methodology and a shift in people’s expectations of house cleaning to finally arrive at a practical alternative: the robot vacuum cleaner (and even that still isn’t <a href="https://www.theguardian.com/technology/2016/aug/15/roomba-robot-vacuum-poopocalypse-facebook-post">quite perfect</a>).</p> <h2>Artificial assistance</h2> <p>So far, we have been very successful at advancing and replacing manual labour with technology. In recent years, we have moved on to doing the same for intellectual labour. Humans have always been employing other humans to make their lives easier and more convenient. Up until the 1950s, people would hire <a href="https://en.wikipedia.org/wiki/Knocker-up">“knocker-uppers”</a> who’d knock on their doors and windows to wake them up in the morning. As alarm clocks became more affordable and reliable, this job became extinct (and it wasn’t replaced by a window-knocking machine).</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/4798c5e9d8dac5e0c17c258b7c3ada02/a24e6/wired-brain_knockerupper.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 39.8989898989899%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAED/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABZBQf/8QAGRAAAgMBAAAAAAAAAAAAAAAAAhIAAxEx/9oACAEBAAEFAuQ9I62X/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRAAAwADAAAAAAAAAAAAAAAAAAERAiGh/9oACAEBAAY/ArBM1j0//8QAGBABAQEBAQAAAAAAAAAAAAAAAREAIUH/2gAIAQEAAT8hWuiQ8yiWQuSN5n//2gAMAwEAAgADAAAAEPAP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGRAAAwEBAQAAAAAAAAAAAAAAAREhADGB/9oACAEBAAE/EKwgkniJYUjDEEQpT5o+U5G//9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/4798c5e9d8dac5e0c17c258b7c3ada02/55fac/wired-brain_knockerupper.webp 198w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/5b4d3/wired-brain_knockerupper.webp 395w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/848e4/wired-brain_knockerupper.webp 790w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/cf465/wired-brain_knockerupper.webp 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/4798c5e9d8dac5e0c17c258b7c3ada02/9db10/wired-brain_knockerupper.jpg 198w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/16a07/wired-brain_knockerupper.jpg 395w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/d27a6/wired-brain_knockerupper.jpg 790w, /static/4798c5e9d8dac5e0c17c258b7c3ada02/a24e6/wired-brain_knockerupper.jpg 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/4798c5e9d8dac5e0c17c258b7c3ada02/d27a6/wired-brain_knockerupper.jpg" alt="Old photographs of knocker-uppers in front of buildings, using a long stick to knock on the windows" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <image-caption> <p>Source: <a href="http://mashable.com/2016/09/04/knockers-up/">Mashable</a></p> </image-caption> <p>Other jobs, like that of a personal business assistant, are a lot more complex. While we might feel like we’re “thinking outside the box” because we’re much more aware of all the technological possibilities than people were a century ago, we still accept today’s problems as given and are trying to fix them in ways that we know and are used to. We’re used to telling another human what to do and taking advantage of their humanness – their ability to reason about our instructions, retrieve all required information and perform the steps necessary to complete a task.</p> <p>This has led to many attempts at making software more “human”. The assumption here is that the more human-machine interaction resembles human-human interaction, the more successful it will be. Thus, the technology needs a personality. AI is not only the technology used to build a product – <strong>it becomes the product</strong>.</p> <p>But is human-human interaction really the holy grail? The reason we chose working with and talking to human assistants is because it was most efficient – just like people knocking on your window was most efficient to make sure you woke up in time. The real goal here is to enable a computer to perform the same complex tasks as a human, not replace <a href="https://explosion.ai/blog/natural-user-interface">one user interface with another</a>. The problem with a lot of conversational applications is that they’re not actually trying to solve the underlying problem — they’re simply reengineering a makeshift solution born out of necessity. It’s not enough to apply a new technology to an existing process. It needs to be used as a tool, a building block in an entirely new system.</p> <h2>AI has a PR problem</h2> <p>The media is full of reports about all the great things technology is now able to do, powered by the magic of AI. New “breakthroughs” are announced almost daily. AI can turn your selfie into a van Gogh painting, dominate Poker tournaments and even drive cars. This, together with the imagery of AI as a humanoid entity, leads people to believe that we must have clearly mastered the “easy parts” and are now on to tackling the “hard parts”. What an exciting time to be alive.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/68fc7b3e09e81591505bb992cd800f9a/63217/wired-brain_news.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 36.868686868686865%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHdoJAY/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAECEjH/2gAIAQEAAQUCJaqn/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BV//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAQEBAAAAAAAAAAAAAAAAAAARMf/aAAgBAQAGPwJlZH//xAAZEAADAQEBAAAAAAAAAAAAAAAAAREhMaH/2gAIAQEAAT8hy4cq6jR4H//aAAwDAQACAAMAAAAQA9//xAAXEQADAQAAAAAAAAAAAAAAAAAAASER/9oACAEDAQE/EHSJh//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAcbL//xAAaEAEBAAIDAAAAAAAAAAAAAAABEQAhUYHR/9oACAEBAAE/ECqqvLgHSDQJDpcKiXdx5n//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/68fc7b3e09e81591505bb992cd800f9a/55fac/wired-brain_news.webp 198w, /static/68fc7b3e09e81591505bb992cd800f9a/5b4d3/wired-brain_news.webp 395w, /static/68fc7b3e09e81591505bb992cd800f9a/848e4/wired-brain_news.webp 790w, /static/68fc7b3e09e81591505bb992cd800f9a/d71bc/wired-brain_news.webp 1024w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/68fc7b3e09e81591505bb992cd800f9a/9db10/wired-brain_news.jpg 198w, /static/68fc7b3e09e81591505bb992cd800f9a/16a07/wired-brain_news.jpg 395w, /static/68fc7b3e09e81591505bb992cd800f9a/d27a6/wired-brain_news.jpg 790w, /static/68fc7b3e09e81591505bb992cd800f9a/63217/wired-brain_news.jpg 1024w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/68fc7b3e09e81591505bb992cd800f9a/d27a6/wired-brain_news.jpg" alt="Left: A graph showing attention in tech media for AI and ML spiking in mid-2016, and NLP, growing slightly. Right: Screenshot of voice-operated Google Assistant chat bot. Transcribed user input: &#39;send me whether daily at 7:15a.m.&#39; Bot: &#39;Let&#39;s see&#39;, preview of dictionary entry for the word &#39;whether&#39; and &#39;Would you like to receive this every day?&#39;. User: &#39;No&#39;" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <image-caption> <p>Sources: <a href="https://index.12k.co/index/%22Artificial_Intelligence%22_OR*%22AI%22,%22Natural_Language_Processing%22,%22Machine_Learning%22">12K INDEX</a>, <a href="https://twitter.com/Summerson/status/784214198754566144">@Summerson</a></p> </image-caption> <p>This misleading messaging is, at least partly, to blame for the unrealistic expectations people have of consumer products, and the resulting disproportionate amounts of money thrown at business ideas that are flat-out unfeasible and incorrectly ambitious. Those ideas are usually based on the assumption that the lowest-value labour will be the easiest to automate. This worked for manufacturing, but when it comes to intelligence, this is exactly the wrong strategy.</p> <p>Things that are hard for a human are often very easy for a computer, and vice versa. For example, most people can understand figures of speech without thinking twice, and are able to make fairly subtle judgements. On the other hand, we’re very limited in terms of what our physique is capable of: we’re easily exhausted, our memory is bad and when interacting with our environment, we are forced to rely on what we can hear and see. Just because something is very hard for us doesn’t automatically mean human-level performance will be difficult to replicate — quite the opposite.</p> <p>Self-driving cars are possible because they use <a href="https://www.nytimes.com/interactive/2016/12/14/technology/how-self-driving-cars-work.html">laser beams and radar sensors</a> to generate a 360-degree map of the surroundings, and analyse this data instantly and with mathematic precision. They’re able to do something that humans <em>can’t</em> and achieve the goal of driving very differently. That makes them much better at it than say, a robot driver. The fact that self-driving cars are now possible does <em>not</em> mean that machines are becoming more “intelligent” or more “like us”. Intelligence and human capabilities are actually a very bad baseline for technology.</p> <p>Whether or not something is intelligent is a fake question, because it doesn’t say anything about the capabilities themselves. Instead of trying to engineer human-like qualities and doing a bad job at it, we should use the technology for what it’s already really good at. Instead of talking about “Artificial Intelligence”, we should think of it as a Machine Learning loop of feedback and control. In <a href="https://www.technologyreview.com/s/603761/ais-pr-problem/">“AI’s PR Problem”</a>, Jerry Kaplan writes:</p> <blockquote> <p>We should stop describing these modern marvels as proto-humans and instead talk about them as a new generation of flexible and powerful machines. We should be careful about how we deploy and use AI, but not because we are summoning some mythical demon that may turn against us. Rather, we should resist our predisposition to attribute human traits to our creations and accept these remarkable inventions for what they really are—potent tools that promise a more prosperous and comfortable future.</p> <p><a href="https://www.technologyreview.com/s/603761/ais-pr-problem/">Jerry Kaplan: AI’s PR Problem (MIT Technology Review)</a></p> </blockquote> <p>Even if you do believe that we’re close to self-improving AI and that we need to discuss safety issues and the imminent dangers ahead, you should care about making this point. Sometime in the future, you’re going to want to tell people, “It’s different now!“. You should be careful to distinguish the current technologies from the dangerous thing you’re expecting.</p> <p>The way we communicate is powerful, because it shapes our perception of the world. But this also means we can use it to paint a realistic picture and correct false impressions. Messaging that promotes the technology as “the AI” is harmful and we need to fix it. And please, finally, stop using that same old fucking wired brain illustration.</p></content:encoded>
</item>
<item>
<title>
<![CDATA[ Story time: How I started coding ]]>
</title>
<description>
<![CDATA[ Update (October 2020): I recently shared a longer and more in-depth version of my story with Tim of the DevJourney podcast, which you can… ]]>
</description>
<link>https://ines.io/blog/how-i-started-coding</link>
<guid isPermaLink="false">https://ines.io/blog/how-i-started-coding</guid>
<pubDate>Thu, 09 Feb 2017 00:00:00 GMT</pubDate>
<content:encoded><p><em><strong>Update</strong> (October 2020): I recently shared a longer and more in-depth version of my story with Tim of the DevJourney podcast, which you can listen to <a href="https://devjourney.info/Guests/122-InesMontani.html">here</a>.</em></p> <p>We got our first computer in the late 1990s. A guy my dad knew from work was really into computers, still a novelty at the time, and he offered to get us one and set it up. So my parents thought, why not? Looking back, I often think about how my life would have turned out if this hadn’t happened. We likely wouldn’t have gotten internet until much later, and I would be a very different person now.</p> <p>I immediately fell in love with the big grey box that made strange noises. My favourite programs were <a href="https://en.wikipedia.org/wiki/Creative_Writer">Creative Writer</a> and <a href="https://en.wikipedia.org/wiki/Fine_Artist">Fine Artist</a>, essentially the 90s kids versions of InDesign and Photoshop. I spent hours writing, designing and printing my own magazines, and I dreamt about one day becoming a journalist or book author.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/7800c96a19543463b16d71d35a7a515e/62aaf/coding_fineartist.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.37373737373737%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECA//EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/aAAwDAQACEAMQAAABrBO4Nf/EABgQAAMBAQAAAAAAAAAAAAAAAAEREgID/9oACAEBAAEFAkVSyOwn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFxEAAwEAAAAAAAAAAAAAAAAAAAETMf/aAAgBAgEBPwFaTR//xAAXEAEBAQEAAAAAAAAAAAAAAAAAARES/9oACAEBAAY/AnKbK//EABkQAQADAQEAAAAAAAAAAAAAAAEAEUFRkf/aAAgBAQABPyEwPsrSG94wwJQn/9oADAMBAAIAAwAAABB37//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPxAMn//EABcRAQEBAQAAAAAAAAAAAAAAAAEAESH/2gAIAQIBAT8Q7Eq7f//EABsQAQEAAgMBAAAAAAAAAAAAAAERAEEhMXGh/9oACAEBAAE/EKYrbNOvcDaREWAaecCYQVjfuf/Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/7800c96a19543463b16d71d35a7a515e/55fac/coding_fineartist.webp 198w, /static/7800c96a19543463b16d71d35a7a515e/5b4d3/coding_fineartist.webp 395w, /static/7800c96a19543463b16d71d35a7a515e/848e4/coding_fineartist.webp 790w, /static/7800c96a19543463b16d71d35a7a515e/8d239/coding_fineartist.webp 1185w, /static/7800c96a19543463b16d71d35a7a515e/94b1e/coding_fineartist.webp 1280w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/7800c96a19543463b16d71d35a7a515e/9db10/coding_fineartist.jpg 198w, /static/7800c96a19543463b16d71d35a7a515e/16a07/coding_fineartist.jpg 395w, /static/7800c96a19543463b16d71d35a7a515e/d27a6/coding_fineartist.jpg 790w, /static/7800c96a19543463b16d71d35a7a515e/0b93b/coding_fineartist.jpg 1185w, /static/7800c96a19543463b16d71d35a7a515e/62aaf/coding_fineartist.jpg 1280w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/7800c96a19543463b16d71d35a7a515e/d27a6/coding_fineartist.jpg" alt="Microsoft Fine Artist" title="Microsoft Fine Artist, released in 1994" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Microsoft Fine Artist, released in 1994</p></figcaption> </figure> <p>About a year in, I discovered Microsoft Word and its ability to create HTML pages. I made my very first website, complete with clip arts and the light blue raindrop background, and uploaded it via our ISP’s free web hosting. There it was, live on <em>the internet</em>.</p> <p>Around the same time, I started taking part in my small town’s youth parliament and signed up for the group that would create its website. I was excited to get involved with local politics, even if it was just voting on which playgrounds to build. It was as close as I could get to being taken seriously and doing “adult stuff”. The city had hired a freelancer to supervise the website project, and I quickly learned the basics of Photoshop and <a href="https://en.wikipedia.org/wiki/Adobe_GoLive">GoLive</a>. In my free time, I kept working on my own websites about myself and the bands I was into.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/e0be69a655eb0e0383b694bf26bf824a/03ffe/coding_golive.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 36.36363636363637%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBP/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd8hUH//xAAYEAADAQEAAAAAAAAAAAAAAAAAARECEv/aAAgBAQABBQJ5U4pEf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABcQAQEBAQAAAAAAAAAAAAAAAAAxAUH/2gAIAQEABj8CjiY//8QAGxAAAgIDAQAAAAAAAAAAAAAAAAERITFBUdH/2gAIAQEAAT8hRw3sVTiHSDwP/9oADAMBAAIAAwAAABD4L//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/EKr/xAAaEAEAAwADAAAAAAAAAAAAAAABABExIUHB/9oACAEBAAE/EBqW6pkQkdenkAVyR//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/e0be69a655eb0e0383b694bf26bf824a/55fac/coding_golive.webp 198w, /static/e0be69a655eb0e0383b694bf26bf824a/5b4d3/coding_golive.webp 395w, /static/e0be69a655eb0e0383b694bf26bf824a/848e4/coding_golive.webp 790w, /static/e0be69a655eb0e0383b694bf26bf824a/8d239/coding_golive.webp 1185w, /static/e0be69a655eb0e0383b694bf26bf824a/cbd37/coding_golive.webp 1200w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/e0be69a655eb0e0383b694bf26bf824a/9db10/coding_golive.jpg 198w, /static/e0be69a655eb0e0383b694bf26bf824a/16a07/coding_golive.jpg 395w, /static/e0be69a655eb0e0383b694bf26bf824a/d27a6/coding_golive.jpg 790w, /static/e0be69a655eb0e0383b694bf26bf824a/0b93b/coding_golive.jpg 1185w, /static/e0be69a655eb0e0383b694bf26bf824a/03ffe/coding_golive.jpg 1200w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/e0be69a655eb0e0383b694bf26bf824a/d27a6/coding_golive.jpg" alt="Adobe GoLive" title="Adobe GoLive 4.0, released in 1999. Screenshots: Thomas Wassmer" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Adobe GoLive 4.0, released in 1999. Screenshots: Thomas Wassmer</p></figcaption> </figure> <p>When I was around 13, I discovered a whole new scene online. There were lots of young girls and a few boys, just like me, dabbling in web and graphic design. Some of them had very popular blogs and impressive skills, even by today’s standards. People often wrongly assume that guys dominated the entire internet at the time, but in this space, creative front-end design was almost entirely run by girls. I looked up to them and eventually signed up for one of the biggest online message boards, which at its height easily counted a thousand members from German-speaking countries.</p> <p>The board mainly revolved around web design topics like Photoshop, HTML and CSS, with sub-forums on music, relationships and everything else that was on our teenage minds. I worked up the courage to show my website and got a lot of motivating feedback.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/1cb64f889e2a03b4605e1dc2181f4792/e8c9e/coding_designs.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAYCAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABL56MLozB/8QAHBAAAgAHAAAAAAAAAAAAAAAAAQIAAwQREjNB/9oACAEBAAEFAjkSrWJp5jFNvI//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAABAwUAAAAAAAAAAAAAAAABABEhAhASgpH/2gAIAQEABj8CCkHiyDMZVWl//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITEQcf/aAAgBAQABPyEtAVZyL1VvMZsfrZpa+E6vkJ//2gAMAwEAAgADAAAAEDc//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8QV//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPxCMf//EAB0QAQADAAIDAQAAAAAAAAAAAAEAESExgVGRsfD/2gAIAQEAAT8QcgqqF4c/e5Vn1h+o8S491Dad0OI6EyinZsABBHV9wAYVP//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/1cb64f889e2a03b4605e1dc2181f4792/55fac/coding_designs.webp 198w, /static/1cb64f889e2a03b4605e1dc2181f4792/5b4d3/coding_designs.webp 395w, /static/1cb64f889e2a03b4605e1dc2181f4792/848e4/coding_designs.webp 790w, /static/1cb64f889e2a03b4605e1dc2181f4792/5e9fb/coding_designs.webp 1050w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/1cb64f889e2a03b4605e1dc2181f4792/9db10/coding_designs.jpg 198w, /static/1cb64f889e2a03b4605e1dc2181f4792/16a07/coding_designs.jpg 395w, /static/1cb64f889e2a03b4605e1dc2181f4792/d27a6/coding_designs.jpg 790w, /static/1cb64f889e2a03b4605e1dc2181f4792/e8c9e/coding_designs.jpg 1050w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/1cb64f889e2a03b4605e1dc2181f4792/d27a6/coding_designs.jpg" alt="Designs from my old blog" title="Some designs of my old blog, klammerauf.org, from 2006-2009" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Some designs of my old blog, klammerauf.org, from 2006-2009</p></figcaption> </figure> <p>It was common to redesign your site for no particular reason about once a month, so there was always something to do. I quickly ditched WYSIWYG editors and started writing my own code. Inspired by <a href="http://www.csszengarden.com/">CSS Zen Garden</a>, I became mildly obsessed with web standards and semantic HTML. I also taught myself the very basics of PHP and started using one of the very first versions of WordPress. I still remember how proud I was when I got it all up and running. Together with a friend I launched an online magazine about our favourite indie music. It was the early age of blogging and everything seemed possible. We wrote about albums and concerts, got accreditations to big music festivals and interviewed the bands we liked.</p> <p>However, I slowly lost interest in my projects and websites. I felt like I wasn’t keeping up fast enough, I wasn’t good enough and there were just so many other things that I could be doing. I was close to finishing school and had to think about what I wanted to do with my life.</p> <p>I eventually started university at the age of 17, doing a degree of media science and language studies, a hybrid of linguistics, computational linguistics and phonetics. It was disappointing and frustrating. Social media and blogging hadn’t entered the mainstream yet, so nobody really wanted to talk about that. I was unhappy with the new German university system, which was heavily bureaucratised and school-like, and didn’t live up to my expectations of the “academic life”. People say that undergrad studies are all about learning how to work and study independently, but I felt like this had never been a problem for me. I wanted to learn more, I wanted to <em>do things</em>. Instead, I became a fairly unambitious student who was mainly focused on getting done with it as quickly as possible.</p> <p><strong>“If you ever want to make lots of money, help computers understand language.”</strong> a professor once said to us during a lecture. He was one of the few lecturers I still remember fondly, the only one who refused to enforce the new concept of mandatory attendance and preferred oral exams over multiple choice. I forgot about his advice until years later, when I found myself doing exactly that, helping computers understand language, which eventually led to founding my first company, <a href="https://explosion.ai">Explosion AI</a>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 420px; " > <a class="gatsby-resp-image-link" href="/static/5b9aac7e398b7e403481e565506ab56b/7fbea/coding_me.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 67.67676767676768%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABQACBP/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/aAAwDAQACEAMQAAABb5sBExDTn//EABsQAQACAgMAAAAAAAAAAAAAAAIBAwAhBBIU/9oACAEBAAEFAjGrEe6jdnJikK5xnref/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGxABAAEFAQAAAAAAAAAAAAAAAQACEBESMUH/2gAIAQEABj8CmnthRczcq65nCf/EABkQAQADAQEAAAAAAAAAAAAAAAEAETEhYf/aAAgBAQABPyETERQPN5BjOOCo0+onTyX7H//aAAwDAQACAAMAAAAQUN//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QMSy//8QAFhEAAwAAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/EIyM/8QAHRAAAgIDAAMAAAAAAAAAAAAAAREAIUFRcTGBwf/aAAgBAQABPxAUpG2QKlOPcO8VQjvIIFwHbhCxXlHtYVchKZ52AR9n/9k='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/5b9aac7e398b7e403481e565506ab56b/55fac/coding_me.webp 198w, /static/5b9aac7e398b7e403481e565506ab56b/5b4d3/coding_me.webp 395w, /static/5b9aac7e398b7e403481e565506ab56b/8b3fd/coding_me.webp 420w" sizes="(max-width: 420px) 100vw, 420px" type="image/webp" /> <source srcset="/static/5b9aac7e398b7e403481e565506ab56b/9db10/coding_me.jpg 198w, /static/5b9aac7e398b7e403481e565506ab56b/16a07/coding_me.jpg 395w, /static/5b9aac7e398b7e403481e565506ab56b/7fbea/coding_me.jpg 420w" sizes="(max-width: 420px) 100vw, 420px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/5b9aac7e398b7e403481e565506ab56b/7fbea/coding_me.jpg" alt="Photo of me" title="Me in my flat in Cologne in 2009, trying to figure out what to do with the rest of my life" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>Me in my flat in Cologne in 2009, trying to figure out what to do with the rest of my life</p></figcaption> </figure> <p>On my last day of university, I left both my part-time jobs at Lush and Deutsche Welle, packed my life into a couple of boxes and moved to Berlin. I didn’t care about making money or having a career. I was too wrapped up in the idea of <a href="/blog/i-fell-for-self-help-so-you-dont-have-to">“finding happiness”</a> and finally being independent. I spent the next four years working in media, doing advertising, sales and marketing. I loved my work, and I <a href="/blog/5-things-i-learned-from-working-in-print">learned a lot</a>, including how to lead a team, coordinate complex projects and partnerships and get stuff done. But web development never really got off my mind. CSS3 had just become widely supported, and I was blown away by all the new possibilities. All those things that we’d created complicated workarounds for as teenagers were suddenly as simple as <code>transform: rotate(45deg)</code> or <code>box-shadow: 10px 10px 5px #000</code>. I revived my blog and slowly started keeping up with the latest technologies again.</p> <p>Everything changed when I left my job to work remotely as a freelancer. I’d always struggled with staying motivated, and I feared that this would make it worse. But the opposite happened. With a less rigid distinction of work and free time, I became more productive than ever. I had an idea for a web app, and I was working on it day and night for weeks, just because it felt so rewarding to see it all come together. I <a href="/blog/announcing-explosion-ai#the-past">started working with Matt</a>, who had just released <a href="https://spacy.io">spaCy</a>, an open-source library for Natural Language Processing. It turned out to be a perfect fit – I already knew linguistics and everything front-end, and I was steadily getting better at programming. I’ve never been the type of person to learn things by reading books and following tutorials. I need a goal, a <a href="https://www.quora.com/What-should-software-product-managers-who-are-new-to-A-I-Machine-Learning-focus-on-Online-courses-are-extremely-technical-Is-that-what-is-needed/answer/Ines-Montani">clear mission</a>, and I’m best at learning new things by just <em>doing them</em>.</p> <figure class="gatsby-resp-image-figure" style=""> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 545px; " > <a class="gatsby-resp-image-link" href="/static/cd18b343569783b2f7d228f7fc1d94e2/17517/coding_displacy.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 71.71717171717172%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGKRWNAmH//xAAaEAEAAgMBAAAAAAAAAAAAAAABAgMAEiIU/9oACAEBAAEFAm9H0Tyq2aSO9cpOf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB8QAAEDAwUAAAAAAAAAAAAAAAABAjEQESJRUnGBkv/aAAgBAQAGPwJbufO4l3oXJZ1F5p2f/8QAGxAAAwACAwAAAAAAAAAAAAAAAAERMUFhcfH/2gAIAQEAAT8hTFKbEHpxnPvUP05FcD7H/9oADAMBAAIAAwAAABDjL//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EAB4QAAICAgIDAAAAAAAAAAAAAAERACExcUFRYYGh/9oACAEBAAE/ECHAFqJlVAgMp5KH8hRMMgRAhTlZ9jyZZt3AmkZY0J//2Q=='); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/cd18b343569783b2f7d228f7fc1d94e2/55fac/coding_displacy.webp 198w, /static/cd18b343569783b2f7d228f7fc1d94e2/5b4d3/coding_displacy.webp 395w, /static/cd18b343569783b2f7d228f7fc1d94e2/06a3f/coding_displacy.webp 545w" sizes="(max-width: 545px) 100vw, 545px" type="image/webp" /> <source srcset="/static/cd18b343569783b2f7d228f7fc1d94e2/9db10/coding_displacy.jpg 198w, /static/cd18b343569783b2f7d228f7fc1d94e2/16a07/coding_displacy.jpg 395w, /static/cd18b343569783b2f7d228f7fc1d94e2/17517/coding_displacy.jpg 545w" sizes="(max-width: 545px) 100vw, 545px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/cd18b343569783b2f7d228f7fc1d94e2/17517/coding_displacy.jpg" alt="Screenshot of displaCy" title="displaCy, an NLP visualiser and the first demo I developed for spaCy" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <figcaption class="gatsby-resp-image-figcaption"><p>displaCy, an NLP visualiser and the first demo I developed for spaCy</p></figcaption> </figure> <p>Looking back, I think what initially discouraged me from pursuing web development as a career was that just developing websites and web apps didn’t feel satisfying enough. Taking my skills and interests to a different, exciting field with so much room for innovation was the missing link.</p> <p>You don’t have to keep chasing after opportunities to reinvent the wheel. But I believe that working with technology only becomes fully rewarding when you combine all the things you’re passionate about, regardless of how compatible they might seem, and find your own unique perspective. In my case, it was programming, front-end, linguistics and marketing. For someone else, it might be programming, typography, journalism and robotics.</p> <h2>Read stories by other developers</h2> <ul> <li><a href="http://lea.verou.me/2012/05/how-i-got-into-web-development-the-long-version/">How I got into web development — the long version</a> by Lea Verou</li> <li><a href="https://superyesmore.com/cartoon-dolls-c2bbe6bb982658b3e614716715beda25">From building cartoon dolls to building things for the web</a> by Una Kravets</li> <li><a href="https://superyesmore.com/and-that-was-it-really-i-knew-what-i-wanted-to-do-i-wanted-to-build-websites-76930dbd2c513442496db9c6bacef8b3">And that was it really, I knew what I wanted to do, I wanted to build websites</a> by Jake Archibald</li> <li><a href="https://superyesmore.com/an-unforeseen-path-5b4a4379bea14ca6c792a3fe682c9910">An Unforeseen Path. On not choosing Computer Science and becoming a SVG expert</a> by Sara Soueidan</li> <li><a href="https://superyesmore.com/how-did-i-start-coding-80c1d61509d5d29c9d389417a165f621">From floppy disks and BASIC programs to a full-time career as a web developer</a> by Jonathan Snook</li> <li><a href="https://superyesmore.com/from-designing-neopets-pages-to-becoming-a-professional-web-developer-d6121b7fe42324e456deb8988d481ec8">From designing Neopets pages to becoming a professional web developer</a> by Amélie Lamont</li> <li><a href="http://rmurphey.com/blog/2012/03/25/girls-and-computers">Girls and Computers</a> by Rebecca Murphey</li> </ul></content:encoded>
</item>
<item>
<title>
<![CDATA[ Announcing Explosion AI ]]>
</title>
<description>
<![CDATA[ Today, we launched the website for our new company, Explosion AI. Explosion is a digital studio specialising in Artificial Intelligence and… ]]>
</description>
<link>https://ines.io/blog/announcing-explosion-ai</link>
<guid isPermaLink="false">https://ines.io/blog/announcing-explosion-ai</guid>
<pubDate>Mon, 03 Oct 2016 00:00:00 GMT</pubDate>
<content:encoded><p>Today, we launched the website for our new company, <a href="https://explosion.ai">Explosion AI</a>. Explosion is a digital studio specialising in Artificial Intelligence and Natural Language Processing. We design algorithms, applications and data assets, and develop custom solutions to today’s AI problems.</p> <p>The past year has been pretty exciting and eventful. Things haven’t always been easy, but it feels good to finally be moving forward again.</p> <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; " > <a class="gatsby-resp-image-link" href="/static/958d9b7be0167d0ebd60616d8604e9df/a24e6/explosion-ai_website.jpg" style="display: block" target="_blank" rel="noopener" > <span class="gatsby-resp-image-background-image" style="padding-bottom: 62.62626262626263%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd1NFkh//8QAFxABAAMAAAAAAAAAAAAAAAAAAQARIP/aAAgBAQABBQKDef/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAAgMf/aAAgBAQAGPwIi/wD/xAAbEAADAAMBAQAAAAAAAAAAAAAAAREhMVFxkf/aAAgBAQABPyF4VlPK7RaM9FVqfBU//9oADAMBAAIAAwAAABAAz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EAB0QAQADAAEFAAAAAAAAAAAAAAEAETFhIVGRobH/2gAIAQEAAT8QFgvvLgLoOAJ6n2YJweIRpE4pGDTe0//Z'); background-size: cover; display: block;" ></span> <picture> <source srcset="/static/958d9b7be0167d0ebd60616d8604e9df/55fac/explosion-ai_website.webp 198w, /static/958d9b7be0167d0ebd60616d8604e9df/5b4d3/explosion-ai_website.webp 395w, /static/958d9b7be0167d0ebd60616d8604e9df/848e4/explosion-ai_website.webp 790w, /static/958d9b7be0167d0ebd60616d8604e9df/cf465/explosion-ai_website.webp 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/webp" /> <source srcset="/static/958d9b7be0167d0ebd60616d8604e9df/9db10/explosion-ai_website.jpg 198w, /static/958d9b7be0167d0ebd60616d8604e9df/16a07/explosion-ai_website.jpg 395w, /static/958d9b7be0167d0ebd60616d8604e9df/d27a6/explosion-ai_website.jpg 790w, /static/958d9b7be0167d0ebd60616d8604e9df/a24e6/explosion-ai_website.jpg 800w" sizes="(max-width: 790px) 100vw, 790px" type="image/jpeg" /> <img class="gatsby-resp-image-image" src="/static/958d9b7be0167d0ebd60616d8604e9df/d27a6/explosion-ai_website.jpg" alt="Screenshot of the explosion.ai website" title="" loading="lazy" decoding="async" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;" /> </picture> </a> </span> <h2>The Past</h2> <p>It all started when my partner, <a href="https://twitter.com/honnibal">Matt</a>, asked me to develop a simple website for his newly launched software library, <a href="https://spacy.io">spaCy</a>. Even though we both shared a passion for programming and linguistics — after all, we’d already spent hours talking about Natural Language Processing the night we met — we had never really thought about working together before. If anything, we found each other’s work fairly boring. Still, I agreed to develop a protype for an interactive visualiser, and we quickly realised that there was actually a lot of potential in a collaboration. The project would later become <a href="https://explosion.ai/demos/displacy">displaCy</a>, one of our most popular tools to date.</p> <p>A few times, Matt asked me if I wanted to join his one-man business. I said no. I had just left my executive sales and marketing job of four years to become self-employed. Things were going really well. I had regular clients and a bunch of long-term projects lined up, and was thriving on my newfound creativity that came with being able to work whenever and from wherever I wanted. I enjoyed working on the open source project, but I still had doubts about my abilities as a developer. It would take me another year to realise that <em>hell yes</em>, there was actually a lot for me to contribute.</p> <p>So while I went on to focus on freelancing, Matt met Henning, who had experience running tech businesses, and together they made plans to turn spaCy into a successful, venture-backed startup. A few months in, he asked me if I had time to take on a project, as they still hadn’t found a suitable front-end developer. At first, everyone involved, including me, was a little skeptical. Programming together for hours and building things in our free time was one thing. But did we really want to take this to a fully professional level? Would our personal relationship be a risk or an advantage? What did “relationship” even mean? How different were we really from two dudes in Silicon Valley who share a small apartment and spend every free minute working on their projects together?</p> <p>I first joined the team part-time as an experiment, but my hours were quickly increased as the business plans became more and more concrete. Needless to say, things at spaCy were going great. I developed an entirely new <a href="https://spacy.io">website</a>, we launched an improved version of the <a href="https://explosion.ai/demos/displacy">displaCy visualiser</a> that doubled up as an annotation tool and even landed our first <a href="https://www.producthunt.com/tech/spacy-io">feature on ProductHunt</a> with a demo that let people explore semantic word relations on Reddit using <a href="https://explosion.ai/demos/sense2vec">sense2vec</a>. We were excited to start working on our first commercial product, for which I was going to take on all front-end development.</p> <p>Yet, things were about to take a different turn. In early May this year, Matt and Henning realised that they weren’t able to settle their professional differences and decided to part ways. This also meant that venture funding was off the table and I had to stop working immediately. I had just started developing a new React app from scratch and was enjoying every minute of it, but from one day to the other, I just had to stop. It took me a while to realise that things wouldn’t just go back to normal. The open source project became unmaintained, the demos were taken offline, and nobody was able to give me any answers about the future of the project.</p> <p>As frustrating as it was, it’s one of the big risks that come with freelancing for tech startups in their early stages. In fact, <a href="https://www.quora.com/What-is-the-truth-behind-9-out-of-10-startups-fail">90% of technology startups fail</a>, almost half of them during their first six months. And along with scaling up too quickly, founder conflicts are a <a href="http://barnraisersllc.com/2015/09/30-statistics-startups-pitfall-success/">leading cause</a>. Unfortunately, the first employees and freelancers are often the ones that suffer most. They’ve been building an entire product from scratch for a promise of a piece of the future cake – but if it fails, they’re often lucky to even get paid at all.</p> <p>It wasn’t easy to overcome the disappointment and the loss of time, money and code, and and instead, make the most of the situation. I’m sure for many people, the first instinct would have been to run far, far away from this mess. But I also knew that this was the field I wanted to keep working in — and if not for this project, then for something else. I immersed myself in my work, and by June, I was finally back to freelancing full-time.</p> <h2>The Present</h2> <p>Four months later, we’re sitting at the notary’s office on the 22nd floor, overlooking the city of Berlin. It’s a beautiful day and you can see the golden statue of Victoria peeking out behind the woods of Tiergarten. I sign the paperwork, making me the director and shareholder of my very first company, <a href="https://explosion.ai">Explosion AI</a>.</p> <p>When Matt finally got to take over the spaCy open source project again, working together had inevitably come up again. After having been locked out of the project for months, it was unclear how long it would take to get the library back on track. But despite the frustration, the project itself was still very dear to my heart — after all, I had been working on it ever since its very first release. Seeing the impacts of my work and all the possibilities for <a href="/blog/how-front-end-can-improve-ai">front-end technologies in AI</a> had really opened my eyes. The more time Matt and I spent reorganising our work and code, planning our brand and strategy, and analysing past mistakes and missed opportunities, the more it became clear that both our different skills and experience would be a perfect match. There was so much to do, and this time, I was ready to go all-in.</p> <p>Bootstrapping the company was a very conscious decision. In an industry that prides itself on changing the world, I’ve always found it irritating how much time is spent on trying to build the ultimate solution for <em>all problems ever</em>, and how little on actually changing things, one step at a time. So many real-life problems can already be solved using today’s technology – just not in a boxed one-size-fits-all kinda way that takes two years and substantial venture capital to build. If we want to keep up with the fast pace of the industry, we need to be able to build what people need <em>now</em>, and accept that they will most likely need something completely different in a year’s time.</p> <p>Custom services on a consultancy basis usually come with trade-offs, though: You spend a lot of time agreeing on a detailed spec and sketching out the deliverables. And if things don’t go according to plan, everyone loses. There are so many new AI startups with exciting, ambitious ideas, but the Research and Development risk is huge: Can it really be done? And what if it doesn’t work? So our approach here is different. We take on those projects that are easier said than done — including the risk.</p> <blockquote> <p>Commissioning a project from us works a little like commissioning a tattoo. Imagine you want to immortalise your undying love for sloths, so you talk to an artist and come up with a concept. The artist then draws you a design. If it’s not something you can use “in production”, you don’t have to pay. But if you’ve found the sloth of your dreams, it’s yours — forever.</p> <p><a href="https://explosion.ai/blog/introducing-explosion-ai">explosion.ai</a></p> </blockquote> <p>To read more about how this works in detail, head over to our <a href="https://explosion.ai/blog/introducing-explosion-ai">website</a>.</p> <h2>The Future</h2> <p>No illusions — running a company is going to be hard work. But my work is also my greatest hobby. Being self-employed and working remotely has made me more productive than I’d ever been. It’s also taught me a lot of things that have ultimately made me so much more confident in taking this step. I was able field-test my ideas, figure out what works best and develop a clear concept of what’s important to me in a business.</p> <p>I’m excited about this new direction, taking on challenging projects, releasing new <a href="https://explosion.ai/demos">demos</a> and <a href="https://github.com/explosion">open source tools</a>, taking <a href="https://spacy.io">spaCy</a> to the next level and sharing more of my work along the way.</p> <p>I’m also looking forward to hearing what you think – let’s talk <a href="https://twitter.com/_inesmontani">on Twitter</a>!</p> <p><link-button href="https://explosion.ai" icon="globe">explosion.ai</link-button> <link-button href="https://github.com/explosion" icon="github">explosion.ai</link-button> <link-button href="https://twitter.com/explosion_ai" icon="twitter">@explosion_ai</link-button></p></content:encoded>
</item>
<item>
<title>
<![CDATA[ I fell for self-help so you don’t have to ]]>
</title>
<description>
<![CDATA[ I hate to admit it, but during my late teenage years and the beginning of my adult life, I massively fell for self-help blogs. I was unhappy… ]]>
</description>
<link>https://ines.io/blog/i-fell-for-self-help-so-you-dont-have-to</link>
<guid isPermaLink="false">https://ines.io/blog/i-fell-for-self-help-so-you-dont-have-to</guid>
<pubDate>Wed, 14 Oct 2015 00:00:00 GMT</pubDate>
<content:encoded><p>I hate to admit it, but during my late teenage years and the beginning of my adult life, I massively fell for self-help blogs. I was unhappy, didn’t particularly like myself and had no idea where I would end up one day so I started spending hours on the internet looking for “answers”. (Yeah, this probably sounds familiar.) I was never particularly interested in conventional luxuries  – think fancy hotels, designer shit, glitter and cupcakes –  but for a while I believed that this is what I needed to be into in order to be <em>happy,</em> while at the same time rejecting any concepts of a traditional career. Falling for self-help that seemed so progressive at the time and believing that “thoughts become things” has helped me make an effort to actively improve myself and try out different things. But seeing through the bullshit has taught me <em>so much more</em>.</p> <p>In times like these, where most things are <em>technically</em> possible, who doesn’t like to hear that yes, you can indeed become whoever you want, you just need to want it badly enough and think about it hard enough and love yourself? Write yourself a <a href="http://www.neatorama.com/origin/2012/10/07/Jim-Carrey-Once-Wrote-Himself-a-10-Million-Check/">$10 million check</a> and carry it around with you? (Just imagine all the talentless actors driving around the Hollywood hills every single day and writing checks to themselves before moving back in with their parents and finally signing that McDonalds contract.)</p> <h2>Manifesting the pyramid scheme</h2> <p>Let’s be real, have you ever noticed that all those inspirational gurus who ~*manifested their dreams*~ and ~*made it*~ are rarely ever doing anything of substance? Their entire business model, if you want to call it that, revolves around giving advice on how to ~*make it*~, without ever having really achieved <em>anything</em> themselves, except for making a semi-business out of a fabricated rags to riches story and perfectly curated Instagram life. Yet, the fantasy of making money while doing fuck all and being happy, positive and beautiful, is way too tempting.</p> <p>Needless to say, all the blogs and courses and “life advice” spawn yet another generation of similarly privileged (because let’s face it, those courses and ebooks are ridiculously overpriced and never come without “quit your dayjob”) wannabe gurus who try their best to spread the same gospel. A very damaging <a href="https://en.wikipedia.org/wiki/Pyramid_scheme">pyramid scheme</a> with little to no productive outcome. Whether it’s positivity gurus, probloggers or self-proclaimed marketing and branding specialists, the irony is glaring: for-profit webinars teaching how to do for-profit webinars about for-profit webinars and ebooks about how to write ebooks about writing ebooks. Replace “branding” with “eating bacon” and the acquired skills would be the same - they’d only sound less fashionable and probably wouldn’t convince most parents to keep funding a second gap year.</p> <blockquote> <p>“I took that business course and made 10k in my first month… shilling that business course!”</p> </blockquote> <p>Sure, the success stories may sound convincing at first and hey, it’s all quantified so it must be legit, right? But once you dig deeper, it almost becomes impossible not to notice the blatant logic flaws: <em>“Thousands of people have used my advice to… start their own advice blog!”</em> or <em>“I took that business course and made 10k in my first month… shilling that business course!”</em>.</p> <h2>Empowering my arse</h2> <p>It makes me happy to see more and more young people, especially women, start their own businesses and reject traditional stereotypes  –  and even angrier to see the number of self-proclaimed gurus and teachers taking advantage of young people in alternative cultures and their desires to become entrepreneurs. There are plenty of perfectly sane reasons why this is a great time to start your own business and why <a href="http://www.getbullish.com/2011/04/bullish-when-to-make-massive-and-ballsy-life-changes-for-your-career/">changing your life</a> for the better <em>is</em> possible. But unfortunately, the ~*do what you love*~ self-help narrative has warped this into a bizarre spiritual concept and replaced all hands-on hard work by “manifesting”, “meditating” and blunt consumerism. All under the guise of “empowering women”. Here’s the thing:</p> <blockquote> <p>Telling women to meditate, “be grateful,” sit up straight and get good sleep […] might make us feel better – but it won’t make the world better. You can’t self-help away deeply-ingrained structural discrimination.</p> <p><a href="http://www.theguardian.com/commentisfree/2014/apr/23/female-confidence-gap-katty-kay-claire-shipman">Jessica Valenti: The female confidence gap is a sham (The Guardian)</a></p> </blockquote> <p>There is literally <em>nothing</em> empowering about this. Most self-help philosophies marketed towards women keep rehashing the same old gender stereotypes (Look pretty! Wear high heels!) and delusional <a href="https://en.wikipedia.org/wiki/The_Secret_(book)">The Secret</a>-esque concepts like the “law of attraction”: if you think positive, you will attract positive things. The gist of this isn’t even that awful but this new spiritual spin on it is: Your life is shit because your thoughts are shit. You still don’t live that loft and can’t afford to drink green smoothies all day? You feel bad and don’t know why? Well, you obviously didn’t think positively <em>enough</em>. <em>You are simply not enough.</em> Instead of actually helping women internalise their accomplishments, which is a huge issue (see: <a href="https://en.wikipedia.org/wiki/Impostor_syndrome">impostor syndrome</a>), once again <em>they</em> are the problem and the ones to blame. In short: it’s a huge victim-blaming mess.</p> <h2>The universe won’t do shit</h2> <p>The more time I spent aspiring to “live in the present moment” and reading inspirational success stories, the more I realised that nothing really added up. Yeah, there was always the occasional talk about some unspecified hard(ish) work. But even when it wasn’t some guru’s 598285th rehashed story about “How I quit my dayjob to do what I love” but anecdotes of <em>actual</em>, <em>real</em> people who inarguably achieved <em>actual</em>, <em>real</em> things with <em>actual</em>, <em>real</em> skills, it was usually quickly brushed off as “They just believed in it and worked hard and the universe rewarded them.” The universe? Really? What is that even?</p> <p>But sadly, I know there are people sitting in their bedrooms waiting for the universe to finally bless them with the opportunities they deserve for carefully illustrating their ~*dreams*~ in their Moleskine scrapbook “bible” every night. It sucks people in because people just love get-rich-quick schemes. They always have and they probably always will, no matter how implausible they sound. It’s like diet pills  –  we all know that it probably won’t work but we still can’t help thinking, what if this time, it’s completely different? Maybe <em>this is it</em>.</p> <p>Eventually, the new agey gibberish became impossible to ignore. I might have been easily deceived with more or less plausible sounding explanations of the human psyche, but I simply refused to believe that “the universe” was “taking care of me” or that the constellation of the planets caused bad things happening to me. And wasn’t there this thing about everything that happened to me being a result of my thoughts? Then how is it possible that some random ass planet can make my life misterable all the time? Why were <em>none</em> of those super amazing success stories adding up? And why did I <em>still</em> feel like shit? It was painful. I imagine that this is how a Scientologist must feel after crossing the bridge and finding out that they now indeed have to belive in that Xenu stuff. Or a neo nazi realising that their main ideology is based on the idea that the Germans descended from Atlantis survivors. (I didn’t make this up!)</p> <h2>Time for a reality check</h2> <p>Most of the self-help industry is a fraud and it needs to stop. It needs to stop promoting get-rich-quick and pyramid schemes as an alternative to <em>real</em> and honest skills. It needs to stop subtly telling women that they’re not enough. It needs to stop taking advantage of insecure young people and stop selling a misleading, dumbed-down version of how to get by in this world. I needs to check its fucking privilege, stop invalidating mental illness and stop flat-out lying to people.</p> <p>~*Manifesting*~ will never replace hard work. We get told to “follow our dreams” because “everything is possible” by people who claim to have done exactly that but have nothing to show for it. We’re presented with one size fits all advice and childish fantasies of what it means to be “successful”. And we buy it because we just want it <em>so badly</em>.</p> <p>I might be cynical, but I am in no way against positive thinking. In fact, focusing on the positive has taught me one of the most important lessons so far: no matter how hard and annoying it is, I just <em>have to</em> take responsibility for my life and fucking deal with it. Yes, I can take all the glitter bubble baths I want and the world still won’t be perfect, but I can improve my life. I just have to do the exact <em>opposite</em> of what every self-help philosophy was telling me to do: <strong>get my shit together and step the fuck out into the real world.</strong></p></content:encoded>
</item>
<item>
<title>
<![CDATA[ 5 things I learned from working in print ]]>
</title>
<description>
<![CDATA[ For four years, I worked for a popular print magazine, developing marketing strategies, selling advertising space and coordinating… ]]>
</description>
<link>https://ines.io/blog/5-things-i-learned-from-working-in-print</link>
<guid isPermaLink="false">https://ines.io/blog/5-things-i-learned-from-working-in-print</guid>
<pubDate>Tue, 29 Sep 2015 00:00:00 GMT</pubDate>
<content:encoded><p>For four years, I worked for a popular print magazine, developing marketing strategies, selling advertising space and coordinating partnerships. Being a monthly publication, we often jokingly compared it to giving birth once a month: at first you get all excited, then it becomes super hard and you want to die and then all of a sudden it’s over, you’re happy and hold the result in your hands and already forgot about all of the pain. (I’ve never had a baby, but that’s what I sort of imagine it to be like.) It was stressful but exciting and surprisingly, it completely changed the way I look at the internet today.</p> <h2>1. Quality wins.</h2> <p>Most of the print publications that are still around and manage to stay alive, have one thing in common: They either produce extremely trivial content, like tabloids and gossip magazines, or focus on the exact opposite: high quality editorial and design. And the worse the trivial nonsense becomes, the more demand seems to arise for quality journalism.</p> <p>I often hear people complain about the modern internet and the alledged “death of journalism”, all because lazy millenials don’t read anymore and only want bite-sized pieces of shallow content. And I’ve seen a lot of blogs and online magazines I once liked turn into “You won’t believe what happens next!” monsters. Looking at an average Facebook newsfeed, it’s easy to assume that listicles (like this one) and clickbaity headlines have won the game. But that’s simply untrue. <a href="http://www.huffingtonpost.com/noah-kagan/why-content-goes-viral-wh_b_5492767.html">Long-form</a> content gets shared more often than short content. For popular long articles, audiences like length: the longer the text, the more it gets shared. And the social networks themselves play a key role in this. Facebook has been rewarding so called “high quality content” with a higher reach <a href="https://www.facebook.com/business/news/News-Feed-FYI-Showing-More-High-Quality-Content">for years</a>.</p> <p>But it doesn’t stop there. Readability and accessibility have become staples of modern web design and traditional online media outlets have been trying recreate the “magazine reading experience” for the web with some pretty impressive art-directed long-form articles on <a href="http://www.wired.com/2015/04/silk-road-1/">Wired</a>, <a href="https://medium.com/matter/the-web-we-have-to-save-2eb1fe15a426">Medium</a>, <a href="http://www.nytimes.com/projects/2013/tomato-can-blues/">The New York Times</a> and even <a href="http://pitchfork.com/features/cover-story/reader/mgmt/">Pitchfork</a>. This is why I don’t believe in the “death of journalism”. Publishing is now easier than ever and the more fluffy content the internet produces, the more people will want the complete opposite.</p> <h2>2. A deadline is a deadline is a deadline.</h2> <p>The logistics of print publishing can be extremely complex. Printing large quantities takes time, delivery has to be coordinated and subscriptions have to be labelled and sent out. Therefore, a delay is not an option. If it needs to go to the printer today, it’s going to the printer today. And it needs to be perfect. Thus, print deadlines are often harsh and final. No “Oh shit, I forgot. Let’s do it next week!” or “I can’t find out about this now, they’re not answering the phone”. It’s quite impressive, though, how much you can get done if you absolutely <em>have to</em>, and how many things are suddenly possible.</p> <p>I’ve learned to appreciate and respect deadlines for what they are: the <em>dead final</em> last chance to accomplish something that absolutely has to be accomplished. It’s incredibly hard to get things done without a clear idea of when it needs to be finished. Tasks with no deadlines will always be pushed back and delayed until the last minute (something I’m extremely guilty of).</p> <h2>3. People still don’t trust the internet.</h2> <p>Print is prestigious and instantly makes people take you more seriously. The assumption this is based on isn’t even so wrong: establishing an actual print publication takes a lot more than setting up a WordPress blog and throwing a swanky media kit together. If you run an established print magazine, you’ve made a substantial investment, and you’re going to manage your reputation to protect it. Advertisers understand this instinctively, and obviously value it. And, believe it or not, even fairly big companies still don’t trust online advertising and social media <em>at all</em>. In four years of being in touch with different clients from all kinds of different industries, I’ve witnessed a lot of arbitrary resistance and skepticism regarding online marketing and a lot of unreasonable decisions made because “it’s print so it must be better”.</p> <p>There’s still a lot of work to be done to take people from “I’ve heard I need to do something on the internet now” to understanding how online media works and what it offers. You need a coherent strategy that plays to the strengths of the medium you’re using. Instead I see people throwing money at Facebook randomly, getting frustrated by the results for obvious reasons, and coming to the conclusion that it’s best to “not do anything with that internet again”.</p> <h2>4. The classic “advertorial” is never a good idea.</h2> <p>Traditionally, print mostly knows two different ways to present “sponsored content”: a PR text that looks like editorial content with a small caption saying “advertorial” somewhere in the corner and random unmarked product placements and endorsements. Usually it all happens in a grey area somewhere in between those two and usually it all ends up looking really bad. I’ve spent a lot of time experimenting with alternatives to classic advertorials and new ways of presenting sponsored content in print and online, and the result was always the same: native advertising only works if it’s honest and actually makes an effort to be truly <em>native</em>. And that means, providing purposeful content which is <em>just as good</em> as what the reader would normally expect to read.</p> <p>Realising this has changed my entire perception of online advertising. I’m glad to see copy-pasted press releases slowly disappear from the internet and one day, this will also happen to boring, self-important brand events and bloggers desparately spinning stories to shill sanitary wipes. (On a related note, I always found it funny how the people who voiced the loudest opposition to sponsored cooperations were usually the first ones to snatch invitations to yet another brand event with free food, drinks and goodie bags.)</p> <h2>5. Print is not dead.</h2> <p>“Oh, it’s print? Does that still make money? I thought print was dead.” While I can totally see newspapers die in favour of real-time online news reporting, there is still a demand for print and the demand is high. People are <a href="http://www.theguardian.com/commentisfree/2013/oct/13/uk-reading-more-than-ever">reading more</a> than <a href="http://www.theatlantic.com/technology/archive/2012/04/the-next-time-someone-says-the-internet-killed-reading-books-show-them-this-chart/255572/">ever before</a>. Initially, print was the mass media, and online publications were devoted to niche interests. Now mass media is almost entirely online, but falling costs have opened the door for boutique print publications. The physical and three-dimensional experience of reading a magazine works perfectly for art, fashion, design and long-form reportages. People buy print for the experience. Instead of being a necessity, it has simply evolved into a novelty.</p></content:encoded>
</item>
</channel>
</rss>