SlideShare a Scribd company logo
1 of 67
Download to read offline
<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

Dg-DevOps_seminar.pptx
Dg-DevOps_seminar.pptxDg-DevOps_seminar.pptx
Dg-DevOps_seminar.pptxArunRangrej1
 
Python Developer Resume | Python Developer Skill Set, Jobs, Roles and Respons...
Python Developer Resume | Python Developer Skill Set, Jobs, Roles and Respons...Python Developer Resume | Python Developer Skill Set, Jobs, Roles and Respons...
Python Developer Resume | Python Developer Skill Set, Jobs, Roles and Respons...Edureka!
 
Vim 讓你寫 Ruby 的速度飛起來
Vim 讓你寫 Ruby 的速度飛起來Vim 讓你寫 Ruby 的速度飛起來
Vim 讓你寫 Ruby 的速度飛起來Chris Houng
 
Introduction to DevOps | Edureka
Introduction to DevOps | EdurekaIntroduction to DevOps | Edureka
Introduction to DevOps | EdurekaEdureka!
 
Azure DevOps for Developers
Azure DevOps for DevelopersAzure DevOps for Developers
Azure DevOps for DevelopersSarah Dutkiewicz
 
Azure Devops Build Tools for Powerapps
Azure Devops Build Tools for PowerappsAzure Devops Build Tools for Powerapps
Azure Devops Build Tools for PowerappsJoost Veldhuis, MSc
 
SOLID Design Principles
SOLID Design PrinciplesSOLID Design Principles
SOLID Design PrinciplesAndreas Enbohm
 
CI/CD (DevOps) 101
CI/CD (DevOps) 101CI/CD (DevOps) 101
CI/CD (DevOps) 101Hazzim Anaya
 
Clean Architecture
Clean ArchitectureClean Architecture
Clean ArchitectureBadoo
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentationivpol
 
You code sucks, let's fix it
You code sucks, let's fix itYou code sucks, let's fix it
You code sucks, let's fix itRafael Dohms
 
What is JavaScript? Edureka
What is JavaScript? EdurekaWhat is JavaScript? Edureka
What is JavaScript? EdurekaEdureka!
 
Code Freeze 2018: There is no such thing as a microservice!
Code Freeze 2018: There is no such thing as a microservice!Code Freeze 2018: There is no such thing as a microservice!
Code Freeze 2018: There is no such thing as a microservice!Chris Richardson
 

What's hot (20)

Dg-DevOps_seminar.pptx
Dg-DevOps_seminar.pptxDg-DevOps_seminar.pptx
Dg-DevOps_seminar.pptx
 
Sonarqube
SonarqubeSonarqube
Sonarqube
 
Python Developer Resume | Python Developer Skill Set, Jobs, Roles and Respons...
Python Developer Resume | Python Developer Skill Set, Jobs, Roles and Respons...Python Developer Resume | Python Developer Skill Set, Jobs, Roles and Respons...
Python Developer Resume | Python Developer Skill Set, Jobs, Roles and Respons...
 
Vim 讓你寫 Ruby 的速度飛起來
Vim 讓你寫 Ruby 的速度飛起來Vim 讓你寫 Ruby 的速度飛起來
Vim 讓你寫 Ruby 的速度飛起來
 
Introduction to DevOps | Edureka
Introduction to DevOps | EdurekaIntroduction to DevOps | Edureka
Introduction to DevOps | Edureka
 
DevOps Best Practices
DevOps Best PracticesDevOps Best Practices
DevOps Best Practices
 
NodeJS
NodeJSNodeJS
NodeJS
 
Demystifying DevOps
Demystifying DevOpsDemystifying DevOps
Demystifying DevOps
 
Azure DevOps for Developers
Azure DevOps for DevelopersAzure DevOps for Developers
Azure DevOps for Developers
 
Track code quality with SonarQube
Track code quality with SonarQubeTrack code quality with SonarQube
Track code quality with SonarQube
 
Azure Devops Build Tools for Powerapps
Azure Devops Build Tools for PowerappsAzure Devops Build Tools for Powerapps
Azure Devops Build Tools for Powerapps
 
SOLID Design Principles
SOLID Design PrinciplesSOLID Design Principles
SOLID Design Principles
 
CI/CD (DevOps) 101
CI/CD (DevOps) 101CI/CD (DevOps) 101
CI/CD (DevOps) 101
 
Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
 
You code sucks, let's fix it
You code sucks, let's fix itYou code sucks, let's fix it
You code sucks, let's fix it
 
Scrum + bdd + ddd
Scrum + bdd + dddScrum + bdd + ddd
Scrum + bdd + ddd
 
What is JavaScript? Edureka
What is JavaScript? EdurekaWhat is JavaScript? Edureka
What is JavaScript? Edureka
 
DevOps - TechNights
DevOps - TechNightsDevOps - TechNights
DevOps - TechNights
 
Code Freeze 2018: There is no such thing as a microservice!
Code Freeze 2018: There is no such thing as a microservice!Code Freeze 2018: There is no such thing as a microservice!
Code Freeze 2018: There is no such thing as a microservice!
 

Similar to Codeware

Coffee script
Coffee scriptCoffee script
Coffee scripttimourian
 
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.pdfakashreddy966699
 
Itroroduction to R language
Itroroduction to R languageItroroduction to R language
Itroroduction to R languagechhabria-nitesh
 
Functional Programming with Groovy
Functional Programming with GroovyFunctional Programming with Groovy
Functional Programming with GroovyArturo Herrero
 
COMPANION TO MATRICES SESSION II.pptx
COMPANION TO MATRICES SESSION II.pptxCOMPANION TO MATRICES SESSION II.pptx
COMPANION TO MATRICES SESSION II.pptximman gwu
 
Ruby from zero to hero
Ruby from zero to heroRuby from zero to hero
Ruby from zero to heroDiego Lemos
 
Ruby data types and objects
Ruby   data types and objectsRuby   data types and objects
Ruby data types and objectsHarkamal Singh
 
Functional Programming With Scala
Functional Programming With ScalaFunctional Programming With Scala
Functional Programming With ScalaKnoldus Inc.
 
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 JasmineRaimonds 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 RubyVysakh Sreenivasan
 
Introducing Pattern Matching in Scala
 Introducing Pattern Matching  in Scala Introducing Pattern Matching  in Scala
Introducing Pattern Matching in ScalaAyush Mishra
 
lpSolve - R Library
lpSolve - R LibrarylpSolve - R Library
lpSolve - R LibraryDavid Faris
 

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

Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfRTS corp
 
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxUnderstanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxSasikiranMarri
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogueitservices996
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLionel Briand
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shardsChristopher Curtin
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slidesvaideheekore1
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesKrzysztofKkol1
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxRTS corp
 
SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?Alexandre Beguel
 
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdfSteve Caron
 
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingShane Coughlan
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptxVinzoCenzo
 
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jNeo4j
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITmanoharjgpsolutions
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...Bert Jan Schrijver
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecturerahul_net
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics
 
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...kalichargn70th171
 
Advantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxAdvantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxRTS corp
 

Recently uploaded (20)

Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
 
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxUnderstanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogue
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and Repair
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slides
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
 
SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?
 
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
 
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptx
 
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh IT
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecture
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
 
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
 
Advantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxAdvantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptx
 

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