<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Tryptophantastic</title>
    <description>A place to muse about technical topics while invested in the Turing School full-stack web development program.
A lightweight interpretation of a blog, playing with the Jekyll blog-aware site creator tool and GitHub pages.
</description>
    <link>hhoopes.github.io/</link>
    <atom:link href="hhoopes.github.io/feed.xml" rel="self" type="application/rss+xml"/>
    <pubDate>Fri, 07 Aug 2026 05:39:07 +0000</pubDate>
    <lastBuildDate>Fri, 07 Aug 2026 05:39:07 +0000</lastBuildDate>
    <generator>Jekyll v3.10.0</generator>
    
      <item>
        <title>Benchmarking and profiling data: two takes</title>
        <description>&lt;p&gt;After working on a personal project that took in a lot of data, to the tune of a &lt;a href=&quot;https://github.com/hhoopes/genome_match_maker&quot;&gt;fraction of the human genome&lt;/a&gt;, I inherited a &lt;a href=&quot;https://github.com/LookingForMe/lookingfor&quot;&gt;Turing brown field project&lt;/a&gt; that has been worked on by various groups of students in an iterative fashion. It had accumulated several thousand database records linking various jobs with their respective companies and locations and we realized we were trying to answer questions about how much chronological data we could query at a time without knowing how slow those queries actually were.&lt;/p&gt;

&lt;!--more--&gt;

&lt;p&gt;Enter benchmarking and profiling performance data. While benchmarking could be described as simple speed (or memory) measurements, profiling compares these measurements in the context of a typical user flow, pointing to where bottlenecks might be and thus allows a developer to &lt;em&gt;prioritize&lt;/em&gt; rather than &lt;em&gt;micro-optimize&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Should our API serve one month of data? Two months? We were asking questions in the wrong order. So one of my first tasks on this team became researching how we might profile our web app. We did have &lt;a href=&quot;https://newrelic.com/&quot;&gt;New Relic&lt;/a&gt; set up and I spent some time that and &lt;a href=&quot;https://www.skylight.io/&quot;&gt;Skylight&lt;/a&gt;, other people have written about the distinction, and I’d rather dig into some code! I’ll show you a variant on Rails performance testing that I tried, as well as what I eventually opted to use, a rake task in combination with logging to generate data in development.&lt;/p&gt;

&lt;p&gt;With the release of Rails 4, performance testing was moved to the gem &lt;a href=&quot;https://github.com/rails/rails-perftest&quot;&gt;perftest&lt;/a&gt;. By default, &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;perftest&lt;/code&gt; gives you access to tests which can both benchmark and profile and tweaks a few config settings from the usual test environment, including caching. It simulates a production environment running against your test database.&lt;/p&gt;

&lt;p&gt;However, my orders from high, i.e., my instructor, were to run perf tests against a seeded database of ~20000 records. How could I possibly load so much data in a test environment, only to have it wiped each time I ran tests?&lt;/p&gt;

&lt;h2 id=&quot;solution-1-rails-perf-tests-in-a-custom-environment&quot;&gt;Solution 1: Rails perf tests in a custom environment&lt;/h2&gt;

&lt;p&gt;The answer was, no, I couldn’t fully simulate a production database in my normal test suite. My initial solution was to implement a custom testing environment, as detailed in &lt;a href=&quot;http://tekin.co.uk/2014/09/performance-test-rails-against-real-data/&quot;&gt;this blog post&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This strategy goes even further than perftest in reimplementing a production-styled environment, but instantiates a new one (call it the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;benchmark environment&lt;/code&gt;, if you will). This allows one to seed a database with massive amounts of data, use custom production-like environment variables, and keep all this contained.&lt;/p&gt;

&lt;p&gt;The steps of my implementation were:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;Config &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;database.yml&lt;/code&gt; with a new setup. I pointed it at my development database.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Add a new config file in &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/config/environments&lt;/code&gt; for your new environment. While this would depend on your production config, you would try to mirror that config closely.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Set up the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;perftest&lt;/code&gt; config in a helper file&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Start writing performance tests! This should and will look almost like a feature test, other than you won’t be asserting what’s on the page, but you will be hitting endpoints of note and following your users’ likely workflows through your app.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Create a rake task. As the original blog post points out, this removes the db:test:prepare step that would otherwise reset your database.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Run the tests and enjoy the data provided to you by &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;perftest&lt;/code&gt;’s logging.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;While this was a decent solution and logical, I got my tests written and all my config set up, and as I attempted to debug why I seemingly was in the correct environment and database both, but didn’t have my database data, I realized this solution was overly complex. It was taking a solution that was supposed to be standalone, and added another layer.&lt;/p&gt;

&lt;h2 id=&quot;solution-2-use-the-tools-we-already-have-but-lets-make-more-data&quot;&gt;Solution 2: Use the tools we already have, but let’s make more data&lt;/h2&gt;

&lt;p&gt;While I realized there were numerous solutions to this problem, all probably useful and feasible, I turned to an instructor who had solved similar problems while at LivingSocial. He suggested I implement a rake task that automates hitting endpoints of my own definition, similar to how a performance test would be written.&lt;/p&gt;

&lt;p&gt;While I chose to seed a development database and hit that, you can conceive of other configs that would more closely approximate a production environment. I chose my solution primarily to allow teammates to test new queries before pushing to master.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Use Capybara to describe a common user story, then log the data with Rails logger. Capybara can be used to just create a session. I then described common user stories:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;session.all(&quot;h4&quot;).sample.click_link_or_button(&quot;View Listing&quot;)&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;Include benchmarking methods to log data automatically, and a rake task to randomly hit all my methods as much as I wanted it too.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Create a whole lot of realistic data (or use real data) in a development database. Having now seeded two large databases, I have ideas on how to do this well, but that can be another blog post!&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Turn back to your profiling gems like New Relic. As much as I like their dashboard for deployed websites, installing the gem also gives access to an endpoint on your local app at &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/newrelic&lt;/code&gt;. While the visualizations are a little different, generating a lot of hits with my rake task also provided a lot of New Relic analytics while in development.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;img src=&quot;/assets/newrelic_dev.png&quot; alt=&quot;New Relic data view in development&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Unfortunately, as our web app is still young, our crazier database queries remain to be written, so I don’t have fun profiling I can do yet. However, having a means to monitor these queries ahead of time means that future developers can stay one step ahead and always know where their biggest performance expenses exist.&lt;/p&gt;

&lt;p&gt;Tomorrow I’ll be headed to a local Ruby meetup where the speaker will be addressing this very topic, so I look forward to seeing what assumptions I got wrong… stay tuned.&lt;/p&gt;
</description>
        <pubDate>Mon, 13 Jun 2016 10:54:46 +0000</pubDate>
        <link>hhoopes.github.io/2016/06/13/benchmarking-data-in-rails/</link>
        <guid isPermaLink="true">hhoopes.github.io/2016/06/13/benchmarking-data-in-rails/</guid>
        
        
      </item>
    
      <item>
        <title>9 Principles of Successful API Documentation In Snippet and Screenshot</title>
        <description>&lt;p&gt;The third module of the Turing program focuses heavily on consuming and creating APIs, and the first thing that these masses of junior developers encounter with any API is its documentation. How to authenticate. What format requests are made in. What information to expect in a response. An API inherently exists to facilitate sharing a great resource and thus its documentation is its gateway: it either convinces developers to turn elsewhere or welcomes them in for a successful encounter. Parse Server writes that the documentation is the &lt;a href=&quot;http://blog.parse.com/learn/engineering/designing-great-api-docs/&quot;&gt;“most important piece of UX for a developer”&lt;/a&gt;.&lt;/p&gt;

&lt;!--more--&gt;

&lt;p&gt;Fortunately, there’s been written a lot of good documentation on writing good documentation. Brad Fults wrote a &lt;a href=&quot;https://bradfults.com/the-best-api-documentation-b9e46400379a#.1jefriryn&quot;&gt;comprehensive list of best practices&lt;/a&gt;. The master repository of all APIs available on the web, Programmable Web, also offers its own &lt;a href=&quot;http://www.programmableweb.com/news/web-api-documentation-best-practices/2010/08/12&quot;&gt;list of tips&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Using Fults’ principles, I hunted down the best representations of each idea. What follows are both examples to learn from, as well as a curated list for other developers looking for a successful place to start consuming.&lt;/p&gt;

&lt;h2 id=&quot;1-provide-a-good-overview&quot;&gt;1. Provide a good overview&lt;/h2&gt;
&lt;p&gt;Fults points out that APIs have multiple audiences: beginners, experts, and decision-makers. Thus, an API should have a good overview that addresses each of those groups.&lt;/p&gt;

&lt;p&gt;The &lt;a href=&quot;http://dp.la/info/developers/codex/&quot;&gt;Digital Public Library API Codex&lt;/a&gt; does just that.
The first paragraph of their API homepage presents different jumping off points, from someone who has never used an API and will need the fundamentals, to someone ready to “dive right into the requests.” It also addresses someone who might be making decisions by providing their policies and philosophy and also calls out a section for troubleshooting and a glossary.&lt;/p&gt;

&lt;p&gt;A good overview might also link to an explanation of your ontology, taxonomy, or naming conventions for more complex APIs that rely on a lot of nested industry-specific information. DPLA does this on another page.&lt;/p&gt;

&lt;h2 id=&quot;2-document-each-and-every-call-to-your-api-separately&quot;&gt;2. Document each and every call to your API separately&lt;/h2&gt;
&lt;p&gt;The &lt;a href=&quot;https://api.slack.com/methods&quot;&gt;Slack API&lt;/a&gt; is enormous. Yet each call that can be made is referenced and linked to an even more detailed breakdowns.&lt;/p&gt;

&lt;p&gt;As an example, the &lt;a href=&quot;https://api.slack.com/methods&quot;&gt;Slack Methods page&lt;/a&gt; lists several methods for channels.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/apis/slack_channels.png&quot; alt=&quot;Slack API channel methods&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Clicking one of those methods brings up a new page with more explicit detail.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/apis/slack_channels_archive.png&quot; alt=&quot;Slack archive channel&quot; /&gt;&lt;/p&gt;

&lt;p&gt;While this pattern of broad overview funneling to explicit detail generates a lot of content when you have a lot of requests, it’s necessary for good documentation, and leads to the next principle…&lt;/p&gt;

&lt;h2 id=&quot;3-provide-all-of-the-documentation-in-a-single-page&quot;&gt;3. Provide all of the documentation in a single page&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://www.audiosear.ch/developer/&quot;&gt;Audiosear.ch’s API&lt;/a&gt; provides a recommendation engine for podcast series. Their method of implementing full-page documentation involves being able to show and collapse sections on each of their endpoints, as so:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/apis/audiosearch_collapse.png&quot; alt=&quot;Audiosear.ch collapse function&quot; /&gt;&lt;/p&gt;

&lt;p&gt;While the documentation itself is actually pretty good, providing well-formatted information about all the parameters and response details, the page loads automatically collapsed. Developers searching out the documentation for debugging purposes would not be able to use the browser’s find on page to locate the term “show_title”, in this example, without expanding all the categories and manually searching first.&lt;/p&gt;

&lt;p&gt;(Note: I later discovered the same styled format on another API, so this format seems to be the implementation of a library, but still, could be considered a flaw in the library.)&lt;/p&gt;

&lt;p&gt;That it’s a small API makes this less of a problem, but the larger the API, the more important to have at least one page where a developer can find everything at-a-glance, even if content is then linked elsewhere.&lt;/p&gt;

&lt;h2 id=&quot;4-provide-complete-details-about-both-the-request-and-the-response&quot;&gt;4. Provide complete details about both the request and the response&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.xeno-canto.org/article/153&quot;&gt;Birdsong website Xeno-canto&lt;/a&gt; has a mission of “sharing bird sounds from around the world”, which makes having an API a pretty obvious solution. After detailing a request and a response structure, their documentation also breaks down all the fields, a sample shown below. The more nuanced and technical your response, the more important to detail what a field might mean in the context of your API.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;ul&gt;
    &lt;li&gt;id: the catalogue number of the recording on xeno-canto&lt;/li&gt;
    &lt;li&gt;gen: the generic name of the species&lt;/li&gt;
    &lt;li&gt;sp: the specific name of the species&lt;/li&gt;
    &lt;li&gt;ssp: the subspecies name&lt;/li&gt;
    &lt;li&gt;en: the English name of the species&lt;/li&gt;
    &lt;li&gt;…&lt;/li&gt;
  &lt;/ul&gt;
&lt;/blockquote&gt;

&lt;h2 id=&quot;5-use-plain-english-in-the-beginning&quot;&gt;5. Use plain English in the beginning…&lt;/h2&gt;
&lt;p&gt;This hearkens back to the principle that you’re creating documentation for multiple audiences. Clear, nontechnical languages helps everyone find their resources appropriately, especially those who haven’t used your docs before.&lt;/p&gt;

&lt;p&gt;Our class this year did our final exam using the &lt;a href=&quot;http://bestbuyapis.github.io/api-documentation/?shell#overview&quot;&gt;Best Buy API&lt;/a&gt;. While I’m not a fan of its split-column table-like docs, it does have an Overview section that’s easy to find and clearly explains the structure, progressively getting more specific in detail as it moves from Response Format to Errors and Postman. Anyone working with their endpoints would benefit first from reading the Overview section before heading elsewhere.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/apis/best_buy_overview.png&quot; alt=&quot;Best Buy Overview&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;6-but-provide-cues-and-organization-for-the-expert-who-is-debugging&quot;&gt;6. …But provide cues and organization for the expert who is debugging&lt;/h2&gt;
&lt;p&gt;The &lt;a href=&quot;https://developer.spotify.com/web-api/endpoint-reference/&quot;&gt;Spotify doc&lt;/a&gt; use navigational cues like a table of contents, links, and organized headers to provide hints to experts who are debugging. A navigational column provides keywords for using find-in-page and the top of each section has a search bar. Each element in each endpoint reference further links to an appropriate resource.&lt;/p&gt;

&lt;p&gt;And there’s nuance. In the example below, the “endpoint” and “usage” urls lead to a section detailing the request and response, while the “returns” links to a page detailing the complete object model for that resource.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/apis/spotify.png&quot; alt=&quot;Spotify organizational cues&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;7-provide-a-sample-api-key-for-demonstration-purposes&quot;&gt;7. Provide a sample API key for demonstration purposes&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://api.23andme.com/docs/reference/&quot;&gt;23 and Me’s API documentation&lt;/a&gt; is not the most cookie cutter for this idea, but still demonstrates a couple of interesting ideas. It was my API baby for the last several weeks and consequently I learned its documentation pretty well. It’s an interesting API to work with: few people might have a 23 and Me account to map their genome as much as they might have a, say, Spotify account. Only being able to rely on actual users for sample data might prove tricky.&lt;/p&gt;

&lt;p&gt;However, it does provide a demo version of all of its endpoints which returns hypothetical genetic data. The tricky part is that even this demo version still requires an access token (not to be confused with a developer’s client token), but even developer accounts have that token. Some developers don’t realize they still have this token to access demo data and thus the documentation could be more clear on this account. Some developers would prefer a demo access token be provided in the documentation for purposes of trying endpoints before they have an authentication method set up.&lt;/p&gt;

&lt;p&gt;What decision an API makes about how to provide demo access to data leads into the next point…&lt;/p&gt;

&lt;h2 id=&quot;8-make-it-simple-to-copy-by-providing-sample-code&quot;&gt;8. Make it simple to copy by providing sample code&lt;/h2&gt;
&lt;p&gt;Slack responds similarly in the way it offers test access to API responses. While you need to have the correct privileges on a Slack account to try out their API within the webpage, they provide a tester feature for all of their endpoints. In this fashion, any question about an argument becomes clear by the ability to receive real data right next to the documentation on that method.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/apis/slack_demo.png&quot; alt=&quot;Slack /test path&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Not all APIs want to or can provide this level of functionality, but the simple solution is to provide &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;curl&lt;/code&gt; snippets for every request.&lt;/p&gt;

&lt;h2 id=&quot;9-provide-context-and-examples-for-the-languages-you-expect-to-see-using-your-api&quot;&gt;9. Provide context and examples for the languages you expect to see using your API&lt;/h2&gt;

&lt;p&gt;Usually all a developer might need is curl examples. But more complex APIs with authentication schemes often (should) have sample implementations in the languages they expect to see used with their product. These are often hosted in Github repos, as &lt;a href=&quot;https://github.com/23andMe/&quot;&gt;23 and Me does&lt;/a&gt;, or as a separate tutorials/quickstart section, as with &lt;a href=&quot;https://developers.google.com/analytics/devguides/config/mgmt/v3/&quot;&gt;Google Analytics&lt;/a&gt;, which offers the fundamentals in Java, PHP, Javascript, and Python.&lt;/p&gt;

&lt;h2 id=&quot;look-ma-its-my-first-api&quot;&gt;Look, Ma, it’s my first API&lt;/h2&gt;

&lt;p&gt;To further work with documentation, I’ll be writing my own documentation for an API I created on my last project. Looking for more about API documentation? Make sure to read &lt;a href=&quot;https://bradfults.com/the-best-api-documentation-b9e46400379a&quot;&gt;The Best API Documentation&lt;/a&gt;. Wanting another resource to test APIs interactively? &lt;a href=&quot;https://market.mashape.com/explore&quot;&gt;Mashape&lt;/a&gt; offers a nice collection and lets you test an endpoint as well as offers snippets for each API as a curl request or one of 7 different languages. Whether you’re serving or consuming, remember, good technical docs are indispensable.&lt;/p&gt;
</description>
        <pubDate>Sun, 01 May 2016 14:04:27 +0000</pubDate>
        <link>hhoopes.github.io/apis/2016/05/01/principles-api-documentation-examples/</link>
        <guid isPermaLink="true">hhoopes.github.io/apis/2016/05/01/principles-api-documentation-examples/</guid>
        
        
        <category>APIs</category>
        
      </item>
    
      <item>
        <title>Dynamic technical demos, or how I tried to show that not all hackers need wear hoodies</title>
        <description>&lt;p&gt;As one of the requirements of Turing is that on three occasions you present a lightning talk on a technical topic, I had put a lot of thought into potential topics. I knew I wanted to try something that was more of a demonstration in nature rather than just informative. After creating and presenting a demo of cross-site scripting that was successful for several of my own criteria, including audience interaction, I offer the lessons I learned on implementing your own technical demonstration.
&lt;!--more--&gt;&lt;/p&gt;

&lt;p&gt;Early on I had jokingly tweeted about wanting to use stock photography in a technical talk, since the general expectation in the infosec community is the ridiculous public perception of hackers, or at least or at least as portrayed by the media. A topic for another blog post would be how the image-driven format in technology-focused media outlets works well for gadget reporting, but lends to stereotypical presentations for more abstract science or IT topics.&lt;/p&gt;

&lt;blockquote class=&quot;twitter-tweet&quot; data-lang=&quot;en&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;My first Turing lightning talk will lead w/ numerous bad stock photos of infosec, in quick succession. Maybe set to 80s movie montage music.&lt;/p&gt;&amp;mdash; Heidi Hoopes (@HeidiHoopes) &lt;a href=&quot;https://twitter.com/HeidiHoopes/status/688191702562045953&quot;&gt;January 16, 2016&lt;/a&gt;&lt;/blockquote&gt;
&lt;script async=&quot;&quot; src=&quot;//platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;

&lt;h3&gt;Lesson 1: Use appropriate tools&lt;/h3&gt;
&lt;p&gt;While our module is currently focused around learning Rails to serve web apps, we started with Sinatra, a lighter weight framework than Rails with fewer “helpers” to get things done. So why did I choose to demonstrate XSS attacks on a website I built with Sinatra?&lt;/p&gt;

&lt;p&gt;Simple. I had done research and learned that Rails already contains a lot of helper methods to validate, sanitize, and encode data. Because one of the larger points I was hoping my demonstration would drive home was that hacking code can lead to learning, I wanted a simpler tool, not something with built-in methods that might lead to a developer feeling &quot;safe&quot; or &quot;complacent&quot; about needing to understand the root problem.

While these solutions proved simple, more complex demos will ultimately require numerous demos of the demo, so to speak. Don&apos;t let your lack of tool preparation distract or break your demo when it&apos;s almost always going to be the simplest piece to address.

&lt;h3&gt;Lesson 2: Control the interaction&lt;/h3&gt;
I hoped that the audience would load up the URL I offered for my demo web app, but wasn&apos;t quite sure if they would engaged. I planned as if they would and created a script to quickly drop and reset my database should my classmates choose to try out their own XSS attacks on my server.


&lt;p&gt;Indeed, by the second time I flipped back to the website from my slides, I was greeted by numerous pop-up alerts that had been embedded in my database. Amusingly I had lost my terminal screen in my maze of Mac mirrored screens and was only able to reset the database once, so pressed on with multiple alerts.

&lt;p&gt;While in some ways this effect was entirely within the expectations for the talk, it did add a little to my inner chaos. Perhaps, also, I might argue that I should&apos;ve dropped the database when I wasn&apos;t interacting directly with the website, potentially to keep my audience from getting too distracted.

&lt;h3&gt;Lesson 3: Balance demonstration with instruction&lt;/h3&gt;
The flow of my presentation had three examples: a simple XSS mistake or accident, another demonstrating what a real attack might look like and be countered by, and then finally an attack from a plant in the audience that used more sophisticated misuse of HTML tags.

This correspondingly let me engage the audience in a demonstration, but then provide context and instruction. The first example introduced the idea of XSS, that database rows can contain any data the user submits, even that with unintended effects when propagated to the view The second example allowed me to lead into introducing (OWASP)[http://www.owasp.org] as a resource and explaining potential attacks and defenses.&lt;/p&gt;

&lt;p&gt;Finally, the last example let me pivot on my primary point that hacking teaches us about code. It let me prove in real-time that coding with an assumption of trust about a user blinds us, in this case, to how a simple image tag can be misused, rendering our intentions and perceptions meaningless.

&lt;h3&gt;Final score:&lt;/h3&gt;
I got a lot of laughs for my final XSS demo(I embedded the school favorite Kazoo Kid remix in the page), and a lot of pleased feedback. If there&apos;s something you can teach even better by using a demo the audience can engage with, I suggest you take that extra time to drive the point home even better.

&lt;blockquote class=&quot;twitter-tweet&quot; data-lang=&quot;en&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;Using stock photography of hackers in a lightning talk, off the bucket list &lt;a href=&quot;https://t.co/kbwCo2DJDM&quot;&gt;pic.twitter.com/kbwCo2DJDM&lt;/a&gt;&lt;/p&gt;&amp;mdash; Heidi Hoopes (@HeidiHoopes) &lt;a href=&quot;https://twitter.com/HeidiHoopes/status/703762680864092160&quot;&gt;February 28, 2016&lt;/a&gt;&lt;/blockquote&gt;
&lt;script async=&quot;&quot; src=&quot;//platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
&lt;/p&gt;&lt;/p&gt;&lt;/p&gt;
</description>
        <pubDate>Thu, 10 Mar 2016 08:24:00 +0000</pubDate>
        <link>hhoopes.github.io/technical/communication/2016/03/10/dynamic-interactive-technical-presentations/</link>
        <guid isPermaLink="true">hhoopes.github.io/technical/communication/2016/03/10/dynamic-interactive-technical-presentations/</guid>
        
        
        <category>technical</category>
        
        <category>communication</category>
        
      </item>
    
      <item>
        <title>Learning about ERB...and actually using ERB</title>
        <description>&lt;p&gt;I ran into an issue trying to get Jekyll variables for previous and next pages to work, and assumed there was some Jekyll magic I was missing. Though I was misunderstanding part of the way Jekyll variables can be chained together, what I was really missing was realizing I could apply knowledge I already had to make Jekyll better.
&lt;!--more--&gt;
Jekyll has variables that hold the URL for the previous page relative to the file you’re in, or &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;page.previous.url&lt;/code&gt;. However, I wanted to evaluate if there was actually a previous post, or if I was at the final one, chronologically speaking.&lt;/p&gt;

&lt;p&gt;What I failed to realize was that I already had learned the tools necessary to allow Jekyll to evaluate that, in the form of the &lt;b&gt;E&lt;/b&gt;mbedded &lt;b&gt;R&lt;/b&gt;u&lt;b&gt;b&lt;/b&gt;y that is already all throughout a Jekyll layout. So to add one more tiny piece of code, not &lt;code&gt;{{page.previous.url}}&lt;/code&gt;, but &lt;code&gt;{% if page.previous.url %}&lt;/code&gt;  .&lt;/p&gt;

&lt;p&gt;I am finding I still have a disconnect as I’m thrown into learning things as quickly as possible. There’s feeling like a beginner, but also testing the boundaries of what I know or could do. I still Google all the time and hope for code snippets. But sometimes I don’t know that I already know how to figure out what I want to know.&lt;/p&gt;

&lt;p&gt;In other words, in a somewhat cheesy koan, the magic isn’t in Jekyll, it’s in me. ;)&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/meerkats3d-02_51265_600x450.jpg&quot; alt=&quot;meerkats!&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Picture included because I’m still testing formatting tweaks. Enjoy the meerkat.&lt;/em&gt;&lt;/p&gt;
</description>
        <pubDate>Fri, 29 Jan 2016 11:50:46 +0000</pubDate>
        <link>hhoopes.github.io/2016/01/29/how-do-pages-paginate/</link>
        <guid isPermaLink="true">hhoopes.github.io/2016/01/29/how-do-pages-paginate/</guid>
        
        
      </item>
    
      <item>
        <title>First Commit</title>
        <description>&lt;p&gt;As cliche as the ubiquitious first post is, it’s also a fun reminder to disconnect yourself from obligations or mental hangups.&lt;/p&gt;

&lt;p&gt;As part of beginning the second instructional module at &lt;a href=&quot;http://turing.io&quot;&gt;Turing School&lt;/a&gt; I was to learn (refresh) my knowledge of HTML and CSS and create a blog to contribute technical posts to during the course of the year. It was recommended we try Jekyll, described as a “blog-aware” static page tool. I had utterly forgotten that my husband Mark began using Jekyll years ago, while I was fumbling with WordPress themes.
&lt;!--more--&gt;&lt;/p&gt;

&lt;p&gt;The calendar at Turing is so crowded, and my workflow currently so centered around a text editor and git, that it was frankly refreshing to admit that I just wanted to try something different.&lt;/p&gt;

&lt;p&gt;I’m using Jekyll through the Ruby gem. &lt;a href=&quot;http://jekyllrb.com/&quot;&gt;Take a look.&lt;/a&gt; Eventually I might move it over to my husband’s VPN, but again, simplicity is sometimes nice!&lt;/p&gt;

&lt;p&gt;My personal blog is still online, though quiet, at &lt;a href=&quot;http://tryptophantastic.com&quot;&gt;tryptophantastic.com&lt;/a&gt;.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-ruby&quot; data-lang=&quot;ruby&quot;&gt;&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;print_greeting&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;nb&quot;&gt;puts&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;Hello, &lt;/span&gt;&lt;span class=&quot;si&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;
&lt;span class=&quot;n&quot;&gt;print_greeting&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&apos;World&apos;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;#=&amp;gt; prints &apos;Hello, World&apos; to STDOUT.&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

</description>
        <pubDate>Thu, 28 Jan 2016 14:04:27 +0000</pubDate>
        <link>hhoopes.github.io/meta/2016/01/28/first-commit/</link>
        <guid isPermaLink="true">hhoopes.github.io/meta/2016/01/28/first-commit/</guid>
        
        
        <category>meta</category>
        
      </item>
    
  </channel>
</rss>
