SlideShare a Scribd company logo
<codeware/>
how to present code
your slides are not your IDE
$> not your console either
here are five rules for
presenting code
rule 1:
$ use monospaced font
$
or
monospace
proportional
monospace
proportional
fixed or variable
fixed or variable
var power = function(base, exponent) {
var result = 1;
for (var count = 0; count < exponent; count++)
result *= base;
return result;
};
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;
};
var power = function(base, exponent) {
var result = 1;
for (var count = 0; count < exponent; count++)
result *= base;
return result;
};
monospace
proportional
monospace
monospaced fonts
have better readability
when presenting code
proportional
monospace
proportional it is harder to follow code
with proportional fonts
monospaced fonts
have better readability
when presenting code
use monospaced fonts
for 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 BIGGER
than 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 IDE
use syntax highlighting
only where needed
this is not your IDE
use 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.
Presenting code on your slides
usually results in a wall of text.
Highlight only the

specific parts you want your
audience to focus on.
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
1
2
3
names = ['rey', 'fin', 'poe']
names.map! {|name| name.capitalize }
puts names
3 slides example - Ruby map function
1
2
3
names = ['rey', 'fin', 'poe']
names.map! {|name| name.capitalize }
puts names
3 slides example - Ruby map function
1
2
3
names = ['rey', 'fin', 'poe']
names.map! {|name| name.capitalize }
puts names
# output
Rey
Fin
Poe
3 slides example - Ruby map function
1
2
3
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 = 0
while 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()
print
print "Solutions found:", num_solutions
print "Time:", solver.WallTime(), "ms"
Solving the N-queens Problem
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 = 0
while 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()
print
print "Solutions found:", num_solutions
print "Time:", solver.WallTime(), "ms"
Solving the N-queens Problem
what’s the point in presenting all you code if
people can’t follow?
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 = 0
while 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()
print
print "Solutions found:", num_solutions
print "Time:", solver.WallTime(), "ms"
Solving the N-queens Problem
keep just the relevant code
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 = 0
while 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()
print
print "Solutions found:", num_solutions
print "Time:", solver.WallTime(), "ms"
Solving the N-queens Problem
use ellipsis…
...
# Creates the solver.
solver = pywrapcp.Solver("n-queens")
...
# Iterates through the solutions, displaying each.
num_solutions = 0
while 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()
...
Solving the N-queens Problem
...
# Creates the solver.
solver = pywrapcp.Solver("n-queens")
...
# Iterates through the solutions, displaying each.
num_solutions = 0
while 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()
...
Solving the N-queens Problem
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.
always create slides as if
you are the person sitting

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

in the last row of the
conference hall.
use screen annotations.
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
$
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 Promise
to 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
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));
}
};
});
resolve is called once operation has completed
successfully
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));
}
};
});
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
fetchGraphData(graphName)
.then(renderGraph)
.then(notifyClients)
.catch(function(error)) {
console.log(“Error:”, error)
});
you can nest multiple Promise calls
Calling a Promise
fetchGraphData(graphName)
.then(renderGraph)
.then(notifyClients)
.catch(function(error)) {
console.log(“Error:”, error)
});
Calling a Promise
one error handling call
remember!

your slides are not your IDE
1
codeware - 5 rules
2 3
4 5
codeware - 5 rules
2 3
4 5
monospaced
font
codeware - 5 rules
3
4 5
monospaced
font BIG
codeware - 5 rules
4 5
monospaced
font BIG
smart syntax

highlighting
codeware - 5 rules
5
monospaced
font BIG
smart syntax
highlighting
ellipsis...
monospaced
font
codeware - 5 rules
BIG
smart syntax
highlighting
ellipsis...
screen
annotation
Credits
The 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

More Related Content

What's hot

DDD - 3 - Domain Driven Design: Event sourcing.pdf
DDD - 3 - Domain Driven Design: Event sourcing.pdfDDD - 3 - Domain Driven Design: Event sourcing.pdf
DDD - 3 - Domain Driven Design: Event sourcing.pdf
Eleonora Ciceri
 
Write your Helm charts as a professional. Design templates and inheritance. B...
Write your Helm charts as a professional. Design templates and inheritance. B...Write your Helm charts as a professional. Design templates and inheritance. B...
Write your Helm charts as a professional. Design templates and inheritance. B...
Volodymyr Shynkar
 
Docker: From Zero to Hero
Docker: From Zero to HeroDocker: From Zero to Hero
Docker: From Zero to Hero
fazalraja
 
Key-Value NoSQL Database
Key-Value NoSQL DatabaseKey-Value NoSQL Database
Key-Value NoSQL Database
Heman Hosainpana
 
Big Data Redis Mongodb Dynamodb Sharding
Big Data Redis Mongodb Dynamodb ShardingBig Data Redis Mongodb Dynamodb Sharding
Big Data Redis Mongodb Dynamodb Sharding
Araf Karsh Hamid
 
Serving models using KFServing
Serving models using KFServingServing models using KFServing
Serving models using KFServing
Theofilos Papapanagiotou
 
Chef for DevOps - an Introduction
Chef for DevOps - an IntroductionChef for DevOps - an Introduction
Chef for DevOps - an Introduction
Sanjeev Sharma
 
MongoDB and hadoop
MongoDB and hadoopMongoDB and hadoop
MongoDB and hadoop
Steven Francia
 
Event Sourcing & CQRS, Kafka, Rabbit MQ
Event Sourcing & CQRS, Kafka, Rabbit MQEvent Sourcing & CQRS, Kafka, Rabbit MQ
Event Sourcing & CQRS, Kafka, Rabbit MQ
Araf Karsh Hamid
 
Building Applications with a Graph Database
Building Applications with a Graph DatabaseBuilding Applications with a Graph Database
Building Applications with a Graph Database
Tobias Lindaaker
 
Patterns for distributed systems
Patterns for distributed systemsPatterns for distributed systems
Patterns for distributed systems
Paulo Gandra de Sousa
 
Analyzing network infrastructure with Neo4j
Analyzing network infrastructure with Neo4jAnalyzing network infrastructure with Neo4j
Analyzing network infrastructure with Neo4j
Yaroslav Lukyanov
 
DevOps @ OpenShift Online
DevOps @ OpenShift OnlineDevOps @ OpenShift Online
DevOps @ OpenShift Online
OpenShift Origin
 
Introduction to Docker
Introduction to DockerIntroduction to Docker
Introduction to Docker
Luong Vo
 
Introduction to DevSecOps
Introduction to DevSecOpsIntroduction to DevSecOps
Introduction to DevSecOps
abhimanyubhogwan
 
Azure DevOps for Developers
Azure DevOps for DevelopersAzure DevOps for Developers
Azure DevOps for Developers
Sarah Dutkiewicz
 
Introduction to kubernetes
Introduction to kubernetesIntroduction to kubernetes
Introduction to kubernetes
Rishabh Indoria
 
Backend roadmap
Backend roadmapBackend roadmap
Backend roadmap
wassimbenfatma1
 
Docker introduction
Docker introductionDocker introduction
Docker introduction
Phuc Nguyen
 
Kubernetes security
Kubernetes securityKubernetes security
Kubernetes security
Thomas Fricke
 

What's hot (20)

DDD - 3 - Domain Driven Design: Event sourcing.pdf
DDD - 3 - Domain Driven Design: Event sourcing.pdfDDD - 3 - Domain Driven Design: Event sourcing.pdf
DDD - 3 - Domain Driven Design: Event sourcing.pdf
 
Write your Helm charts as a professional. Design templates and inheritance. B...
Write your Helm charts as a professional. Design templates and inheritance. B...Write your Helm charts as a professional. Design templates and inheritance. B...
Write your Helm charts as a professional. Design templates and inheritance. B...
 
Docker: From Zero to Hero
Docker: From Zero to HeroDocker: From Zero to Hero
Docker: From Zero to Hero
 
Key-Value NoSQL Database
Key-Value NoSQL DatabaseKey-Value NoSQL Database
Key-Value NoSQL Database
 
Big Data Redis Mongodb Dynamodb Sharding
Big Data Redis Mongodb Dynamodb ShardingBig Data Redis Mongodb Dynamodb Sharding
Big Data Redis Mongodb Dynamodb Sharding
 
Serving models using KFServing
Serving models using KFServingServing models using KFServing
Serving models using KFServing
 
Chef for DevOps - an Introduction
Chef for DevOps - an IntroductionChef for DevOps - an Introduction
Chef for DevOps - an Introduction
 
MongoDB and hadoop
MongoDB and hadoopMongoDB and hadoop
MongoDB and hadoop
 
Event Sourcing & CQRS, Kafka, Rabbit MQ
Event Sourcing & CQRS, Kafka, Rabbit MQEvent Sourcing & CQRS, Kafka, Rabbit MQ
Event Sourcing & CQRS, Kafka, Rabbit MQ
 
Building Applications with a Graph Database
Building Applications with a Graph DatabaseBuilding Applications with a Graph Database
Building Applications with a Graph Database
 
Patterns for distributed systems
Patterns for distributed systemsPatterns for distributed systems
Patterns for distributed systems
 
Analyzing network infrastructure with Neo4j
Analyzing network infrastructure with Neo4jAnalyzing network infrastructure with Neo4j
Analyzing network infrastructure with Neo4j
 
DevOps @ OpenShift Online
DevOps @ OpenShift OnlineDevOps @ OpenShift Online
DevOps @ OpenShift Online
 
Introduction to Docker
Introduction to DockerIntroduction to Docker
Introduction to Docker
 
Introduction to DevSecOps
Introduction to DevSecOpsIntroduction to DevSecOps
Introduction to DevSecOps
 
Azure DevOps for Developers
Azure DevOps for DevelopersAzure DevOps for Developers
Azure DevOps for Developers
 
Introduction to kubernetes
Introduction to kubernetesIntroduction to kubernetes
Introduction to kubernetes
 
Backend roadmap
Backend roadmapBackend roadmap
Backend roadmap
 
Docker introduction
Docker introductionDocker introduction
Docker introduction
 
Kubernetes security
Kubernetes securityKubernetes security
Kubernetes security
 

Similar to Codeware

Coffee script
Coffee scriptCoffee script
Coffee script
timourian
 
N Queen Problem using Branch And Bound - GeeksforGeeks.pdf
N Queen Problem using Branch And Bound - GeeksforGeeks.pdfN Queen Problem using Branch And Bound - GeeksforGeeks.pdf
N Queen Problem using Branch And Bound - GeeksforGeeks.pdf
akashreddy966699
 
Itroroduction to R language
Itroroduction to R languageItroroduction to R language
Itroroduction to R language
chhabria-nitesh
 
Ruby Basics
Ruby BasicsRuby Basics
Ruby Basics
NagaLakshmi_N
 
18 ruby ranges
18 ruby ranges18 ruby ranges
18 ruby ranges
Walker Maidana
 
Tutorial 2
Tutorial     2Tutorial     2
Tutorial 2
Mohamed Yaser
 
Functional Programming with Groovy
Functional Programming with GroovyFunctional Programming with Groovy
Functional Programming with Groovy
Arturo Herrero
 
COMPANION TO MATRICES SESSION II.pptx
COMPANION TO MATRICES SESSION II.pptxCOMPANION TO MATRICES SESSION II.pptx
COMPANION TO MATRICES SESSION II.pptx
imman gwu
 
06 ruby variables
06 ruby variables06 ruby variables
06 ruby variables
Walker Maidana
 
Ruby from zero to hero
Ruby from zero to heroRuby from zero to hero
Ruby from zero to hero
Diego Lemos
 
Ruby data types and objects
Ruby   data types and objectsRuby   data types and objects
Ruby data types and objects
Harkamal Singh
 
Functional Programming With Scala
Functional Programming With ScalaFunctional Programming With Scala
Functional Programming With Scala
Knoldus Inc.
 
cluster(python)
cluster(python)cluster(python)
cluster(python)
Noriyuki Kojima
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Raimonds Simanovskis
 
A limited guide to intermediate and advanced Ruby
A limited guide to intermediate and advanced RubyA limited guide to intermediate and advanced Ruby
A limited guide to intermediate and advanced Ruby
Vysakh Sreenivasan
 
Matlab algebra
Matlab algebraMatlab algebra
Matlab algebra
pramodkumar1804
 
Ruby Intro {spection}
Ruby Intro {spection}Ruby Intro {spection}
Ruby Intro {spection}
Christian KAKESA
 
Introducing Pattern Matching in Scala
 Introducing Pattern Matching  in Scala Introducing Pattern Matching  in Scala
Introducing Pattern Matching in Scala
Ayush Mishra
 
lpSolve - R Library
lpSolve - R LibrarylpSolve - R Library
lpSolve - R Library
David Faris
 
Clojure for Rubyists
Clojure for RubyistsClojure for Rubyists
Clojure for Rubyists
Jean-François Héon
 

Similar to Codeware (20)

Coffee script
Coffee scriptCoffee script
Coffee script
 
N Queen Problem using Branch And Bound - GeeksforGeeks.pdf
N Queen Problem using Branch And Bound - GeeksforGeeks.pdfN Queen Problem using Branch And Bound - GeeksforGeeks.pdf
N Queen Problem using Branch And Bound - GeeksforGeeks.pdf
 
Itroroduction to R language
Itroroduction to R languageItroroduction to R language
Itroroduction to R language
 
Ruby Basics
Ruby BasicsRuby Basics
Ruby Basics
 
18 ruby ranges
18 ruby ranges18 ruby ranges
18 ruby ranges
 
Tutorial 2
Tutorial     2Tutorial     2
Tutorial 2
 
Functional Programming with Groovy
Functional Programming with GroovyFunctional Programming with Groovy
Functional Programming with Groovy
 
COMPANION TO MATRICES SESSION II.pptx
COMPANION TO MATRICES SESSION II.pptxCOMPANION TO MATRICES SESSION II.pptx
COMPANION TO MATRICES SESSION II.pptx
 
06 ruby variables
06 ruby variables06 ruby variables
06 ruby variables
 
Ruby from zero to hero
Ruby from zero to heroRuby from zero to hero
Ruby from zero to hero
 
Ruby data types and objects
Ruby   data types and objectsRuby   data types and objects
Ruby data types and objects
 
Functional Programming With Scala
Functional Programming With ScalaFunctional Programming With Scala
Functional Programming With Scala
 
cluster(python)
cluster(python)cluster(python)
cluster(python)
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
 
A limited guide to intermediate and advanced Ruby
A limited guide to intermediate and advanced RubyA limited guide to intermediate and advanced Ruby
A limited guide to intermediate and advanced Ruby
 
Matlab algebra
Matlab algebraMatlab algebra
Matlab algebra
 
Ruby Intro {spection}
Ruby Intro {spection}Ruby Intro {spection}
Ruby Intro {spection}
 
Introducing Pattern Matching in Scala
 Introducing Pattern Matching  in Scala Introducing Pattern Matching  in Scala
Introducing Pattern Matching in Scala
 
lpSolve - R Library
lpSolve - R LibrarylpSolve - R Library
lpSolve - R Library
 
Clojure for Rubyists
Clojure for RubyistsClojure for Rubyists
Clojure for Rubyists
 

Recently uploaded

J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
Bert Jan Schrijver
 
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in NashikUpturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies
 
Beginner's Guide to Observability@Devoxx PL 2024
Beginner's  Guide to Observability@Devoxx PL 2024Beginner's  Guide to Observability@Devoxx PL 2024
Beginner's Guide to Observability@Devoxx PL 2024
michniczscribd
 
The Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdfThe Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdf
mohitd6
 
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
dakas1
 
Orca: Nocode Graphical Editor for Container Orchestration
Orca: Nocode Graphical Editor for Container OrchestrationOrca: Nocode Graphical Editor for Container Orchestration
Orca: Nocode Graphical Editor for Container Orchestration
Pedro J. Molina
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
confluent
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
Paul Brebner
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
Reetu63
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
kalichargn70th171
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid
 
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
The Third Creative Media
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Paul Brebner
 
42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert
vaishalijagtap12
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
sandeepmenon62
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
ToXSL Technologies
 
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
Luigi Fugaro
 
Boost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management AppsBoost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management Apps
Jhone kinadey
 
Stork Product Overview: An AI-Powered Autonomous Delivery Fleet
Stork Product Overview: An AI-Powered Autonomous Delivery FleetStork Product Overview: An AI-Powered Autonomous Delivery Fleet
Stork Product Overview: An AI-Powered Autonomous Delivery Fleet
Vince Scalabrino
 

Recently uploaded (20)

J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
 
bgiolcb
bgiolcbbgiolcb
bgiolcb
 
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in NashikUpturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in Nashik
 
Beginner's Guide to Observability@Devoxx PL 2024
Beginner's  Guide to Observability@Devoxx PL 2024Beginner's  Guide to Observability@Devoxx PL 2024
Beginner's Guide to Observability@Devoxx PL 2024
 
The Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdfThe Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdf
 
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
 
Orca: Nocode Graphical Editor for Container Orchestration
Orca: Nocode Graphical Editor for Container OrchestrationOrca: Nocode Graphical Editor for Container Orchestration
Orca: Nocode Graphical Editor for Container Orchestration
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
 
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
 
42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
 
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
 
Boost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management AppsBoost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management Apps
 
Stork Product Overview: An AI-Powered Autonomous Delivery Fleet
Stork Product Overview: An AI-Powered Autonomous Delivery FleetStork Product Overview: An AI-Powered Autonomous Delivery Fleet
Stork Product Overview: An AI-Powered Autonomous Delivery Fleet
 

Codeware

  • 2. your slides are not your IDE
  • 3. $> not your console either
  • 4. here are five rules for presenting code
  • 5. rule 1: $ use monospaced font $
  • 8. var power = function(base, exponent) { var result = 1; for (var count = 0; count < exponent; count++) result *= base; return result; }; var power = function(base, exponent) { var result = 1; for (var count = 0; count < exponent; count++) result *= base; return result; }; monospace proportional
  • 9. var power = function(base, exponent) { var result = 1; for (var count = 0; count < exponent; count++) result *= base; return result; }; var power = function(base, exponent) { var result = 1; for (var count = 0; count < exponent; count++) result *= base; return result; }; monospace proportional
  • 10. monospace monospaced fonts have better readability when presenting code proportional
  • 11. monospace proportional it is harder to follow code with proportional fonts monospaced fonts have better readability when presenting code
  • 12. use monospaced fonts for code readability
  • 13. rule 2: $ use big fonts $
  • 14. presenting for a big audience? $ this is not your desktop monitor $ font size should be bigger $
  • 15. I mean BIGGER than your think
  • 16. I really mean BIGGER
 than your think
  • 21. BIGGER is betterhow do you expect people in the back to read this?
  • 22. rule 3: $ smart syntax
 highlighting $
  • 23. this is not your IDE use syntax highlighting only where needed
  • 24. this is not your IDE use syntax highlighting only where needed
  • 25. Presenting code on your slides usually results in a wall of text. Highlight only the
 specific parts you want your audience to focus on.
  • 26. Presenting code on your slides usually results in a wall of text. Highlight only the
 specific parts you want your audience to focus on.
  • 27. Presenting code on your slides usually results in a wall of text. Highlight only the
 specific parts you want your audience to focus on.
  • 28. 3 slides example - Ruby map function 1 2 3
  • 29. names = ['rey', 'fin', 'poe'] names.map! {|name| name.capitalize } puts names 3 slides example - Ruby map function 1 2 3
  • 30. names = ['rey', 'fin', 'poe'] names.map! {|name| name.capitalize } puts names 3 slides example - Ruby map function 1 2 3
  • 31. names = ['rey', 'fin', 'poe'] names.map! {|name| name.capitalize } puts names # output Rey Fin Poe 3 slides example - Ruby map function 1 2 3
  • 32. rule 4: $ using ellipsis… $
  • 33. 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 = 0 while 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() print print "Solutions found:", num_solutions print "Time:", solver.WallTime(), "ms" Solving the N-queens Problem
  • 34. 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 = 0 while 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() print print "Solutions found:", num_solutions print "Time:", solver.WallTime(), "ms" Solving the N-queens Problem what’s the point in presenting all you code if people can’t follow?
  • 35. 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 = 0 while 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() print print "Solutions found:", num_solutions print "Time:", solver.WallTime(), "ms" Solving the N-queens Problem keep just the relevant code
  • 36. 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 = 0 while 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() print print "Solutions found:", num_solutions print "Time:", solver.WallTime(), "ms" Solving the N-queens Problem use ellipsis…
  • 37. ... # Creates the solver. solver = pywrapcp.Solver("n-queens") ... # Iterates through the solutions, displaying each. num_solutions = 0 while 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() ... Solving the N-queens Problem
  • 38. ... # Creates the solver. solver = pywrapcp.Solver("n-queens") ... # Iterates through the solutions, displaying each. num_solutions = 0 while 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() ... Solving the N-queens Problem the focus is now on the algorithm
 not the boilerplate
  • 39. rule 5: $ use screen annotation $
  • 40. do you want to focus your audience’s attention on a specific area in the screen?
  • 41. thinking of using a laser pointer?
  • 42. do you expect your audience to track this?
  • 43. always create slides as if you are the person sitting
 in the last row of the conference hall. use screen annotations.
  • 44. always create slides as if you are the person sitting
 in the last row of the conference hall. use screen annotations.
  • 45. always create slides as if you are the person sitting
 in the last row of the conference hall. use screen annotations.
  • 46. always create slides as if you are the person sitting
 in the last row of the conference hall. use screen annotations.
  • 47. putting it all together $ ECMAScript 2015 Promise example $
  • 48. putting it all together $ ECMAScript 2015 Promise example $ the next slides will introduce the
 ECMAScript 2015 Promise Object
  • 49. 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
  • 50. 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
  • 51. 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
  • 53. 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
  • 54. 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)); } }; }); resolve is called once operation has completed successfully
  • 55. 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)); } }; }); reject is called if the operation has been rejected
  • 60. 1 codeware - 5 rules 2 3 4 5
  • 61. codeware - 5 rules 2 3 4 5 monospaced font
  • 62. codeware - 5 rules 3 4 5 monospaced font BIG
  • 63. codeware - 5 rules 4 5 monospaced font BIG smart syntax
 highlighting
  • 64. codeware - 5 rules 5 monospaced font BIG smart syntax highlighting ellipsis...
  • 65. monospaced font codeware - 5 rules BIG smart syntax highlighting ellipsis... screen annotation
  • 66. Credits The 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
  • 67. for more tips
 follow me on twitter and slideshare