import sys from ortools.constraint_solver import pywrapcp # By default, solve the 8x8 problem. n = 8...

<codeware/>how to present code

your slides are not your IDE

$> not your console either

here are five rules forpresenting code

rule 1:$ use monospaced font$

monospace

proportional

monospace

proportional

fixed or variable

var power = function(base, exponent) { var result = 1; for (var count = 0; count < exponent; count++) result *= base; return result;};

monospace

proportional

var power = function(base, exponent) { var result = 1; for (var count = 0; count < exponent; count++) result *= base; return result;};

monospace

proportional

monospacemonospaced fontshave better readability when presenting code

proportional

monospace

proportional it is harder to follow code with proportional fonts

monospaced fontshave better readability when presenting code

use monospaced fontsfor code readability

rule 2:$ use big fonts$

presenting for a big audience?

$ this is not your desktop monitor$ font size should be bigger$

I mean BIGGERthan your think

I really mean BIGGER than your think

console.log(“even BIGGER where possible”)

console .log(“use line breaks”)

<body> <button onClick=“coolFunction()” autofocus>too small</button></body>

<body> <button onClick=“coolFunction()” autofocus> same but BIGGER </button></body>

BIGGER is betterhow do you expect people in the back to read this?

rule 3:$ smart syntax highlighting$

this is not your IDEuse syntax highlighting only where needed

Presenting code on your slides usually results in a wall of text.Highlight only the specific parts you want your audience to focus on.

3 slides example - Ruby map function

names = ['rey', 'fin', 'poe']

names.map! {|name| name.capitalize }

puts names

# output Rey Fin Poe

rule 4:$ using ellipsis…$

import sys

from ortools.constraint_solver import pywrapcp

# By default, solve the 8x8 problem.n = 8 if len(sys.argv) < 2 else int(sys.argv[1])

# Creates the solver.solver = pywrapcp.Solver("n-queens")# Creates the variables.# The array index is the row, and the value is the column.queens = [solver.IntVar(0, n - 1, "x%i" % i) for i in range(n)]# Creates the constraints.

# All columns must be different.# (The "not on the same row" constraint is implicit from the array we're# using to store our variables; since no two elements of an array# can have the same index, there can be no queens with the same row.)solver.Add(solver.AllDifferent(queens))

# No two queens can be on the same diagonal.solver.Add(solver.AllDifferent([queens[i] + i for i in range(n)]))solver.Add(solver.AllDifferent([queens[i] - i for i in range(n)]))

db = solver.Phase(queens, solver.CHOOSE_MIN_SIZE_LOWEST_MAX, solver.ASSIGN_CENTER_VALUE)

solver.NewSearch(db)

# Iterates through the solutions, displaying each.num_solutions = 0while solver.NextSolution(): queen_columns = [int(queens[i].Value()) for i in range(n)]

# Displays the solution just computed. for i in range(n): for j in range(n): if queen_columns[i] == j: print "Q", else: print "_", print print num_solutions += 1

solver.EndSearch()

printprint "Solutions found:", num_solutionsprint "Time:", solver.WallTime(), "ms"

Solving the N-queens Problem

import sys

solver.EndSearch()

what’s the point in presenting all you code if people can’t follow?

import sys

solver.EndSearch()

keep just the relevant code

import sys

solver.EndSearch()

use ellipsis…

# Creates the solver.solver = pywrapcp.Solver("n-queens")...

solver.EndSearch()

# Creates the solver.solver = pywrapcp.Solver("n-queens")...

solver.EndSearch()

the focus is now on the algorithm not the boilerplate

rule 5:$ use screen annotation$

do you want to focus your audience’s attention on a specific area in the screen?

thinking of using a laser pointer?

do you expect your audience to track this?

always create slides as if you are the person sitting in the last row of the conference hall.use screen annotations.

putting it all together$ ECMAScript 2015 Promise example$

the next slides will introduce the ECMAScript 2015 Promise Object

fetchGraphData(graphName, function(error, graphData)) { if (error) { // handle error } // ... renderGraph(graphData, function(error)) { if (error) { // handle error } // ... notifyClients(msg, result, function(error, response)) { if (error) { // handle error } // ... }); });}); Typical JS code results with

many nested callbacks

fetchGraphData(graphName, function(error, graphData)) { if (error) { // handle error } // ... renderGraph(graphData, function(error)) { if (error) { // handle error } // ... notifyClients(msg, result, function(error, response)) { if (error) { // handle error } // ... }); });}); makes it hard to follow

fetchGraphData(graphName, function(error, graphData)) { if (error) { // handle error } // ... renderGraph(graphData, function(error)) { if (error) { // handle error } // ... notifyClients(msg, result, function(error, response)) { if (error) { // handle error } // ... }); });}); error handling is duplicated

ECMAScript 2015 Promiseto the rescue!

function fetchGraphData(graphName) { return new Promise(function(resolve, reject)) { let request = new XMLHttpRequest(); ...

// XMLHttpRequest to server request.open(‘GET’, ‘http://example.com', true); request.onload = function() { if (request.status == 200) { resolve(request.response); } else { reject(new Error(request.status)); } };});

The Promise object is used for deferred and asynchronous computations

resolve is called once operation has completed successfully

reject is called if the operation has been rejected

fetchGraphData(graphName) .then(renderGraph) .then(notifyClients) .catch(function(error)) { console.log(“Error:”, error) });

Calling a Promise

Promise code is easy to read

you can nest multiple Promise calls

Calling a Promise

one error handling call

remember! your slides are not your IDE

codeware - 5 rules

monospacedfont

codeware - 5 rules

monospacedfont BIG

codeware - 5 rules

monospacedfont BIG

smart syntax

highlighting

codeware - 5 rules

monospacedfont BIG

smart syntax

highlighting

ellipsis...

monospacedfont

codeware - 5 rules

BIGsmart syntax

highlighting

ellipsis...screen

annotation

CreditsThe Noun Project: Check by useiconic.com Close by Thomas Drach

N-queens problem: OR-tools solution to the N-queens problem. Inspired by Hakan Kjellerstrand's solution at http://www.hakank.org/google_or_tools/, which is licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0

https://developers.google.com/optimization/puzzles/queens#python

for more tips follow me on twitter and slideshare

import sys from ortools.constraint_solver import pywrapcp # By default, solve the 8x8 problem. n = 8...

Documents

Export Export ---- Import Import Import Bureau Of ... · PDF fileExport Export ---- Import Import Import Bureau Of IndiaBureau Of IndiaBureau Of India 2nd Floor, -166, shrenikpark,

Infographic: Import Finance Facility – Import Letter of Credit

Data Export and Import - Docusnap · Data Export and Import Docusnap Connect (Export) / CSV Import

import javax.swing.; // Packages usedfacultyweb.kennesaw.edu/tfallon/ecet3810/AUVCode.pdf · import javax.swing.; // Packages used import java.awt.; import java.awt.event.; import

PySession4 - it.uu.se filePySession4 February 5, 2019 In [1]: import pandas as pd import numpy as np import matplotlib.pyplot as plt import sklearn.preprocessing as skl_pre import

MAJETEK Systém pro evidenci majetku a zpracování inventurweb.quick.cz › mojequick › cdwr › manuals › Majetek.pdf · CodeWare s.r.o. 6 2.3. Spuštění programu Program

CIM Import Common Information Model Import

or How to Program JavaFX Easily - bcs.org · Copyright © 2013 Russel Winder 16 import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import

917.277520 - Craftsman Import · 917.277520 - Craftsman Import

Codeware User's Manual

Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

Learning 0MQ - Read the Docs · trying out examples. ... Learning 0MQ, Release 1.0 ØMQ sockets zmq sockets are created from the initialized context: ... if len(sys.argv)>1:

Import | Ausgezeichnet IMPORT-VERSAND MIT FEDEXimages.fedex.com/downloads/downloadcenter/learn/2016-Master-Repo… · 02 i import | ausgezeichnet i import-versand mit fedex import-versand

PyCUDA - Elefantel = dot(x, y).get() ... import pycuda.driver as cuda import pycuda.autoinit import numpy from pycuda.curandom import XORWOWRandomNumberGenerator

Welcome [] · Zülküf Küçüközer TriangleCanvas.java import javax.microedition.lcdui.Graphics; import javax.microedition.lcdui.game.; import javax.microedition.m3g.;

LAMPIRAN A import java.util.; import java.io.; import java.net.; import java.lang.; import com.dalsemi.system.; import com.dalsemi.shell.server.; public class Utama { Sistem

· Import from East (2.1.1+2_1.2+2.1.3+2.1.4) Import from Russia Federation Import from Ukraine Import from Uzbekistan Import from Kazakhstan Import from Turkmenistan Import from

Polish Import and Export of Food. IMPORT IMPORT IMPORT BRINGING A PRODUCT OR SERVICE FROM ONE COUNTRY INTO ANOTHER INTO ANOTHER

Systems Integration Custom Fabrication€¦ · Designs provided in Codeware Compress Software CATIA / Unigraphics NX. Stress Analysis. Finite Element Modeling. Reverse Engineering

Selenium WebDriver Recipes in Java - Amazon S3 · Introduction 2 import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import