mikegerwitz
/
cs4m
1
0
Fork 0
Code Releases Activity

Mostly finish GUI-based browser example 

Some of the talking may need to be shortened.  I havne't timed it yet, but
it sure does feel like a lot.

With that said, this is a very important part of the talk, since it sets the
stage for everything that's about to follow.
master
Mike Gerwitz 2019-03-08 22:38:21 -05:00
parent 615874e1a9
commit be44088c95
Signed by: mikegerwitz
GPG Key ID: 8C917B7F5DC51BA2
1 changed files with 322 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

347
slides.org
View File

@ -21,7 +21,7 @@
- GUIs /are/ sometimes the most efficient means of melding mind and machine.
- De-emphasize doing everything on a terminal just because its "cool".
** Concepts [5/27]
** Concepts [6/27]
- [ ] =/sys= and such
- [ ] Automating multi-step workflows with GNU Make
- [ ] Concurrency
@ -49,7 +49,7 @@
- [ ] Evolve by making portions of command dynamic (variables, subshells)
- [ ] Transfer commands from history into scripts and aliases for re-use
- [ ] Interactive prototyping
- [ ] Looping
- [X] Looping ([[*Browser Topics][Browser Topics]])
- [ ] McIlroy and Knuth
- [X] Mouse has dependency on positioning of UI elements ([[*Browser Topics][Browser Topics]])
- Changes over time, subject to user/system preferences, etc
@ -74,7 +74,7 @@
- Including transferring data between programs
- [ ] Using macros to script keypresses (Vim)
- [ ] Version control
** Programs [0/4]
- [-] Coreutils / Common [3/12]
- [ ] =column=
@ -134,6 +134,12 @@
| \_ Example: Web Browser | 1:00 | RAW | frame |
| \_ Finding Text (Mouse-Driven GUI Interaction) | | RAW | frame |
| \_ GUIs Change Over Time | | RAW | frame |
| \_ Ctrl+F---Just Works | | RAW | frame |
| \_ Muscle Memory | | RAW | fullframe |
| \_ A Research Task | | RAW | fullframe |
| \_ Executing the Research Task | | RAW | frame |
| \_ GUIs of a Feather | | RAW | fullframe |
| \_ Macro-Like Keyboard Instructions | | RAW | fullframe |
|---------------------------------------------------+----------+--------+-------------|
| \_ Thank You | 00:00:01 | | fullframe |
#+END:
@ -152,7 +158,7 @@ I'm also a GNU Maintainer and software evaluator, and hold other
I have about twenty years of programming experience,
half of that professionally,
And I've been a computer user for longer.
So I've been around long enough to see a decent evolution in how we interact
with computers.
I've gotten a sense of what feel right and wrong as both a user and a
@ -161,7 +167,7 @@ And interestingly,
what I've settled on for my computing is really a toolset that was devised
decades before I was even born,
with some light modernization.
And those tools don't work for everyone.
But I think a subset of them can.
@ -189,8 +195,8 @@ Choreographed Workflows
Practical Freedom
** DEVOID Practical Example: Web Browser [0/3]
*** Browser Topics [2/7] :noexport:
** RAW Practical Example: Web Browser [0/9]
*** Browser Topics [3/8] :noexport:
This example is the main segue from GUIs into the utility of keybindings
into shell, so it has to be compelling. I chose something that is
frequently done by users: visiting webpages and searching for text.
@ -208,15 +214,15 @@ frequently done by users: visiting webpages and searching for text.
is made. Really focus on this.
- [X] Location of menu has changed over time (show screenshots), but =C-f=
has been unchanged for decades.
- [ ] What if I had a list of five webpages and I wanted to get rid of the
ones that didn't have that word? [0/5]
- [ ] Mouse and GUI way:
- [X] What if I had a list of five webpages and I wanted to get rid of the
ones that didn't have that word? [4/4]
- [X] Mouse and GUI way:
- Open each page in a new tab.
- Menu -> Find on page -> Type.
- Found, copy URL, open a word processor, paste.
- Go back, click X on the tab.
- Repeat.
- [ ] Then show keybinding way:
- [X] Then show keybinding way:
- *Demonstrate this on the LP laptop.*
- Open programs with =M-F2=
- Open each page in a new tab (=C-t=)
@ -225,16 +231,15 @@ frequently done by users: visiting webpages and searching for text.
- =M-TAB C-v RET=
- =M-TAB C-w=
- Repeat
- [ ] Emphasize the profound differences between these approaches
- [ ] This would work with nearly /any/ combination of web browser and
- [X] This would work with nearly /any/ combination of web browser and
text editor.
- [ ] But what if I had 10? 100? 1000? This is still tedious and slow.
- What if I could walk away and get a coffee, play with the kids,
- [X] But what if I had 10? 100? 1000? This is still tedious and slow.
- [ ] What if I could walk away and get a coffee, play with the kids,
come back and have it done for me?
- Emphasize how users familiar with the tools I haven't yet mentioned
may know how to do this, but people who don't know of Unix tools
will still be thinking in terms of the UI, trying to figure out how
to automate it.
- Emphasize how users familiar with the tools I haven't yet mentioned
may know how to do this, but people who don't know of Unix tools
will still be thinking in terms of the UI, trying to figure out how
to automate it.
- [ ] Right-click on page and View Source
- Briefly mention HTML and =C-f=, show how the text is on the page.
- [ ] Open a terminal [0/4]
@ -254,6 +259,7 @@ frequently done by users: visiting webpages and searching for text.
- [ ] =grep -o 'https\?://[^ ]\+'=, show how it gets a list of URLs.
- Mention how powerful regexes are, e.g. "find all the phone numbers on
a page".
- g/re/p
- [ ] Introduce =while= and =read=, showing how we can iteratively run
commands, maybe =... | while read url; do echo "URL: $url"; done=.
- [ ] Introduce =-q= flag for grep, and use it to conditionally output
@ -287,7 +293,7 @@ Perhaps most prominent is Tree-Style Tab,
the top.
I find this visual enhancement very useful when I have dozens or hundreds of
tabs open.
There are text-mode web browsers,
and I do occasionally use them.
But it provides a very different experience.
@ -298,7 +304,7 @@ For the sake of this talk,
let's just recognize that most people who browse the internet use a
graphical web browser;
that's a simple fact.
I chose a web browser as an example because I feel that it's something that
most everyone can relate to using,
and most everyone can recognize the utility in---most
@ -361,7 +367,7 @@ It highlights and scrolls to the first match as you type,
It also shows the number of results off to the right.
It's a simple,
yet powerful mechanism that is pretty easy to use.
So does a GUI provide the right tool for the job?
If you're just searching for a name or concept,
sure,
@ -437,7 +443,7 @@ There's something that /hasn't/ changed over time---something
=Ctrl+F=.
*** Ctrl+F---Just Works :B_frame:
*** RAW Ctrl+F---Just Works :B_frame:
:PROPERTIES:
:BEAMER_env: frame
:END:
@ -462,9 +468,9 @@ Not only that,
And it's /context-sensitive/!
The program will just Do The Right Thing depending on where you are or what
you're doing.
*** Muscle Memory :B_fullframe:
*** RAW Muscle Memory :B_fullframe:
:PROPERTIES:
:BEAMER_env: fullframe
:END:
@ -509,6 +515,297 @@ You _can_ trigger this feature with your eyes closed.
But that's a pretty trivial example.
*** RAW A Research Task :B_fullframe:
:PROPERTIES:
:BEAMER_env: fullframe
:END:
#+BEAMER: \fullslidetext
Research Task:
#+BEAMER: \fullsubtext
Given a list of webpage URLs
#+BEAMER: \smallsubskip
find all that /do not/ contain ``free software''
**** Notes :B_noteNH:
:PROPERTIES:
:BEAMER_env: noteNH
:END:
Let's explore a fairly simple research task together.
Let's say I email you a handfull of URLs---say,
maybe 5 or 10 of them---that
are articles about software or technology.
And I want you to come up with a list of the webpages that /do not/ contain
the phrase ``free software'' so that I can get a better idea of ones to
focus my activism on.
How might we approach this problem as an average user?
*** RAW Executing the Research Task :B_frame:
:PROPERTIES:
:BEAMER_env: frame
:END:
**** Approaches :B_columns:
:PROPERTIES:
:BEAMER_env: columns
:END:
***** Mouse :B_column:
:PROPERTIES:
:BEAMER_env: column
:BEAMER_col: 0.50
:END:
_Mouse_
1. Click `+' for each new tab, enter\nbsp{}URL
2. Menu \rightarrow Find in This Page
3. Type ``free software''
4. If found, go to #9
5. If /not/ found, highlight URL, right-click, copy
6. Click on text editor
7. Right-click, paste URL, hit =RET= for newline
8. Click on web browser
9. Click `X' on tab, go to #2
******* Notes :B_noteNH:
:PROPERTIES:
:BEAMER_env: noteNH
:END:
/(Perhaps I should demonstrate this right away rather than reading through
the list first, to save time?)/
Let's first use the mouse as many users probably would.
To set up,
let's open each URL in a new tab.
We click on the little `+' icon for a new tab and then enter the URL,
once for each webpage,
perhaps copying the URL from the email message.
Once we're all set up,
we don't care about the email anymore,
but we need a place to store our results,
so we open a text editor to paste URLs into.
Now, for each tab,
we click on the little hamburger menu,
click on ``Find in This Page'',
and then type ``free software''.
If we /do not/ see a result,
we move our mouse to the location bar,
click on it to highlight the URL,
right-click on it to copy it to our clipboard,
click on the text editor to give it focus,
right-click on the editor and click on ``Paste'' to insert the URL,
and then hit the return key to move to the next line.
We then go back to the web browser.
If we /do/ see a result,
we skip copying over the URL.
Then we close the tab by clicking on the `X'.
We repeat this for each tab,
until they have all been closed.
When we're done,
whatever is in our text editor is the list of URLs of webpages that do not
reference ``free software'',
and we're done.
Simple enough,
right?
But it's a bit of a pain in the ass.
All this clicking around doesn't really /feel/ like we're melding mind and
machine, does it?
What if we used our =Ctrl+F= trick?
That saves us a couple clicks.
But what if we could save even more clicks?
***** Keyboard :B_column:
:PROPERTIES:
:BEAMER_env: column
:BEAMER_col: 0.50
:END:
#+BEAMER: \uncover<2>{
_Keyboard_
1. *=Ctrl+T=* for each new tab, enter\nbsp{}URL
2. *=Ctrl+F=* to find
3. Type ``free software''
4. If found, go to #9
5. If /not/ found, *=Ctrl+L Ctrl+C=* to copy URL
6. *=Alt+Tab=* to text editor
7. *=Ctrl+V RET=* to paste URL and add newline
8. *=Alt+Tab=* to web browser
9. *=Ctrl+W=* to close tab, go to #2
#+BEAMER: }
******* Notes :B_noteNH:
:PROPERTIES:
:BEAMER_env: noteNH
:END:
Fortunately we have /many/ more keybindings at our disposal!
We'll start with opening each new tab with =Ctrl+T= instead of clicking on
`+' with the mouse.
/(Maybe show copying the URL from the email without the mouse?)/
To open our text editor,
we'll use =Alt+F4=,
which is a common keybinding for many window managers and operating
systems to open a dialog to enter a program to run.
Once we're all set up,
we start with the first tab and use =Ctrl+F= as we've seen before,
and then type ``free software''.
If we /do not/ find a match,
we're ready to copy the URL.
Hitting =Ctrl+L= will take us to the location bar and highlight the URL.
We can then hit =Ctrl+C= to copy the URL to the clipboard.
=Alt+Tab= is supported by a wide variety of window managers on a variety of
operating systems to switch between windows of running programs,
usually in the order of most recently focused.
So hitting it once should take us to our text editor.
We then paste with =Ctrl+V= and hit return to insert a newline.
We can then go back to the web browser by hitting =Alt+Tab= again.
Once again,
if there /was/ a match,
we skip that copy step.
We then close the tab with =Ctrl+W=.
Repeat, and we're done all the same as before.
As a bonus,
save with =Ctrl+S=.
What's interesting about this approach is that we didn't have to use the
mouse at all,
unless maybe you used it to highlight the URL in the email.
You could get into quite the rhythm with this approach,
and your hands never have to leave the keyboard.
This is a bit of a faster,
more efficient way to convey our thoughts to the machine,
right?
We don't have to seek out our actions each time in the GUI---the
operations are always at our fingertips,
literally.
*** RAW GUIs of a Feather :B_fullframe:
:PROPERTIES:
:BEAMER_env: fullframe
:END:
#+BEAMER: \fullslidetext
Same Keybindings Across (Most) GUIs!
#+BEAMER: \fullsubtext
Browser, Editor, Window Manager, OS, \ldots
**** Notes :B_noteNH:
:PROPERTIES:
:BEAMER_env: noteNH
:END:
Another powerful benefit of this approach is---these
/same exact keybindings work across most GUIs/!
If we switch out Icecat here with nearly any other web browser,
and switch out gedit with many other text editors or even word processors,
this will work all the same!
There are some notable text editors for which these keybindings won't work,
for those of you screaming in your head.
We'll get to that.
If you use Windows instead of GNU/Linux---which
I discourage, but if you do---then
it'll work the same.
This may not seem like a huge deal,
but it has liberating consequences---users
don't have to learn how to use specific programs to do the job.
I can sit down at a completely different system and let that muscle memory
take over and wind up with the same thing.
It's liberating.
We have started to break free from those choreographed workflows.
Let's look at those keybindings a bit more concisely,
since that last slide was a mess,
to put it nicely.
*** RAW Macro-Like Keyboard Instructions :B_fullframe:
:PROPERTIES:
:BEAMER_env: fullframe
:END:
#+BEAMER: \begingroup\fullslidetext
Macro-Like
#+BEAMER: \endgroup\subskip
#+BEGIN_SRC
Ctrl+T ``https://...'' <N times>
Ctrl+F ``free sofware''
[ Ctrl+L Ctrl+C Alt+Tab Ctrl+V RET Alt+Tab ]
Ctrl+W
<N times>
#+END_SRC
- <2> /Requires visual inspection/ for conditional
- <2> Still manual and tedious---what if there were 1000 URLs?
**** Notes :B_noteNH:
:PROPERTIES:
:BEAMER_env: noteNH
:END:
If we type out the workflow keybindings like this,
in an isolated format,
it looks a bit more like instructions for the machine,
doesn't it?
Some of you may be familiar with macros---with
the ability to record keypresses and play them back later.
If we could do that,
then we could fully automate this task away!
Unfortunately,
we can't.
At least,
not with the tools we're using right now.
Why is that?
Well,
for one,
it requires visual inspection to determine whether or not a match has
occurred.
That drives conditional logic---that
bracketed part there.
We also need to know how many times to repeat,
which requires that we either count or watch the progress.
We also need to be able to inspect the email for URLs and copy them into the
web browser.
This also scales poorly.
While using the keyboard is certainly faster than using the mouse,
we're only dealing with a small set of URLs here.
What if I gave you 100 of them?
1000?
More?
Suddenly this doesn't feel like a very efficient way to convey our intent to
the machine.
I don't wish that suffering upon anyone.
And to get around that,
we need to change how we think about our computing a bit.
And that's why I've dragged you through this drawn-out example---to
make sure you understand the significance of these progressive
enhancements to our workflow.
** Thank You :B_fullframe:
:PROPERTIES: