1 How to make less bugs Application testing 2 Agenda Unit vs integration vs e2e testing When to use? Differences React testing library vs Enzyme Npm auditing Project update 3 Unit vs integration vs e2e testing ● Unit ○ Enzyme + jest ○ Chai ○ Karma ○ Mocha ○ Jasmine ● Integration testing ○ Cypress ● E2e testing ○ Selenium 4 Enzyme ● Dead (no official support for react 17 https://github.com/enzymejs/enzyme/issues/2524) ● Was super popular ● Introduced snapshot tests ● Direct access to React state ● State update supports with `wrapper.update()` ● Different levels of renders (shallow, render, mount) https://gist.github.com/fokusferit/e4558d384e4e9cab95d04e5f35d4f913 5 React testing library ● Official support from React ● No direct access to React state ● Support of hook testing ● Support for async testing ● Element selectors with built-in functions https://testing-library.com/docs/queries/about#types-of-queries ● Perfect guidelines https://kentcdodds.com/blog/common-mistakes-with-react-testing-library 6 Snapshot testing ● Testing how your UI will actually look like (at least in the dom) ● Somewhat integration testing ● Prone to shipping bugs ● Can create huge snapshot files 7 Npm auditing ● Easy and fast security fixes ● Performs a check of available vulnerabilities ● If easy fix (by updating to newer version) is available it will provide it 8 Project update ● Any questions? ● Free time to code your UIs ● Free time to discuss any problems 9 ● Old ○ jQuery ○ Ajax ○ Single Session ○ Variables ○ IE drove it in the past ○ Lodash ○ Callback hell ○ Bootstrap ● New ○ Transpilers ○ JS is slowly moving towards functional programming - map, lambda, reduce, etc. ○ SSO with JWT ○ Improved Browser API ○ Dependency hell ○ Build tools - module based codebase ○ Multiple free and opensource design systems ○ Virtual DOM, component architecture, pure functions - React Javascript practices - old and new 10 Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Body headline Single sign on/out/only Popis problemu 11 ● Two scenarios ○ Single page web application ○ Library to used in any further project ● All build processes managed from one place ○ Easy use once we have everything all set up ● We want to use the newest javascript goodies ● Some framework so we have easier DOM manipulation ● One package manager Historie - aneb pred vice nez 5 lety 12 https://bower.io/blog/2017/how-to-migrate-away-from-bower/ ● Bower was the main place to go for packages ○ It is slowly dying and on 02 Oct 2017 was announced that users should migrate to something else ● First there was Grunt ○ On 11 January 2012 this first task runner was introduced, it was a breakthrough in frontend development. ○ Pros: Fairly simple, easy to use ○ Cons: Temporary files, piping one file trough multiple tasks was cumbersome ● Then there was Gulp.js ○ On 26 September 2013 was released taks runner that was heavily inspired by Grunt ○ Pros: Faster, file piping ○ Cons: Config can be really confusing to newcomers ● jQuery ○ Most hated and loved library to manipulate DOM Proc to selhalo 13 ● NPM took over because it simply had a lot more packages ● NPM also introduced several built in scripts, that ca be ran at certain point of installation/build ● Package managers now contain task runner ● Configs were too hard to maintain - few people really understood file piping ● Debugging of build process was not so easy ● Modern build tools have much better features ○ HTTP/2 code splitting ○ Built in minification ○ Built in sourcemaps ○ Tree shaking ○ And many more Dnesni stav - package manager / task runner 14 ● Yarn ○ Developed by Facebook ○ Supports workspaces - great for monorepos ○ Easier task runner and package installation ○ First to introduce lock file ● NPM ○ Developed by Google ○ Comes with node ○ Contains NPX ○ Convenient for larger teams spread across globe ● PNPN ○ Honorable mention - hard linking packages instead of downloading and installing Dnesni stav - build nastroje 15 ● Webpack ○ All purpose build tool ○ Extensive configuration options ○ Configuration is required ○ Extensible ● Parcel ○ Zero config file ● Rollup ○ Focus on building ES libraries Nutnost transpileru, co to je? 16 ● Babel ○ Javascript transpiler to provide backwards compatibility of new JS syntax quirks and fashion ○ Each file is parsed separately and compiled into native JavaScript ○ Huge collection of plugins - you can even write your own plugins ● Typescript ○ JavaScript flavor/superset with data types ○ Compiles into JavaScript ○ Custom plugins called Language Service Plugin - not that used as with babel Babel config 17 [1] https://www.npmjs.com/package/babel-plugin-import ● Multiple formats ○ JS, JSON, ES6 ● Option to write custom functions in plugins [1] ● BABEL_ENV to use different config per different environment ● Option to write config in package.json { "presets": [ [ "@babel/env", { "targets": "> 0.25%, not dead" } ], "@babel/react", ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ], "babel-plugin-lodash", "@babel/plugin-proposal-class-properties" ] } Scenar: Webova aplikace - Parcel vs Webpack 18 ● React application ● Dev server ○ Proxy to API ● HTML template ● Tree shaking ● One config to rule them all (dev vs prod) ● Custom envs from terminal/.env file ● Static files loader - images, styles Scenar: Knihovna - Rollup vs Webpack 19 ● React library ● Bundled to one file and to multiple files as well ● Externals ○ 3rd party libraries not bundled in final build ● Named vs Default exports ● Multiple environments ○ ESM, UMD, CommonJs Conclusion library 20 ● No native support for full ESM bundles ○ Webpack 5 promises to implement it ● Harder to set-up ● Easier to read Webpack ● Everything has to be done through plugins +/● Smaller bundle size ● Supports native ESM! ● Named exports ○ You need to list all named exports Rollup Conclusion - funny 21 ● Webpack is like VIM ○ Hard to setup and if something breaks you have to really understand it ○ But the things that can be done with it are almost limitless ● Parcel is like MS word ○ No need to configure anything ○ If you need to tweak something up, it’s really hard to do ● Rollup is like VS Code ○ One of the greatest software for one thing ○ Handles poorly web apps Many people experience our brand by seeing one of the thousands of presentations Red Hatters deliver each year. From Summit keynotes to conference-room sales meetings, we want our public face to be coherent and recognizable. Our content must be meaningful and relevant to our audiences. Our stories should be told in a clear, compelling way. Corporate slide templates 22 How to build an effective presentation https://pnt.redhat.com/pnt/p-611879/ Getting started with Google Slides https://gsuite.google.com/learning-center/products/slides/get-started/#!/ Red Hat brand standards https://www.redhat.com/en/about/brand/standards Red Hat brand assets https://pnt.redhat.com/pnt/b-420952/Brand_assets Updating the confidential designator: Update the designator in Google Slides by choosing “Slide,” then “Edit Master.” Copy the appropriate designation into the “Confidential designator” field in the upper right. Corporate slide templates 23 Red Hat associate and NDA partner use only, no further distribution Change the designator on the master slide to: CONFIDENTIAL Red Hat associate and NDA partner use only, No further distribution Use this designation for a confidential presentation intended only for the Red Hat associate(s) and partner(s) with signed NDA who receive the deck originally. The Red Hat and NDA partner associate(s) who receive this deck cannot share it with anyone—even other Red Hat and partner associate(s). Red Hat associates only Change the designator on the master slide to: CONFIDENTIAL Red Hat associates only Use this designation for a confidential presentation that can only be shared with Red Hat associates. The Red Hat associate(s) who receive this deck can share it with other Red Hat associate(s), but no one else. Red Hat associates only, no further distribution Change the designator on the master slide to: CONFIDENTIAL Red Hat associates only, No further distribution Use this designation for a confidential presentation intended only for the Red Hat associate(s) who receive it originally. The Red Hat associate(s) who receive this presentation cannot share it with anyone—inside or outside of Red Hat. QUICK TIP Update or remove the confidential designator on the master slide. QUICK TIP Update or remove the project number, event name or hashtag on the master slide. Corporate slide templates 24 This section includes: Title slide templates Closing slide templates Divider slide templates linkedin.com/company/red-hat youtube.com/user/RedHatVideos facebook.com/redhatinc twitter.com/RedHat Red Hat is the world’s leading provider of enterprise open source software solutions. Award-winning support, training, and consulting services make Red Hat a trusted adviser to the Fortune 500. Thank you 25 Optional subheading Presentation title should not exceed two lines Presenter’s Name Title Presenter’s Name Title 26 QUICK TIP If the presentation is not product focused, simply delete this. Do NOT insert the Red Hat logo here. If this is a product-focused deck, right click on the logo and using “Replace Image” insert the product logo of your choice. After replacing the image, right click and select “Reset Image”. Adjust spacing as needed. linkedin.com/company/red-hat youtube.com/user/RedHatVideos facebook.com/redhatinc twitter.com/RedHat Red Hat is the world’s leading provider of enterprise open source software solutions. Award-winning support, training, and consulting services make Red Hat a trusted adviser to the Fortune 500. Thank you 27 28 Optional subheading Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam Presentation title should not exceed three lines Presenter’s Name Title Optionalsectionmarkerortitle linkedin.com/in/karelhala linkedin.com/in/coufaltom github.com/karelhala github.com/tumido 29 Red Hat is the world’s leading provider of enterprise open source software solutions. Award-winning support, training, and consulting services make Red Hat a trusted adviser to the Fortune 500. Thank you Optionalsectionmarkerortitle 30 Optional section marker or title Optional supporting copy. Lorem ipsum dolor sit amet, consectetuer adipis elit, sed diam nonummy nibh euismod tincidunt ut laoreet. magna aliquam. Divider title limit to two lines QUICK TIP Try right clicking on the photo and using “Replace Image” to insert your own photo. You are also welcome to use this photo. 31 Optional section marker or title Optional supporting copy. Lorem ipsum dolor sit amet, consectetuer adipis elit, sed diam nonummy nibh euismod tincidunt ut laoreet. magna aliquam. Divider title limit to two lines QUICK TIP Try right clicking on the photo and using “Replace Image” to insert your own photo. You are also welcome to use this photo. 32 Optional section marker or title Divider title limit to two lines Optional supporting copy. Lorem ipsum dolor sit amet, consectetuer adipis elit, sed diam nonummy nibh euismod tincidunt ut laoreet. magna aliquam. QUICK TIP Try right clicking on the photo and using “Replace Image” to insert your own photo. You are also welcome to use this photo. Lorem ipsum dolor sit amet, consectetuer adipisc elit sed dia nibh? Optionalsectionmarkerortitle 33 Lorem ipsum dolor sit amet, consectetuer adipisc elit sed dia nibh? 34 Optional section marker or title 35 Optionalsectionmarkerortitle Lorem ipsum dolor sit amet, consectetuer adipisc elit? Corporate slide templates 36 This section includes: Agenda slide templates Content slide templates Quote slide templates What we’ll discuss today Agenda 37 Source: Insert source data here Insert source data here Insert source data here Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Label Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 38 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam. 00% Lorem ipsum dolor sit amet 00% Lorem ipsum dolor sit amet 00% Lorem ipsum dolor sit amet 00% Lorem ipsum dolor sit amet 00% Lorem ipsum dolor sit amet 00% Lorem ipsum dolor sit amet QUICK TIP To edit a chart, select it and click the dropdown arrow in the top right. Select “Open source.” The legend will need to be updated manually. What we’ll discuss today Agenda 39 Source: Insert source data here Insert source data here Insert source data here Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit Optional section marker or title 40 QUICK TIP Insert image in this designated area, deleting the shaded background. Keep the left and right margins clear to maintain the open feel in accordance with the brand. If no subheading is needed, delete the subheading text, and the content can extend into the lighter shaded area. Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Optional section marker or title 41 Source: Insert source data here Insert source data here Insert source data here QUICK TIP Insert image in this designated area, deleting the shaded background. Keep the left, right, top, and bottom margins clear to maintain the open feel in accordance with the brand. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 42 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. Etiam interdum nunc non venenatis rutrum. Phasellus venenatis, sem ac vulputate facilisis, lacus augue vehicula quam. Aenean eleifend laoreet eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. ▸ Etiam interdum nunc non venenatis rutrum ▸ Phasellus venenatis sem ac vulputate facilisis ▸ Aenean eleifend laoreet eros eu molestie arcu tempus ▸ Quisque vitae nisl accumsan aliquet Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 43 Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. Etiam interdum nunc non venenatis rutrum. Phasellus venenatis, sem ac vulputate facilisis, lacus augue vehicula quam. Aenean eleifend laoreet eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. ▸ Etiam interdum nunc non venenatis rutrum ▸ Phasellus venenatis sem ac vulputate facilisis ▸ Aenean eleifend laoreet eros eu molestie arcu tempus ▸ Quisque vitae nisl accumsan aliquet Optional section marker or title 44 Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. Etiam interdum nunc non venenatis rutrum. Phasellus venenatis, sem ac vulputate facilisis, lacus augue vehicula quam. Aenean eleifend laoreet eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. ▸ Etiam interdum nunc non venenatis rutrum ▸ Phasellus venenatis sem ac vulputate facilisis ▸ Aenean eleifend laoreet eros eu molestie arcu tempus ▸ Quisque vitae nisl accumsan aliquet Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 45 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. Etiam interdum nunc non venenatis. ▸ Etiam interdum nunc non venenatis rutrum ▸ Phasellus venenatis sem ac vulputate facilisis ▸ Aenean eleifend laoreet eros eu molestie arcu tempus ▸ Quisque vitae nisl accumsan aliquet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. Etiam interdum nunc non venenatis. ▸ Etiam interdum nunc non venenatis rutrum ▸ Phasellus venenatis sem ac vulputate facilisis ▸ Aenean eleifend laoreet eros eu molestie arcu tempus ▸ Quisque vitae nisl accumsan aliquet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. Etiam interdum nunc non venenatis rutrum. Phasellus venenatis, sem ac vulputate facilisis, lacus augue vehicula quam. Optional section marker or title 46 Source: Insert source data here Insert source data here Insert source data here QUICK TIP Try right clicking on the photo and using “Replace Image” to insert your own photo. You are also welcome to use this photo. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 47 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. QUICK TIP Try right clicking on the photo and using “Replace Image” to insert your own photo. You are also welcome to use this photo. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. Etiam interdum nunc non venenatis rutrum. Phasellus venenatis, sem ac vulputate facilisis, lacus augue vehicula quam, pellentesque pulvinar elit magna posuere magna. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 48 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh mod tincidunt. Body headlineBody headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh mod tincidunt. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh mod tincidunt. QUICK TIP Try right clicking on the photo and using “Replace Image” to insert your own photo. You are also welcome to use this photo. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 49 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh mod tincidunt. Body headlineBody headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh mod tincidunt. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh mod tincidunt. QUICK TIP Try right clicking on the icon and using “Replace Image” to insert your own icons. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 50 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Body headline QUICK TIP Try right clicking on the icon and using “Replace Image” to insert your own icons. Body headline Lorem ipsum dolor sit amet, consectet adipiscing elit sed dia. Body headline Lorem ipsum dolor sit amet, consectet adipiscing elit sed dia. Body headline Lorem ipsum dolor sit amet, consectet adipiscing elit sed dia. Body headline Lorem ipsum dolor sit amet, consectet adipiscing elit sed dia. Lorem ipsum dolor sit amet, consectetuer adipiscing elit 51 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here QUICK TIP Try right clicking on the icon and using “Replace Image” to insert your own icon. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 52 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. Body headline QUICK TIP Try right clicking on the icon and using “Replace Image” to insert your own icons. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 53 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Body headline QUICK TIP Try right clicking on the icon and using “Replace Image” to insert your own icons. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 54 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Label Label Label Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 55 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 56 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore Optional section marker or title 57 Source: Insert source data here Insert source data here Insert source data here “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id auctor dui. Ut neque sem, convallis sit amet ultrices et, facilisis vestibulum ligula. Donec euismod elementum erat vitae fermentum. Mauris hendrerit maximus bibendum.” John Doe CTO, Acme Unlimited QUICK TIP Using a photo with the large quote is optional. Try right clicking on the photo and using “Replace Image” to insert your own photo. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 58 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here John Doe CTO, Acme Unlimited “Lorem ipsum dolor sit amet, consectetuer adipis elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam.” John Doe CTO, Acme Unlimited “Lorem ipsum dolor sit amet, consectetuer adipis elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam.” Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 59 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here John Doe CTO, Acme Unlimited Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. John Doe CTO, Acme Unlimited John Doe CTO, Acme Unlimited Optional section marker or title 60 This section includes: Data slide templates Table slide templates Timeline slide templates Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 61 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. 65% Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. 82% QUICK TIP Use darker shades of Red Hat red to differentiate between data points. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 62 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. 00% 00% QUICK TIP To edit a chart, select it and click the dropdown arrow in the top right. Select “Open source.” The percentage will need to be updated manually. 00% 00% 00% Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 63 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. QUICK TIP To edit a chart, select it and click the dropdown arrow in the top right. Select “Open source.” The percentage will need to be updated manually. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 64 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam. 000 000 Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 65 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here 000 000 000 Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Body headline Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 66 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here QUICK TIP To edit a chart, select it and click the dropdown arrow in the top right. Select “Open source.” Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 67 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here 01 Title of chart 00% Lorem ipsum 00% Lorem ipsum 00% Lorem ipsum 00% Lorem ipsum 00% Lorem ipsum 00% Lorem ipsum Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet QUICK TIP Use the “Width Scale” in the “Size & Position” pane of the format options panel to adjust the percentage of the bar. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 68 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Source: Insert source data here Insert source data here Insert source data here 00% Lorem ipsum 00% Lorem ipsum 00% Lorem ipsum 00% Lorem ipsum 00% Lorem ipsum 00% Lorem ipsum 00% Lorem ipsum 00% Lorem ipsum Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 01 Title of chart QUICK TIP Use the “Width Scale” in the “Size & Position” pane of the format options panel to adjust the percentage of the bar. Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 69 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Source: Insert source data here Insert source data here Insert source data here Column header two lines maximum Column header two lines maximum Column header two lines maximum Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines 01 Title of table Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 70 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Column header two lines maximum Column header two lines maximum Column header two lines maximum Column header two lines maximum Column header two lines maximum Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Row header with two lines maximum Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines Body cell should be limited to two lines 01 Title of table Optional section marker or title Lorem ipsum dolor sit amet, consectetuer adipiscing elit 71 Duis vel mauris aliquet, aliquam velit eu, euismod lorem. Source: Insert source data here Insert source data here Insert source data here Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, diam nonummy nibh euismod. 20XX 20XX Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, diam nonummy nibh euismod. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, diam nonummy nibh euismod. 20XX 20XX Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, diam nonummy nibh euismod. Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, diam nonummy nibh euismod. 20XX 20XX Body headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit, diam nonummy nibh euismod. Optional section marker or title 72 Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sedie diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip. Heading QUICK TIP Try right clicking on the photo and using “Replace Image” to insert your own photo. You are also welcome to use this photo. Optional section marker or title 73 Heading Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolor aliquam. 20XX Heading Lorem ipsum dolor sit amet, consectet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolor aliquam. Heading Lorem ipsum dolor sit amet, consectet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolor aliquam. 20XX QUICK TIP Try right clicking on the photo and using “Replace Image” to insert your own photo. You are also welcome to use this photo. Optional section marker or title 74 Heading Source: Insert source data here Insert source data here Insert source data here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sedie diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip. QUICK TIP Try right clicking on the photo and using “Replace Image” to insert your own photo. You are also welcome to use this photo.