mikegerwitz
/
cs4m
1
0
Fork 0
Code Releases Activity

Lifting the Curtain / Web Page Source Code: Combine 

Shaves off time and really was redundant.  It was a helpful visualization
too, but this is not a talk about web development.
master
Mike Gerwitz 2019-03-20 22:19:23 -04:00
parent f2780d7ac7
commit 725255e02f
Signed by: mikegerwitz
GPG Key ID: 8C917B7F5DC51BA2
3 changed files with 10 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/ff-inspect-menu.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 61 KiB

BIN
images/ff-inspect.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 128 KiB

69
slides.org
View File

@ -125,7 +125,7 @@
#+BEGIN: columnview :hlines 2 :maxlevel 3 :indent t :id slides
| ITEM | DURATION | TODO | ENVIRONMENT |
|-------------------------------------------------------+----------+----------+-------------|
| Slides | 0:42:58 | LACKING | |
| Slides | 0:42:07 | LACKING | |
|-------------------------------------------------------+----------+----------+-------------|
| \_ Summary | | | |
|-------------------------------------------------------+----------+----------+-------------|
@ -146,11 +146,10 @@
| \_ GUIs of a Feather | 0:00:30 | REVIEWED | fullframe |
| \_ Macro-Like Keyboard Instructions | 0:01:00 | REVIEWED | fullframe |
|-------------------------------------------------------+----------+----------+-------------|
| \_ A New Perspective | 0:13:39 | REVIEWED | |
| \_ A New Perspective | 0:12:49 | REVIEWED | |
| \_ Perspective Topics | | | |
| \_ Secrets? | 0:01:10 | REVIEWED | fullframe |
| \_ Lifting the Curtain | 0:00:50 | REVIEWED | frame |
| \_ Web Page Source Code | 0:00:35 | REVIEWED | frame |
| \_ Lifting the Curtain | 0:00:35 | REVIEWED | frame |
| \_ Text | 0:00:35 | REVIEWED | fullframe |
| \_ Text is a Universal Interface | 0:01:19 | REVIEWED | fullframe |
| \_ The Shell Command Prompt | 0:00:40 | REVIEWED | frame |
@ -899,57 +898,6 @@ But ``good enough'' is only good enough until it's not.
:BEAMER_env: frame
:END:
#+BEAMER: \only<1>{
#+ATTR_LATEX: :width 2in
[[file:images/ff-inspect-menu.png]]
#+BEAMER: }
#+BEAMER: \only<2>{
[[file:images/ff-inspect.png]]
#+BEAMER: }
# ATTR_LATEX does not appear to work with :trim or :clip
#+BEAMER: \only<3>{\begin{center}
#+BEAMER: \includegraphics[width=0.9\linewidth,trim={0px 0px 350px 375px},clip]{images/ff-inspect.png}
#+BEAMER: \end{center}}
**** Notes :B_noteNH:
:PROPERTIES:
:BEAMER_env: noteNH
:DURATION: 00:00:50
:END:
Let's lift the curtain,
so to speak,
on what's really going on in the web browser.
Take the LibrePlanet 2019 speaker list page for instance.
If you right-click on my name and click on ``Inspect Element'',
you are presented with the developer tools for this browser which shows
what makes up the webpage.
You'll notice that it has a hierarchical structure made up of nodes
describing how certain data ought to be formatted.
For example,
my name is in an =h2= element,
which represents a heading.
Below that we see the talk title and then the talk abstract in a paragraph
element,
denoted by =p=.
If we look in that bottom =p= element,
you'll see the exact text that's displayed on the webpage.
And sure enough,
that text contains the term ``free software''.
But you don't need to use a specialized tool to view the structure of the
initial webpage;
I just did this for visualization.
*** REVIEWED Web Page Source Code :B_frame:
:PROPERTIES:
:BEAMER_env: frame
:END:
**** Columns :B_columns:
:PROPERTIES:
:BEAMER_env: columns
@ -977,10 +925,13 @@ But you don't need to use a specialized tool to view the structure of the
:DURATION: 00:00:35
:END:
If we instead select "View Page Source" from the context menu,
then we get a new tab that contains a much uglier version of what we just
saw in the DOM inspector.
This is the raw source code of the webpage.
Let's lift the curtain,
so to speak,
on what's really going on in the web browser.
Right-click on the webpage and select "View Page Source" from the
context menu.
You get a new tab containing the raw code behind the document.
Most of it, anyway.
It is a document language called HTML.
And as you may have noticed,