Reveal.js

HTML Presentations Made Easy

- Created by Hakim El Hattab / @hakimel +

Sane Software Development

Version control and packaging

+ Trevor King

- -

Heads Up

- reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with - support for CSS 3D transforms to see it in its full glory. -

- - -

- -

Vertical Slides

- Slides can be nested inside of other slides, - try pressing down. -

- -

- +

Basic version control

Have you ever done something like this:

+						$ ls
+						analysis-2012-12-20.py
+						analysis-2013-01-15.py
+						analysis-2013-03-14.py
+

Basement Level 1

Press down or up to navigate.

Logs

With a version control system (VCS), that becomes:

+						$ git log --oneline
+						c4af9ce Bump to version 0.7
+						5b6c6d8 MANIFEST.in: Distribute *.pxd files
+						d07922f README: Double-backtick code for proper ReST markup
+						27562b0 channel: Fix to-physical setup in AnalogChannel._get_converter
+						â¦
+

Earlier versions are stored in the VCS database, so they + don't clutter your working directory.

Basement Level 2

Cornify

- -

- +

Commits

Each commit stores a snapshot of the the current code + with some additional metadata:

+						$ git cat-file -p c4af9ce
+						tree 5c7c8d28e0dd458c30fb8ebf221308c2a1c6a054
+						parent 5b6c6d811337b90226e9fd2cffbdf0d65e615bd5
+						author W. Trevor King <wking@tremily.us> 1360192104 -0500
+						committer W. Trevor King <wking@tremily.us> 1360192104 -0500
+						Bump to version 0.7
+						Changes since 0.6:
+						* MANIFEST.in: Distribute *.pxd files
+						* channel: Fix to-physical setup in AnalogChannel._get_converter
+						* A few documentation fixes and updates
+

Basement Level 3

That's it, time to go back up.

- -

- +

Trees

Git trees are like file system directories.

+						$ git ls-tree 5c7c8d2
+						040000 tree 69281fb4331c61514f198d5f5fabea5343506f4d    .be
+						100644 blob 9aa3b8ae5f8c76b490918a48b5baad2008de1598    .gitignore
+						100644 blob 4a905eb41b3b8088ff8cf64a4feaebc71df8ca3f    .mailmap
+						100644 blob 792057b957a0b85bb24048e6ed3ebdabfd55820a    .update-copyright.conf
+						100644 blob d511905c1647a1e311e8b20d5930a37a9c2531cd    COPYING
+						100644 blob b3d277e49ed14a8e6c5530cc0b81054e96921dbb    MANIFEST.in
+						100644 blob fbeb14c783f7334722729c19235c75c8b994ead7    README
+						040000 tree c959dd2701ac400fc0e9ff7f987a7e3be3db55fb    doc
+						040000 tree 82e8191e5ba183698ed9af6d5c24c05e5abd6c3f    pycomedi
+						100644 blob cd0314fee3c9c05f448ccc8285f535c5d6828df6    setup.py
+						100755 blob b5ea21ecea4aa9d8c069beba4d5b9daf37a70633    test.sh
+

- -

Point of View

- Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out. -

- -

rvl.io

- If you don't like writing slides in HTML you can use the online editor rvl.io. -

- -

Works in Mobile Safari

- Try it out! You can swipe through the slides and pinch your way to the overview. -

- -

Marvelous Unordered List

No order here
Or here
Or here
Or here

- -

Fantastic Ordered List

One is smaller than...
Two is smaller than...
Three!

- -

Transition Styles

- You can select from different transitions, like:
- Cube - - Page - - Concave - - Zoom - - Linear - - Fade - - None - - Default -

- -

Themes

- Reveal.js comes with a few themes built in:
- Sky - - Beige - - Simple - - Serif - - Night - - Default -

- - * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>. - -

- -

Global State

- Set data-state="something" on a slide and "something" - will be added as a class to the document element when the slide is open. This lets you - apply broader style changes, like switching the background. -

- -

- +

Blobs

Git blobs are like files.

+						$ git ls-tree 5c7c8d2
+						â¦
+						100644 blob fbeb14c783f7334722729c19235c75c8b994ead7    README
+						â¦
+						$ git cat-file -p fbeb14c
+						This package provides an object-oriented interface to the Comedi_
+						drivers.  The standard Python interface bundled with Comedilib is a
+						simple SWIG clone of the C interface.  In pycomedi, we convert the
+						â¦
+

"blackout"

- -

- +

Commits, trees, and blobs

+ From Pro Git +

"soothe"

- -

- +

Hashes

What's with all the hex strings? + (e.g. fbeb14c783f7334722729c19235c75c8b994ead7)

Git stores objects (commits, trees, blobs, â¦) in a + content + addressable database. This means that when you store + some content in the database, you get a key that you can + use to retrieve that data later.

+						$ echo 'test content' | git hash-object -w --stdin
+						d670460b4b4aece5915caf5c68d12f560a9fe3e4
+						$ git cat-file d670460
+						test content
+

- -

Custom Events

- Additionally custom events can be triggered on a per slide basis by binding to the data-state name. -

Reveal.addEventListener( 'customevent', function() {
-	console.log( '"customevent" has fired' );
-} );
-

Clever Quotes

- These guys come in two forms, inline: - The nice thing about standards is that there are so many to choose from and block: -

- For years there has been a theory that millions of monkeys typing at random on millions of typewriters would - reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue. -

- -

Pretty Code


-function linkify( selector ) {
-  if( supports3DTransforms ) {
-
-    var nodes = document.querySelectorAll( selector );
-
-    for( var i = 0, len = nodes.length; i < len; i++ ) {
-      var node = nodes[i];
-
-      if( !node.className ) ) {
-        node.className += ' roll';
-      }
-    };
-  }
-}
-

Courtesy of highlight.js.

Branches

Git commits form + a directed + acyclic graph. To keep track of development, you can + label the leaf commits.

+ From Pro Git +

Merges

When a feature looks good, you can merge it into your + master branch.

+ From Pro Git +

Rebasing

You can also create new branches by applying the + changes from an old branch to a new base commit.

+ From Pro Git +

+ +

+ From Vincent Driessen +

Intergalactic Interconnections

- You can link between slides internally, - like this. -

Distributed version control

So far we've talked about managing code locally, but + many VCSes make it easy to collaborate. The usual + workflow is something like this:

+ From Pro Git +

Public repositories

It's easy to host your own public repositories + (e.g. on newton), but there are also a number + of free hosting sites + (GitHub, + Gitorious, + Bitbucket, + â¦).

+ From Pro Git +

Fragmented Views

Hit the next arrow...

... to step through ...

any type
of view
fragments

- +

Python packaging

Python packaging has been evolving slowly, and there + are a number of competing libraries at the moment:

+ From + the Hitchhiker's + Guide to Packaging +

Fragment Styles

There's a few styles of fragments, like:

grow

shrink

roll-in

fade-out

highlight-red

highlight-green

highlight-blue

Python's package index

+ From + the Hitchhiker's + Guide to Packaging +

Standard package content

Things you should have in every package (Python or + otherwise).

README: Purpose, installation instructions, contact + information, â¦
COPYING (or LICENSE): How others are allowed to use the package

Python package content

The bulk of the configuration (for current libraries) + goes in setup.py.

+						#!/usr/bin/env python
+						from distutils.core import setup
+						setup(name='Distutils',
+						      version='1.0',
+						      description='Python Distribution Utilities',
+						      author='Greg Ward',
+						      author_email='gward@python.net',
+						      url='http://www.python.org/sigs/distutils-sig/',
+						      packages=['distutils', 'distutils.command'],
+						     )
+

Cutting a release

+						â¦hack hack hackâ¦
+						$ git commit -am 'Bump to version 0.7'
+						$ git tag -s -m 'version 0.7' v0.7
+						$ git push --tags origin master
+						$ python setup.py sdist upload
+

Installing packages from PyPI

+						$ pip install --user pycomedi
+						Downloading/unpacking pycomedi
+						  Downloading pycomedi-0.7.tar.gz (47kB): 47kB downloaded
+						  Running setup.py egg_info for package pycomedi
+						Installing collected packages: pycomedi
+						  Running setup.py install for pycomedi
+						    cythoning pycomedi/_error.pyx to pycomedi/_error.c
+						    building 'pycomedi._error' extension
+						    x86_64-pc-linux-gnu-gcc â¦ -o build/temp.linux-x86_64-3.2/pycomedi/_error.o
+						    â¦
+						Successfully installed pycomedi
+						Cleaning up...
+

- -

Spectacular image!

- -

- -

Export to PDF

Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.

- - -

- -

Take a Moment

- Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen - during a presentation. -

- -

Stellar Links

It's free

- reveal.js and rvl.io are entirely free but if you'd like to support the projects you can donate below. - Donations will go towards hosting and domain costs. -

- +

System packaging

Python packaging is great if your packages only depend + on other Python packages. + My pycomedi + package depends + on comedilib. How do + I automatically install that? How do I check for the + required kernel configuration?

We need to reach beyond Python packaging for the + distribution's general purpose package manger.

Gentoo packaging

Gentoo's Package + Manager Specification defines the package format. The + core element is the ebuild:

+						EAPI="5"
+						PYTHON_COMPAT="python{2_6,2_7,3_2,3_3}"
+						inherit eutils distutils-r1 git-2
+						EGIT_REPO_URI="git://tremily.us/${PN}.git"
+						DESCRIPTION="Pythonic wrappers around the Comedilib device drivers."
+						HOMEPAGE="http://blog.tremily.us/posts/${PN}/"
+						LICENSE="GPL-3"
+						SLOT="0"
+						KEYWORDS="~x86 ~amd64"
+						IUSE="doc +kmod test"
+						â¦
+

Ebuild dependencies

Run-time and build-time dependencies can depend + on USE flags, which makes supporting optional + functionality easy:

+						â¦
+						IUSE="doc +kmod test"
+						RDEPEND="sci-libs/comedilib[python]
+						  dev-python/numpy
+						  sci-libs/scipy
+						  kmod? ( dev-python/python-kmod )"
+						DEPEND="$RDEPEND
+						  >=dev-python/cython-0.14
+						  test? ( dev-python/nose )"
+						â¦
+

Ebuild phases

Ebuilds have a number of phases + (pkg_pretend, + pkg_setup, + src_unpack, + src_prepare, + src_configure, + src_compile, + â¦). Eclasses usually setup good defaults, which you can + override as you see fit.

+						â¦
+						src_install() {
+						  distutils_src_install
+						  dodoc README
+						  if use doc; then
+						    dodoc -r doc/
+						  fi
+						}
+

Overlays

Since I don't have access to the + core Portage + tree, I store my packages in + an overlay:

+						# emerge -av app-portage/layman
+						# layman --add wtk
+						# echo "source /var/lib/layman/make.conf" >> /etc/portage/make.conf
+						# emerge -av pycomedi
+						These are the packages that would be merged, in order:
+						Calculating dependencies... done!
+						[ebuild  N    ~] sci-libs/comedilib-9999::wtk  USE="python -doc -ruby" 0 kB
+						[ebuild  N    ~] dev-python/python-kmod-9999::wtk  0 kB
+						[ebuild  N     ] sci-libs/scipy-0.9.0-r1  USE="-doc -umfpack" 0 kB
+						[ebuild  N    ~] sci-libs/pycomedi-9999::wtk  USE="kmod -doc {-test}" 0 kB
+						Total: 4 packages (4 new), Size of downloads: 0 kB
+						Would you like to merge these packages? [Yes/No]
+						â¦
+

THE END

BY Hakim El Hattab / hakim.se

+ Written with reveal.js +