wiki:squeak_screencasts

Version 71 (modified by jakob.reschke, 8 years ago) ( diff )

add a text transcript for the git filetree collaboration video

Table of Contents

  1. The Image Concept
    1. The image as a persistent world
    2. Basic Elements of the Image
    3. How to Recover Changes
    4. Halos to access morphs
    5. How to update your Image
    6. How to modify settings and change your browser
    7. Demo mode – large text for using a beamer or making screenshots
    8. Organise your work with projects
    9. File out file in – the image and its environment
  2. Things you can do with the browser
    1. Basic usage of the class browser
    2. How to access and edit methods
    3. Advanced Browsing Techniques
    4. Modifying class variables and auto generate accessor methods
  3. Exploring - Everything is observable
    1. Workspace and Transcript
    2. Object Explorer and Inspector
  4. Debugging and dealing with image failures
    1. How to debug with the Squeak debugger
    2. Help! i have executed an infinite loop... How to stop the image.
  5. Versioning your work with Monticello
    1. Configuring Repositories and Packages
    2. View Diffs and Changes
    3. How to resolve conflicts
    4. Working with Gemtools
  6. Versioning and CI with Filetree, GitHub and Travis-CI
    1. Filetree and Git: Basics
    2. Filetree and Git: Team work
    3. Filetree and Git: Merging two branches with GitFileTree-MergeDriver
  7. Tests are your safety net
    1. SUnit in action
    2. Test Coverage
  8. SwaLint – static code analysis and metrics
  9. Contributors

The Image Concept

The image as a persistent world

Description

The image is your working environment. All your modifications are stored with its state. This video shows how you open your image how you can go back to the state before opening.

Preview

Video

Video(mp4=attachment:Image-Introduction.m4v,webm=attachment:Image-Introduction.webm,poster=attachment:Image-Introduction-2.jpg,preload=none)

Download mp4 video: Image-Introduction.m4v​ Download webm video: Image-Introduction.webm​

Basic Elements of the Image

Description

In this video we take a tour around the basic UI elements and menus of the image.

Preview

Video

Video(mp4=attachment:Image-Navigating.m4v,webm=attachment:Image-Navigating.webm,poster=attachment:Image-Navigating-1.jpg,preload=none)

Download mp4 video: Image-Navigating.m4v​ Download webm video: Image-Navigating.webm​

How to Recover Changes

Description

Help! My Image crashed! I lost all my changes! What should I do? .. Don't panic. There's a solution: Recover your changes.

Video

Video(mp4=attachment:Image-RecoverFromCrash.m4v,webm=attachment:Image-RecoverFromCrash.webm,poster=attachment:Image-RecoverFromCrash-1.jpg,preload=none)

Download mp4 video: Image-RecoverFromCrash.m4v​ Download webm video: Image-RecoverFromCrash.webm​

Halos to access morphs

Description

Halos provide an instant access to graphical elements of the image. This video shows functions they provide.

Preview

Video

Video(mp4=attachment:Image-Halos.m4v,webm=attachment:Image-Halos.webm,poster=attachment:Image-Halos-1.jpg,preload=none)

Download mp4 video: Image-Halos.m4v​ Download webm video: Image-Halos.webm​

How to update your Image

Description

---

Preview

Video

Video(mp4=attachment:Image-Updating.m4v,webm=attachment:Image-Updating.webm,poster=attachment:Image-Updating-1.jpg,preload=none)

Download mp4 video: Image-Updating.m4v​ Download webm video: Image-Updating.webm​

How to modify settings and change your browser

Description

The image has a menu for editing all your preferences. Additionally you can change your standard browser by using a browser menu.

Preview

Video

Video(mp4=attachment:Image-BrowserAndSetting.m4v,webm=attachment:Image-BrowserAndSetting.webm,poster=attachment:Image-BrowserAndSetting-1.jpg,preload=none)

Download mp4 video: Image-BrowserAndSetting.m4v​ Download webm video: Image-BrowserAndSetting.webm​

Demo mode – large text for using a beamer or making screenshots

In "Demo Mode" all text is large enough to be legible while using a beamer, making a screencast or taking screenshots. You can access this preference by primary (left) click, then choose "appearance", then "system fonts", then "demo mode".

Preview

Video

Video(mp4=attachment:demo-mode.m4v,webm=attachment:demo-mode.webm,poster=attachment:demo-mode.jpg,preload=none)

Download mp4 video: Toggle(end)demo-mode.m4v​ Download webm video: Toggle(end)demo-mode.webm​

Organise your work with projects

Description

Projects are a nice way to organise different workplaces in one image. They can also be useful for prototyping.

Preview

Video Toggle(begin) Video(mp4=attachment:Image-Projects.m4v,webm=attachment:Image-Projects.webm,poster=attachment:Image-Projects-1.jpg,preload=none)

Download mp4 video: Image-Projects.m4v​ Download webm video: Image-Projects.webm​

File out file in – the image and its environment

Description This video shows how to get your code out of the image into the file system and back from the filesystem into the image.

Preview

Video

Video(mp4=attachment:fileout-filein.mp4, webm=attachment:fileout-filein.webm,poster=attachment:fileout-filein.jpg,preload=none)

Download mp4 video:fileout-filein.mp4​ Download webm video:fileout-filein.webm​

Brief summary

You can right click on each item in a browser – class category, class, method category or method. Then select file out (or Strg+o). The code is stored in a .st file in pathToImage/Contents/Resources/. To load a file's content into an image drag and drop the file into the image or open the "file list" browser from "Tools" and click "file in".

Things you can do with the browser

Basic usage of the class browser

Description

The class browser is the tool to access and edit source code in the image. It is your main working environment.

Preview

Video

Video(mp4=attachment:Browser-ClassBrowser.m4v,webm=attachment:Browser-ClassBrowser.webm,poster=attachment:Browser-ClassBrowser-1.jpg,preload=none)

Download mp4 video: Browser-ClassBrowser.m4v​ Download webm video: Browser-ClassBrowser.webm​

How to access and edit methods

Description

---

Preview

Video

Video(mp4=attachment:Browser-MethodsInBrowser.m4v,webm=attachment:Browser-MethodsInBrowser.webm,poster=attachment:Browser-MethodsInBrowser-1.jpg,preload=none)

Download mp4 video: Browser-MethodsInBrowser.m4v​ Download webm video: Browser-MethodsInBrowser.webm​

Advanced Browsing Techniques

Description

In this screencast we show how you can browse the hierachy, inheritance, senders and implementors of methods.

Preview

Video

Video(mp4=attachment:Browser-AdvancedBrowsing.m4v,webm=attachment:Browser-AdvancedBrowsing.webm,poster=attachment:Browser-AdvancedBrowsing-1.jpg,preload=none)

Download mp4 video: Browser-AdvancedBrowsing.m4v​ Download webm video: Browser-AdvancedBrowsing.webm​

Modifying class variables and auto generate accessor methods

Description

You can also modify the class definitions. Furthermore the browser provides a nice function for generating accessor methods for all your instance variables.

Preview

Video Toggle(begin) Video(mp4=attachment:Browser-ClassStateSetterGetters.m4v,webm=attachment:Browser-ClassStateSetterGetters.webm,poster=attachment:Browser-ClassStateSetterGetters-1.jpg,preload=none)

Download mp4 video: Browser-ClassStateSetterGetters.m4v​ Download webm video: Browser-ClassStateSetterGetters.webm​

Exploring - Everything is observable

Workspace and Transcript

Description

You will be guided through writing and executing code the Workspace and how to use the Transcript to inspect properties of objects.

Preview

Video

Video(mp4=attachment:Exploring-TranscriptWorkspace.m4v,webm=attachment:Exploring-TranscriptWorkspace.webm,poster=attachment:Exploring-TranscriptWorkspace-1.2.jpg,preload=none)

Download mp4 video: Exploring-TranscriptWorkspace.m4v​ Download webm video: Exploring-TranscriptWorkspace.webm​

Object Explorer and Inspector

Description

This video introduces the Object Explorer and Object Inspector, which are tools that you can use during debugging in order to comfortably inspect object properties.

Preview

Video

Video(mp4=attachment:Exploring-ObjectExplorerInspector.m4v,webm=attachment:Exploring-ObjectExplorerInspector.webm,poster=attachment:Exploring-ObjectExplorerInspector-1.jpg,preload=none)

Download mp4 video:Exploring-ObjectExplorerInspector.m4v​ Download webm video:Exploring-ObjectExplorerInspector.webm

Debugging and dealing with image failures

How to debug with the Squeak debugger

Description

This video shows how to set breakpoints and demonstrates most of the debugger features.

Preview

Video

Video(mp4=attachment:Debug-Debugger.m4v,webm=attachment:Debug-Debugger.webm,poster=attachment:Debug-Debugger-1.jpg,preload=none)

Download mp4 video: Debug-Debugger.m4v​ Download webm video: Debug-Debugger.webm​

Help! i have executed an infinite loop... How to stop the image.

Description

What to do if your image stopped responding because the UI process is hung up in something?

Video

Video(mp4=attachment:Debug-StopProcessing.m4v,webm=attachment:Debug-StopProcessing.webm,poster=attachment:Debug-StopProcessing-1.jpg,preload=none)

Download mp4 video:Debug-StopProcessing.m4v​ Download webm video:Debug-StopProcessing.webm​

Versioning your work with Monticello

Configuring Repositories and Packages

Description

The Monticello Browser will be introduced. It's the main versioning system for Squeak, a little like Git / SVN for other languages. You will see how to set up your own repository and a new package.

Preview

Video

Video(mp4=attachment:Monticello-Introduction.m4v,webm=attachment:Monticello-Introduction.webm,poster=attachment:Monticello-Introduction-1.jpg,preload=none)

Download mp4 video:Monticello-Introduction.m4v​

View Diffs and Changes

Description

As continuation of the first Monticello video, you will be shown to upload an initial version, view diffs between versions and commit changes.

Preview

Video

Video(mp4=attachment:Monticello-DiffingAndChanges.m4v,webm=attachment:Monticello-DiffingAndChanges.webm,poster=attachment:Monticello-DiffingAndChanges-1.jpg,preload=none)

Download mp4 video: Monticello-DiffingAndChanges.m4v​

How to resolve conflicts

Description

This video shows you how to resolve a conflict during a commit to a Monticello repo.

Preview

Video

Video(mp4=attachment:Monticello-ResolvingConflicts.m4v,webm=attachment:Monticello-ResolvingConflics.webm,poster=attachment:Monticello-ResolvingConflicts-1.png,preload=none)

Download mp4 video: Monticello-ResolvingConflicts.m4v​ Download webm video: Monticello-ResolvingConflicts.webm​

Working with Gemtools

Description

This video shows you how to use the Gemtools to connect to a Gemstone/S VM and how to work with them.

Video (currently not available for online viewing)

Download ogg video: Gemtools.ogg​

Versioning and CI with Filetree, GitHub and Travis-CI

Filetree and Git: Basics

Description

We're showing you how to setup your local working copy of a GitHub Squeak project that is preconfigured for continuous integration with Travis-CI. The project shown is available on GitHub at: ​https://github.com/SWTI2014/SWTI2014-Project-XX

Preview

Video

Video(mp4=attachment:FiletreeGit.mp4,webm=attachment:FiletreeGit.webm,poster=attachment:FiletreeGit-1.jpg,preload=none)

Download mp4 video:FiletreeGit.mp4​ Download webm video: FiletreeGit.webm​

Filetree and Git: Team work

Description

Continuing were the first "Filetree and Git" video left off, we show you how to fetch and merge changes made by other contributors and how to commit and push your own changes. We'll also show you how to resolve merge conflicts inside the Squeak Image.

Preview

Video

Video(mp4=attachment:FiletreeGitMerge.mp4,webm=attachment:FiletreeGitMerge.webm,poster=attachment:FiletreeGitMerge-1.jpg,preload=none)

Download mp4 video:FiletreeGitMerge.mp4​ Download webm video: FiletreeGitMerge.webm​

Transcript for those preferring to read text

  • Use git fetch && git merge --ff-only origin/master instead of git pull, so you can perform the actual Merge or Load operation using the Monticello tools in Squeak.
  • If new commits are created concurrently in git, you will have to do an actual merge before you can push.
  • You will not be able to merge using the fast-forward strategy and there would be conflicts in the filetree metadata if git tries to figure out the merge by itself.
  • In order to remedy the situation, do the git merge preferring changes from the remote repository: git merge -s recursive -X theirs origin/master (since you still have your changes in the image, nothing is lost).
  • Perform the actual merge in the Squeak image using Monticello.
  • Save your merge to the filetree using Monticello Save.
  • Commit and push your changed filetree with git.
  • You may want to amend the merge commit.

Filetree and Git: Merging two branches with GitFileTree-MergeDriver

Description

If you are working on multiple branches and you want to merge one into another, you can use ​GitFileTree-MergeDriver. If you have set it up correctly, this is how it works:

Video

Video(mp4=attachment:GitFileTree-MergeDriver.mp4,poster=attachment:GitFileTree-MergeDriver.jpg,preload=none)

Download mp4 video:GitFileTree-MergeDriver.mp4​

Tests are your safety net

SUnit in action

Description This video shows test driven development with SUnit. It shows how to use the test runner and covers the basic assertions and how to raise a custom error.

The code used in this example can be found here: HowTo-SUnit.st​ (click icon for download, link text for viewing).

Video

Video(mp4=attachment:SUnit.m4v, poster=attachment:SUnit.jpg, preload=none)

Download mp4 video: SUnit.m4v​

Brief summary

A test suite is created by subclassing TestCase (e.g. MyTestSuite). Any method named testXYZ in the test suite is considered a unit test. Fixtures are initialized in #setUp and cleared (if necessary) in #tearDown. For code that should be run once per test suite, use MyTestSuite>>initialize. For code that should be run before and after every unit test, use MyTestSuite>>setUp and MyTestSuite>>tearDown. Custom errors (e.g. MyError) can be created by subclassing Error. To raise an error, use #signal:. 

MyError signal: 'A description'.

SUnit's basic assertions are:

Expectation Method of TestCase Example
Expression should be true #assert: self assert: 1+2 > 2
Expression should be false #deny: self deny: 1+2 < 2
Expressions should be equal #assert:equals: self assert: 1+2 equals: 3
Block should raise an error #should:raise: self should: [1/0] raise: ZeroDivide
Block should not raise an error #shouldnt:raise: self shouldnt: [1/1] raise: ZeroDivide

For further information read chapter 7 "SUnit" in ​Squeak by Example

Test Coverage

Description This video shows how to analyse the test coverage of a package. The test coverage measures how many percent of a package's methods are called in its tests.

Video

Video(mp4=attachment:test-coverage.mp4, poster=attachment:test-coverage.jpg,preload=none)

Download mp4 video: test-coverage.mp4​

Brief summary

Make sure a package exists which is named like the class category before a dash. For example the class category is called "HowTo-SUnit" the package has to be named "HowTo". You can add a package in the "Monticello Browser" which can be found in "Tools".

To run a test coverage analysis open the test runner, click "Run Coverage" and select the package. After all tests are run you see a list of methods which aren't covered and the ratio of covered methods and all package's methods.

SwaLint – static code analysis and metrics

Description

This video shows how to find unidiomatic code and how to collect statistics about a given class or package.

Video

Video(mp4=attachment:SwaLint.mp4, webm=attachment:SwaLint.webmhd.webm, poster=attachment:SwaLint.jpg,preload=none)

Download mp4 video: SwaLint.mp4​ Download webm video: SwaLint.webmhd.webm​

Brief summary

Open SwaLint from the Apps menu to perform static code analysis, which check for idiomatic code and gather code metrics. Then select the packages and classes you want to analyze. A reporter presents the results and offers to browse the occurrences of mismatches.

Contributors

  • Eric Seckler
  • Robin Schreiber
  • Patrick Rein
  • Michael Perscheid
  • Tim Felgentreff
  • Willi Müller
  • Fabio Niephaus

Contact us: {robin.schreiber, patrick.rein, willi.mueller, fabio.niephaus}@student.hpi.uni-potsdam.de

​http://squeakbyexample.org/

Attachments (136)

Note: See TracWiki for help on using the wiki.