1 Services for app hosting, how to plot a chart, what is JWT Deployment, charting, JWT 2 Agenda Deploying your app to the world Heroku vs Openshift Netlify vs Surge Hosting on google cloud Charting JWT 3 Deploying your application to the world - practices ● Multiple platforms to deploy your application (PaaS - platform as a service) ● Usually trough CI/CD (continuous integration and continuous delivery) pipeline ● Credentials stored on the server ● Application served on one server, DB on other and SSO on third ○ Microservices 4 Deploying your application using Heroku or Openshift ● Heroku and Openshift are Platforms as a Service for multiple languages ● Stable pipeline and logging services ● Possibility to hook directly to git repository with custom build commands so you don’t have to build your app before deploying it ● Heroku has free tier with limited bandwidth and running processes ● Openshift can be run on any server and used as a PaaS with free tier as well but needs to be resubscribed 5 Deploying your application using Netlify or Surge ● Netlify is directly connected to Git repository and can run specific commands limited to one running command ● Netlify allows to edit domain names as 3rd domain name level (your-app.netlify.com) ● Surge has no web service, everything is done through CLI ● Same as Netlify it allows changing domain as 3rd domain name level (your-app.surge.sh) 6 Hosting your application on google cloud ● Similar to Heroku and Openshift ● Comes with custom GIT repository ● Option to host API and frontend app from same service ● Pay as you go ○ You’ll pay for number of visits or API hits etc. ● Two options ○ Google cloud - multiple services not only for serving FE app ○ Firebase - frontend and android apps 7 https://plotly.com/javascript/react/ https://github.com/recharts/recharts https://nivo.rocks/components Charting in react ● Plotly ○ Made by company focused on data visualization and manipulation ○ Animations and data visualization out of the box ○ Covid trends ● Recharts ○ Easy to use ○ Builds on top of d3 ● Nivo ○ Huge selection of charts ○ Support for SVG, Canvas and plain HTML ○ Really nice documentation where you can test your code 8 https://uber.github.io/react-vis/examples/showcases/plots https://github.com/hshoff/vx Charting in react - continue ● Uber ○ Plot library build by uber company ○ Comes with a storybook to test your data ● VX ○ Direct connection to d3 in order to display data in React ○ Small bundle size ○ Aims to be a platform for your charts ● Victory ○ Easy to use ○ Very modular ● Examples https://codesandbox.io/s/recursing-hawking-wnbki9 9 https://tools.ietf.org/html/rfc7519 https://developer.okta.com/blog/2019/08/22/okta-authjs-pkce JWT ● It’s an open standard used for Authorization and Information exchange ● First auth server creates JWT token (doesn’t have to be anAPI server) ○ Header - contains type and signature method ○ Payload - the actual user data ○ Signature - header + payload + secret (can be priv/pub key) Signatures are not encryptions! ● Requests to server contains Bearer token as Authorization method (can also be stored in cookie, not ideal way) 10 https://siddharthac6.medium.com/json-web-token-jwt-the-right-way-of-implementing-with-node-js-65b8915d550e JWT - RS256 ● JWT provider uses private key to generate the JWT token ● API server uses public key of JWT provider to verify the token is correct 11 https://siddharthac6.medium.com/json-web-token-jwt-the-right-way-of-implementing-with-node-js-65b8915d550e JWT - HS256 ● JWT provider uses secret to sign the token ● API server same secret to verify the token 12 https://tools.ietf.org/html/rfc7519 Project update ● Let’s add a table to the project ● Let’s add a chart library to the project 13 ● 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 14 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 15 ● 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 16 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 17 ● 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 18 ● 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 19 ● 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? 20 ● 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 21 [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 22 ● 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 23 ● 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 24 ● 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 25 ● 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 26 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 27 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 28 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 29 Optional subheading Presentation title should not exceed two lines Presenter’s Name Title Presenter’s Name Title 30 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 31 32 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 33 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 34 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. 35 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. 36 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 37 Lorem ipsum dolor sit amet, consectetuer adipisc elit sed dia nibh? 38 Optional section marker or title 39 Optionalsectionmarkerortitle Lorem ipsum dolor sit amet, consectetuer adipisc elit? Corporate slide templates 40 This section includes: Agenda slide templates Content slide templates Quote slide templates What we’ll discuss today Agenda 41 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 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, 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 43 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 44 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 45 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 46 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 47 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 48 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 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, 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 50 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 51 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 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 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 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 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 54 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 55 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 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 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 57 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 58 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 59 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 60 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 61 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 62 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 63 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 64 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 65 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 66 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 67 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 68 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 69 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 70 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 71 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 72 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 73 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 74 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 75 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 76 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 77 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 78 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.