[

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

](https://lp.logrocket.com/blg/content-advisory-board-signup).metrics-banner {padding: 8px 0px; background: #764abc ;color: #ffffff;} .metrics-banner h6 {color: #ffffff;text-align:center; margin: 0px !important;} #metrics-embed {width: 65.5%; margin: 0px auto; display: block;} .mediumnavigation {padding: 0px 0px 8px 0px;} @media all and (max-width: 800px){ .mediumnavigation{box-shadow: none !important;} #metrics-embed {width: 90%;} .mainheading {padding: 4rem 0 1rem 0;} }

2018-11-21

1680

Jason Rodriguez

106

Nov 21, 2018 ⋅ 6 min read

Practical tips for better tech talk slides

Jason Rodriguez Evangelist @litmusapp, author of three books on email design. Mostly writer, sometimes designer at rodriguezcommaj.com.

LogRocket Galileo logo

Introducing Galileo AI

LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns.

LEARN MORE

.plug-dev-top--card { border: 2px solid rgba(118, 74, 188, 0.2); border-radius: 8px; background-color: #491d90; justify-content: space-between; align-items: center; padding: 16px; font-family: 'Proxima Nova', sans-serif; display:flex; gap: 1rem; cursor: pointer; } .plug-dev-top--logo { width: 48px; height: 48px; border-radius: 50%; } .plug-dev-top--blurb { h2 { font-weight: 800; font-size: 22px; line-height: 22px; color: #fff; width: 70%; margin: 0 0 5px 0; } h3 { font-weight: 900; font-size: 13px; line-height: 13px; letter-spacing: 0.1em; color: #fff; opacity: 0.5; white-space: nowrap; margin: 0; } } .plug-dev-top--cta { background-color: #fff; color: #764abc; border: none; border-radius: 4px; padding: 10px; font-size: 16px; font-weight: 800; font-family: 'Proxima Nova', sans-serif; text-decoration: none; width: 25%; text-align: center; &:hover { text-decoration: none; color: #a58ec8; } } .plug-dev-top--asset { position: relative; height: 400px; overflow: hidden; transition: all 0.3s ease; margin-top: 30px; &.lr-hidden { height: 0; margin: 0; } }

See how LogRocket's Galileo AI surfaces the most severe issues for you

Check it out

Speaking at conferences and meetups can be one of the best things you can do for your career. But for many developers, public speaking is outside of their comfort zone. On top of standing up and talking in front of a group of strangers (or even friends), technical talks are fraught with potential disasters. From broken slides and shitty projectors to dropped internet and bug-riddled code examples, there’s a lot that can go wrong.

Giving a technical talk doesn’t have to be a nightmare, though. It can be a rewarding and even enjoyable experience.

While there are a lot of articles online that go into the actual speaking part of public speaking, few talk about the preparation that goes into creating slides and demos for a tech talk. The last thing you want to be worrying about onstage are your slides. You want to focus on getting your ideas across and educating your audience.

Fortunately, there are a few guidelines you can follow to make sure your slides and demos work well, both from a technical standpoint and an educational one.

Do you even need slides?

This is the first question you should ask yourself.

Some formats — like lightning talks and informal meetups — might not require slides. For shorter talks, slides could serve as a distraction from the point you’re trying to make. And some events, like meetups, are ill-equipped to handle slides. Instead of spending time trying to troubleshoot an old, janky projector, it might be worth it to fly solo and get your points across verbally.

There’s also a cultural component at play when deciding whether or not you should use slides. Some developers have a strong reaction when asked to create slides. Other folks — like Edward Tufte — openly proclaim that “PowerPoint is evil.” While that’s technically true (I’m a Keynote fan, myself), slides can still be an effective way to communicate information.

It’s up to you to decide whether or not you need slides for your talk. But when you do need them, here are some key things to keep in mind…

Design

When it comes to slide design, my best advice is to keep things as simple and minimal as possible. When in doubt, use black text on a white background. In fact, the default “White” template in Apple Keynote is an excellent base from which to work.

It might not be the fanciest theme in existence, but it does its job well.

Your slides’ sole job is to get information across quickly and clearly, without distracting anyone in the audience.

That means that the less information and ornamentation you have on a slide, the better.

[

](https://lp.logrocket.com/blg/learn-more)

[#replay-signup { margin-block: 1rem; display: flex; gap: 0.5rem; flex-direction: column; align-items: center; border: 1px solid #E6DFF6; border-radius: 16px; padding: 0.5rem 2rem; background-color: #F4F0FB; font-family: 'Proxima Nova', sans-serif; font-size: 0.95rem; h3 { margin: 0; font-weight: bold; } p { max-inline-size: 65ch; } .replay-signup-form-wrapper { width: 60%; } .nf-before-form-content { display: none; } input.nf-element[type="submit"] { background-color: #764abc; color: #fff; border-radius: 8px; padding-block: 10px; height: unset; width: 100%; display: block; } .nf-response-msg { font-size: 1.2rem; text-align: center; } }

](https://lp.logrocket.com/blg/learn-more)

The Replay is a weekly newsletter for dev and engineering leaders.

Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.

Notice: JavaScript is required for this content.

{{{ data.renderProgressBar() }}} {{{ data.renderBreadcrumbs() }}} {{{ data.renderPartTitle() }}}

{{{ data.title }}}

{{{ data.renderNextPrevious() }}}

{{{ ( part.errors ) ? '' : '' }}} {{{ part.title }}}

Over 200k developers use LogRocket to create better digital experiences

Learn more →

@media all and (max-width: 800px){ .tweet-embed-container {flex-direction: column !important;} .single-tweet, .embed-tweet-right {width: 100% !important;} } .embed-link {text-decoration: none;} .embed-link:hover {text-decoration: none;} .tweet-embed-container {border-radius: 20px; background: radial-gradient(79.69% 102.24% at 100% 100.11%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(89.7% 115.09% at 3.43% 2.75%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)), #764ABC; background-blend-mode: overlay, overlay, normal; box-shadow: 0 4px 0 #d5d5d5; width: auto; padding: 20px 15px; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; margin: 0 auto; gap: 3%; } .single-tweet {width: 50%;} .single-tweet img {max-width: 100%;height: auto; border-radius:7px;} .embed-tweet-right {width: 46%;} .embed-tweet-right h2 {font-family: 'Avenir'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 28px; color: #FFFFFF;} .embed-btn { display: flex; flex-direction: row; justify-content: left; width: 170px; gap: 5px; align-items: center; padding: 0px 10px; font-family: 'Avenir'; font-style: normal; font-weight: 900; font-size: 16px; line-height: 16px; color: #764ABC; height: 48px; /* White */ background: #FFFFFF; mix-blend-mode: normal; box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.11); border-radius: 80px; border: none; }

As an added bonus, the default Keynote template is very high-contrast, which comes in handy when contending with event projectors. Projectors are notoriously bad. Not as bad as printers, but still one of the worst bits of tech around. They routinely pixelate slides and wash out colors. So my second tip is to keep your content high-contrast. That goes for your code examples, too, which we’ll get into in a minute.

If you want your slides to be a little less stark, play around with adjusting the color of the fonts a bit, or add in a few simple background shapes at a low opacity to create a little bit of texture on your slides. The key here is to keep things subtle so as not to distract the audience.

Two things you should try to include on every slide is your name or online handle (usually a Twitter handle) and the hashtag for the event. Even if you’re not an avid Twitter user, there’s a good chance that attendees will be tweeting about the event and you want to make sure you get the attribution you deserve.

My recommendation is to include both near the bottom of the slide, out of the main content’s way. Reducing the contrast of both elements can be helpful, too.

As far as content goes, make sure there’s breathing room on each slide. Don’t try to cram too much information into any one slide. A good rule of thumb is one idea per slide, use as many slides as necessary to encapsulate all of those ideas.

Most of the terrible PowerPoints and decks that people point to are ones that try to shove a ton of content onto a slide. Ever see a slide like this?

That’s a classic example of trying to make slides work too hard. Pare down those ideas into single slides and talk about the progression between those ideas instead of trying to show it all visually.

Including code

Technical talks live and die by their code examples. The audience is there to learn something new, and they want code they can take away from the talk and use once they get back to the office. Your job is to make those code examples easy to understand so that no one’s left scratching their head.

There are typically three ways to do this:

Live coding
Include images of the code
Include actual code as text

Although some people can pull it off, I’m not a fan of live coding during tech talks. There are simply too many things that can go wrong. Simply switching between apps is a nightmare, not to mention things like bugs, frozen apps, typos, and more.

Some people solve the problems of live coding by using pre-built snippets that are triggered via keywords or keyboard shortcuts (think Emmet), but I believe that introduces other problems: Mainly that snippets expand quickly and attendees are constantly trying to figure out what just happened.

Therefore, I highly recommend either including an image of the code and explaining what’s in it, or including code examples as actual text in your presentation.

Including code as actual text has the added benefit of it being copyable (yes, that’s a word) by attendees if your slides are shared after your talk. You can also style the code any way you want. The drawback of using actual text is usually syntax highlighting. Copying and pasting code from you text editor into Keynote, PowerPoint, or Google Slides can have some unwanted side effects, so you may spend an unreasonable amount of time manually formatting your examples and fixing syntax highlighting. There are tools out there to help ease the pain, but your mileage may vary.

The easiest way to include code examples is by using images. Taking a screenshot of your code editor is a quick way to add code to your slides. Another popular choice is to use a tool like Carbon, which gives you beautiful screenshots with a bunch of options for formatting.

Regardless of which method you use, you need to keep a few things in mind to make sure your audience can get what they need from your code examples.

Use high-contrast themes so that everyone can clearly see your code. The typical dark theme favored by developers does not translate well when projected, and I’ve fielded many complaints from attendees when using dark themes. If you’re using something like Carbon, the One Light theme is a good way to go.
Use line numbers so that you can easily refer to specific lines of code. It’ll reduce the mental overhead on the audience and give attendees waypoints to right down and refer to later.
Show what changes between code examples. When adding code to an example, highlight that code (or dim the rest of it) so that attendees know exactly what changed.

Finally, you should try to include a link to all of the code examples if possible. Set up a collection on CodePen, throw up a landing page on your own site, or link out to a gist on GitHub. Then link to it using an easy to read and easy to remember URL. Bitly can be your friend here. Sharing your code on CodePen or via GitHub has the added benefit of expanding your network and elevating your profile as a developer. You never know what code will get a ton of stars and open up doors in your career.

Avoiding pitfalls

My last bit of advice is around preventing some of the more common problems when dealing with slides. Most of these problems can be avoided by communicating early and often with event organizers. See if they have any requirements for slides and make sure you account for them. Some of the more common things to ask about are:

What machine will be running the slides. Mac, PC, yours, theirs, etc.
What aspect ratio is used by the projector e.g. is it standard 4:3 or wide 16:9
Whether or not there will be a hard-wired internet connection on stage, which can effect live coding or linked resources
Whether or not you can use custom fonts
Whether or not you can include video and audio

Knowing the limitations of the venue will help you create a successful talk. They may be frustrating at the time, but constraints are almost always a good thing and can help you refine your ideas and how you present them.

Oh, and always carry power cords, dongles, and a clicker with you. The event may have their own, but they are usually the first things to go missing or break.

Again, public speaking isn’t for everyone. But it is an amazing way to share your ideas, lessons you’ve learned, and connect with other people in the industry. It can be stressful to prepare a talk and hop up on stage, but by following these guidelines you can reduce a lot of that stress and ensure that things run smoothly once you’re in front of your audience.

.plug-cta-button { display: block; margin: 0 auto; width: 250px; height: 55px; background-color: #764abc; border-radius: 8px; color: #fff !important; font-family: proxima-nova, sans-serif; font-size: 16px; font-weight: 800; text-decoration: none; text-align: center; line-height: 55px } #plug-tabs > ul { display: flex; border-bottom: 1px solid gray; list-style: none; padding: 0; } #plug-tabs > ul li a, #plug-tabs > ul li a:active, #plug-tabs > ul li a:hover { display: block; padding: 0.25rem 1rem; text-decoration: none; } #plug-tabs .ui-tabs-active { border-top-right-radius: 8px; border-top-left-radius: 8px; border: 1px solid gray; border-bottom: 1px solid white; margin-bottom: -1px; } #plug-tabs pre { margin: 0 0 1rem 0; } window.addEventListener('load', function() { jQuery("#plug-tabs").tabs(); });

Get set up with LogRocket's modern error tracking in minutes:

Visit https://logrocket.com/signup/ to get an app ID
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not server-side
- npm
- Script tag
$ npm i --save logrocket

// Code:

import LogRocket from 'logrocket'; LogRocket.init('app/id');

// Add to your HTML:

(Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- NgRx middleware
- Vuex plugin

Get started now

.share-icon.share-twitter span:first-child { background-image: url("https://blog.logrocket.com/wp-content/themes/logrocket/assets/svgs/share-twitter.svg"); } .share-icon.share-reddit span:first-child { background-image: url("https://blog.logrocket.com/wp-content/themes/logrocket/assets/svgs/share-reddit.svg"); } .share-icon.share-linkedin span:first-child { background-image: url("https://blog.logrocket.com/wp-content/themes/logrocket/assets/svgs/share-linkedin.svg"); } .share-icon.share-facebook span:first-child { background-image: url("https://blog.logrocket.com/wp-content/themes/logrocket/assets/svgs/share-facebook.svg"); }

Stop guessing about your digital experience with LogRocket

[

Get started for free

](https://lp.logrocket.com/blg/signup)

@media all and (max-width: 750px) { .footer-cta-logo-container {display:none !important;} .footer-cta-container h2 {width: 90% !important; padding-top: 50px !important;} .footer-cta-button {width: 40% !important;} } .footer-cta-container {border-radius: 20px;background: linear-gradient(90.32deg, #8F00FF 0.28%, rgba(143, 0, 255, 0) 99.72%), #764ABC; box-shadow: 0px 64px 74px 0px #764ABC40; padding-bottom: 30px; width: 95%; margin: 0 auto 60px auto; position: relative; margin-top: 3rem; } .footer-cta-tr {position: absolute; top: 30px; right: 30px; } .footer-cta-bl {position: absolute; bottom: 30px; left: 30px; } .footer-cta-bl {} .footer-cta-logo-container { width: 20%; padding: 10px 15px; display:block; margin: 0 auto; position: relative; background: #fafafa; border-radius: 0 0 20px 20px; } .footer-cta-logo-container::before { content: ""; position: absolute; top: 0px; height: 50px; left: -25px; width: 25px; border-top-right-radius: 25px; box-shadow: 0 -25px 0 0 #fafafa; } .footer-cta-logo-container::after { content: ""; position: absolute; top: 0px; height: 50px; right: -25px; width: 25px; border-top-left-radius: 25px; box-shadow: 0 -25px 0 0 #fafafa; } .footer-cta-container h2 {color: #ffffff; text-align: center; width: 70%; position: relative; margin: 40px auto;} .footer-cta-container a {text-decoration: none;} .footer-cta-logo-container img {display: block; margin: 0 auto; padding: 10px; max-width: 150px;} .footer-cta-br {position: absolute; left: 5px; bottom: 5px;} .footer-cta-button {padding: 10px 20px; border: 1px solid #ffffff; width: 20%; border-radius: 20px; color: #ffffff; position: relative; display:block; margin: 0 auto 20px auto; text-align: center; text-decoration: none;}

Should you bet on Valdi instead of React Native?

](https://blog.logrocket.com/valdi-instead-react-native/)

Valdi skips the JavaScript runtime by compiling TypeScript to native views. Learn how it compares to React Native’s new architecture and when the trade-off makes sense.

Ikeh Akinyemi

Dec 30, 2025 ⋅ 7 min read

[

8 frontend development trends 2026

The 8 trends that will define web development in 2026

](https://blog.logrocket.com/8-trends-web-dev-2026/)

What trends will define web development in 2026? Check out the eight most important trends of the year, from AI-first development to TypeScript’s takeover.

David Omotayo

Dec 30, 2025 ⋅ 6 min read

[

AI First Debugging

AI-first debugging: Tools and techniques for faster root cause analysis

](https://blog.logrocket.com/ai-debugging/)

AI-first debugging augments traditional debugging with log clustering, pattern recognition, and faster root cause analysis. Learn where AI helps, where it fails, and how to use it safely in production.

Alexander Godwin

Dec 29, 2025 ⋅ 6 min read

[

Container queries in 2026: Powerful, but not a silver bullet

](https://blog.logrocket.com/container-queries-2026/)

Container queries let components respond to their own layout context instead of the viewport. This article explores how they work and where they fit alongside media queries.

Sebastian Weber

Dec 26, 2025 ⋅ 12 min read

View all posts

#comments .comment .reply::after { background-image: url("https://blog.logrocket.com/wp-content/themes/logrocket/assets/svgs/reply.svg"); background-repeat: no-repeat; }

Leave a ReplyCancel reply

document.addEventListener('DOMContentLoaded', function () { var commentForms = document.getElementsByClassName('jetpack_remote_comment'); for (var i = 0; i < commentForms.length; i++) { commentForms[i].allowTransparency = false; commentForms[i].scrolling = 'no'; } });

{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/logrocket/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}

Hey there, want to help make our blog better?

Yea No Thanks

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

{{{ data.beforeForm }}} {{{ data.afterForm }}}

{{{ data.renderFieldsMarkedRequired() }}}

{{{ data.beforeFields }}} {{{ data.afterFields }}}

{{{ data.beforeField }}} {{{ data.afterField }}}

{{{ nfi18n.formHoneypot }}}

{{{ data.beforeField }}} <# /* * Render our input limit section if that setting exists. */ #>

<# /* * Render our error section if we have an error. */ #>

<# /* * Render any custom HTML after our field. */ #> {{{ data.afterField }}}

<# /* * This is our main field template. It's called for every field type. * Note that must have ONE top-level, wrapping element. i.e. a div/span/etc that wraps all of the template. */ #> <# /* * Render our label. */ #> {{{ data.renderLabel() }}} <# /* * Render our field element. Uses the template for the field being rendered. */ #>

{{{ data.renderElement() }}}

<# /* * Render our Description Text. */ #> {{{ data.renderDescText() }}}

{{{ data.renderElement() }}}

<# if ( data.type === "listcheckbox" || data.type === "listradio" || data.type === "listimage" || data.type === "date" || data.type === "starrating" ) { #> {{{ ( data.maybeFilterHTML() === 'true' ) ? _.escape( data.label ) : data.label }}} {{{ ( 'undefined' != typeof data.required && 1 == data.required ) ? '*' : '' }}} {{{ data.maybeRenderHelp() }}} <# } else { #> {{{ ( data.maybeFilterHTML() === 'true' ) ? _.escape( data.label ) : data.label }}} {{{ ( 'undefined' != typeof data.required && 1 == data.required ) ? '*' : '' }}} {{{ data.maybeRenderHelp() }}} <# } #>

{{{ data.msg }}}

{{{ data.currentCount() }}} {{{ nfi18n.of }}} {{{ data.input_limit }}} {{{ data.input_limit_msg }}} <# let myType = data.type if('save'== data.type){ myType = 'button' } #> {{{ ( data.maybeFilterHTML() === 'true' ) ? _.escape( data.label ) : data.label }}}

Practical tips for better tech talk slides - LogRocket Blog

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

Practical tips for better tech talk slides