new devops and responsive design resources

mattmakai · mattmakai · commit a3fa22cefb53 · 2018-09-23T10:19:17.000-04:00
diff --git a/content/pages/04-web-development/03-flask.markdown b/content/pages/04-web-development/03-flask.markdown
@@ -153,6 +153,7 @@ for getting started.
 
 * [Developing a Single Page App with Flask and Vue.js](https://testdriven.io/developing-a-single-page-app-with-flask-and-vuejs) step-by-step walkthrough of how to set up a basic CRUD app with Vue and Flask.
 
+
 ### Intermediate to advanced Flask resources
 Once you move past the beginner tutorials and have created a few Flask
 projects you will want to learn how to use Flask extensions, 
@@ -229,6 +230,10 @@ combined with the example real-world projects listed in the next section.
   [Amazon Web Services' S3](https://aws.amazon.com/s3/) with a Flask 
   application.
 
+* [Visualize your trip with Flask and Mapbox](http://kazuar.github.io/visualize-trip-with-flask-and-mapbox/)
+  uses geographic GeoJSON data and presents it in a Flask application
+  that uses [Mapbox](https://www.mapbox.com/).
+
 * [Handling Email Confirmation in Flask](https://realpython.com/blog/python/handling-email-confirmation-in-flask/)
   is a great walkthrough for a common use case of ensuring an email address
   matches with the user's login information.
@@ -244,6 +249,7 @@ combined with the example real-world projects listed in the next section.
 
 * [Dynamic Secret Generation with Vault and Flask](https://testdriven.io/dynamic-secret-generation-with-vault-and-flask) looks at how to use Hashicorp's Vault and Consul to create dynamic Postgres credentials for a Flask web app.
 
+
 ### Open source Flask example projects
 Flask's lack of standard boilerplate via a commandline interface for
 setting up your project structure is a double edged sword. When you
@@ -256,6 +262,11 @@ about how to working on your codebase.
   flight tracking web application built with Flask. You can check out a 
   [running version of the application](https://skylines.aero/).
 
+* [Flask JSONDash](https://github.com/christabor/flask_jsondash) is a Flask
+  blueprint that creates JavaScript Object Notiation (JSON) 
+  [APIs](/application-programming-interfaces.html) for [data](/data.html)
+  dashboards.
+
 * [Microblog](https://github.com/miguelgrinberg/microblog) is the companion
   open source project that goes along with Miguel Grinberg's O'Reilly Flask
   book.
@@ -269,6 +280,10 @@ about how to working on your codebase.
   along with the 
   [source code in Gists](https://gist.github.com/coleifer/632d3c9aa6b2ea519384).
 
+* [Reddit Job Search](https://github.com/anis-coding/Reddit-Job-Search)
+  uses the [Reddit API](https://www.reddit.com/dev/api/) for a jobs data set
+  and presents them via a Flask web app.
+
 * [Bean Counter](https://github.com/BouncyNudibranch/bean-counter) is an
   open source Flask app for tracking coffee.
 
diff --git a/content/pages/04-web-development/18-responsive-design.markdown b/content/pages/04-web-development/18-responsive-design.markdown
@@ -13,7 +13,7 @@ Responsive design is a method of using media queries in
 site is usable on various devices with different screen sizes, from very
 small to very large.
 
-<img src="/img/visuals/responsive-design.jpg" width="100%" alt="Three different screen sizes and devices with the same website that uses a responsive designt." class="technical-diagram" style="border: 1px solid #999;border-radius: 5px" />
+<img src="/img/visuals/responsive-design.jpg" width="100%" alt="Three different screen sizes and devices with the same website that uses a responsive designt." class="shot outl rnd">
 
 Full Stack Python uses responsive design to improve readability across
 a broad range of devices that people use to read this site.
@@ -29,6 +29,10 @@ a broad range of devices that people use to read this site.
 * This [site is entirely on responsive design](https://responsivedesign.is/)
   and has many articles on how to achieve readability across devices.
 
+* [Using Media Queries For Responsive Design In 2018](https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/)
+  contains a bunch of great examples for how to use media queries to
+  achieve a responsive design.
+
 * Smashing Magazine's article from 2011 on
   [responsive design - what it is and how to use it](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/)
   remains a definitive source for understanding why sites should be
diff --git a/content/pages/06-devops/00-devops.markdown b/content/pages/06-devops/00-devops.markdown
@@ -25,6 +25,11 @@ automate the delivery of code from development to production.
 
 
 ## DevOps tooling resources
+DevOps cannot be performed with tools alone, but having the right tools
+to augment the culture and processes is important to successful software
+delivery. The following resources discuss both Python-specific and general
+tools and services for DevOps environments.
+
 * [DevOps: Python tools to get started](https://speakerdeck.com/victorneo/devops-python-tools-to-get-started)
   is a presentation slideshow that explains that while DevOps is a culture, 
   it can be supported by tools such as Fabric, Jenkins, BuildBot and Git
@@ -42,6 +47,9 @@ automate the delivery of code from development to production.
 
 
 ## General DevOps resources
+The following resources give advice and approaches for building the right
+teams, culture, processes and tools into software development organizations.
+
 * [DevOps vs. Platform Engineering](https://alexgaynor.net/2015/mar/06/devops-vs-platform-engineering/)
   considers DevOps an ad hoc approach to developing software while building
   a platform is a strict contract. I see this as "DevOps is a process", 
diff --git a/static/img/180914-flask-okta/activate-virtualenv.jpg b/static/img/180914-flask-okta/activate-virtualenv.jpg
diff --git a/theme/templates/table-of-contents.html b/theme/templates/table-of-contents.html
@@ -125,7 +125,7 @@ <h4>4.9 <a href="/networking.html">Networking</a></h4>
 <div class="tc"><a href="/webrtc.html">WebRTC</a></div>
 <h4>4.10 <a href="/application-programming-interfaces.html">Web APIs</a></h4>
 <div class="tc tds"><a href="/microservices.html">Microservices</a></div>
-<div class="tc tds sn">Webhooks</div>
+<div class="tc tds"><a href="/webhooks.html">Webhooks</a></div>
 <div class="tc tds"><a href="/bots.html">Bots</a></div>
 <h4>4.11 <a href="/api-creation.html">API creation</a></h4>
 <div class="tc tds sn">Django REST Framework</div>
