Skip to content

Commit 86a70ef

Browse files
mattmakaimattmakai
committed
new web design resources and update blog post with some clarifying details
1 parent fa7247d commit 86a70ef

File tree

11 files changed

+110
-14
lines changed

11 files changed

+110
-14
lines changed

‎content/pages/02-development-environments/08-bash-shell.markdown‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,6 @@ during Python software development as part of a programmer's
7878
has a bunch of shell aliases that make it easier for you to execute
7979
complicated or uncommon [Git](/git.html) commands.
8080

81+
* [Creating a bash completion script](https://iridakos.com/tutorials/2018/03/01/bash-programmable-completion-tutorial.html)
82+
is a great tutorial that walks you through a reasonably complex Bash
83+
script for completing syntax in other Bash shell scripts.

‎content/pages/04-web-development/00-web-development.markdown‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,4 +156,8 @@ world.
156156
* [How to understand performance tests](https://fly.io/articles/how-to-understand-performance-tests/)
157157
is an important topic because many websites are slow and bloated.
158158
Learning about improving the performance of your site is one of
159-
the best ways to become a better web developer.
159+
the best ways to become a better web developer. Another great article on
160+
website performance is
161+
[The average web page is 3MB. How much should we care?](https://speedcurve.com/blog/web-performance-page-bloat/).
162+
The visuals alone tell a compelling story about how large webpage
163+
sizes have grown in recent years.

‎content/pages/04-web-development/15-web-design.markdown‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,20 @@ width.
4040

4141

4242
## Design resources
43-
* [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) is
44-
an amazing write up of good practices for HTML, CSS and JS.
43+
* [Clean up your mess: A Guide to Visual Design for Everyone](http://www.visualmess.com/index.html)
44+
walks through the basic principles for clean and effective design. You
45+
can make a website go from terrible to well-designed often by following
46+
a few principles on spacing, alignment, contrast and repetition of
47+
page elements.
48+
49+
* [Resilient web design](https://resilientwebdesign.com/) is an incredible
50+
online book that teaches how to create websitess that are accessible to
51+
every reader and look great while doing it.
52+
53+
* [Design 101 for Developers](https://academy.realm.io/posts/christopher-downer-design-101-for-developers/)
54+
gives away the "secrets" to good design that designers follow but that
55+
can be similarly accessible to developers who understand what they want
56+
their design to accomplish.
4557

4658
* [How I Work with Color](https://medium.com/@JustinMezzell/how-i-work-with-color-8439c98ae5ed)
4759
is a fantastic article from a professional designer on how he thinks
@@ -52,15 +64,12 @@ width.
5264
Highly recommended especially if you feel you have no design skills but
5365
need to learn them.
5466

55-
* [Learn Design Principles](http://learndesignprinciples.com) is a well
56-
thought out clear explanation for how to think about design according to
57-
specific rules such as axis, symmetry, hierarchy and rhythm.
58-
5967
* [Kuler](https://kuler.adobe.com/create/color-wheel/) is a complementary
6068
color picker by Adobe that helps choose colors for your designs.
6169

62-
* If you want to learn more about how browsers work behind the scenes,
63-
here's a
70+
* If you want to learn more about how browsers work behind the scenes
71+
to render a webpage's design,
72+
here is a
6473
[blog post series on building a browser engine](http://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html)
6574
that will show you how to build a simple rendering engine.
6675

@@ -70,3 +79,13 @@ width.
7079
down the differences between specifying predefined color values,
7180
hexadecimal values, red-green-blue (RGB) and
7281
Hue-Saturation-Lightness (HSL).
82+
83+
84+
### Checklists and design guidelines
85+
* [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) is
86+
an amazing write up of good practices for HTML, CSS and JS.
87+
88+
* [Learn Design Principles](http://learndesignprinciples.com) is a well
89+
thought out clear explanation for how to think about design according to
90+
specific rules such as axis, symmetry, hierarchy and rhythm.
91+

‎content/pages/04-web-development/16-html.markdown‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,7 @@ and is used to display website and web application content.
3131
[HTML basics](https://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1)
3232
course provides an interactive environment for learning the
3333
gist of the markup language.
34+
35+
* [A list of everything that *could* go in the head of your document](https://github.com/joshbuchea/HEAD)
36+
provides a comprehensive reference for elements that are required
37+
or optional in the `<head>` element of your webpage.

‎content/pages/04-web-development/23-javascript.markdown‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@ which is defined by the
5757
* [A re-introduction to JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
5858
by Mozilla walks through the basic syntax and operators.
5959

60+
* [The State of JavaScript report](https://stateofjs.com/) contains a wealth
61+
of data on what libraries developers are using in the JavaScript
62+
ecosystem. There are also reports from previous years which show how the
63+
community's preferences have changed over time.
64+
6065
* [Coding tools and JavaScript libraries](http://www.smashingmagazine.com/2011/10/28/useful-coding-workflow-tools-for-web-designers-developers/)
6166
is a huge list by Smashing Magazine with explanations for each tool and
6267
library for working with JavaScript.

‎content/pages/04-web-development/35-testing.markdown‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,22 @@ language, testing takes on even greater importance for ensuring program
4343
correctness.
4444

4545

46-
## Testing resources
46+
## Python testing tools
47+
The Python ecosystem has a wealth of tools to make it easier to run
48+
your tests and interpret the results. The following tools encompass
49+
test runners, coverage reports and related libraries.
50+
51+
* [green](https://github.com/cleancut/green) is a test runner that has
52+
pretty printing on output to make the results easier to read and
53+
understand.
54+
55+
* [requestium](https://github.com/tryolabs/requestium) merges the
56+
Requests library with Selenium to make it easier to run automated
57+
browser tests.
58+
59+
60+
61+
### Testing resources
4762
* [The Minimum Viable Test Suite](https://realpython.com/blog/python/the-minimum-viable-test-suite/)
4863
shows how to set unit tests and integration tests for a Flask example
4964
application.

‎content/pages/04-web-development/49-api-frameworks.markdown‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
title: API Frameworks
2+
category: page
3+
slug: api-frameworks
4+
sortorder: 0449
5+
toc: False
6+
sidebartitle: API Frameworks
7+
meta: API frameworks are code libraries that provide well-tested, commonly-used functionality when building a web API.
8+
9+
10+
# API Frameworks
11+
API frameworks are code libraries that provide commonly-used functionality
12+
when building your own
13+
[web application programming interfaces](/application-programming-interfaces.html)
14+
(APIs).
15+
16+
17+
## Python API Frameworks
18+
* [Django REST Framework](/django-rest-framework-drf.html)
19+
20+
* [API Star](https://docs.apistar.com/)
21+
22+
* Starlette
23+
24+
* Flask RESTful

content/pages/04-web-development/49-django-rest-framework-drf.markdown renamed to content/pages/04-web-development/50-django-rest-framework-drf.markdown

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
title: Django REST Framework
22
category: page
33
slug: django-rest-framework-drf
4-
sortorder: 0449
4+
sortorder: 0450
55
toc: False
66
sidebartitle: Django REST Framework
77
meta: Django REST Framework (DRF) is a Python library for building web application programming interfaces (APIs).

‎content/posts/181008-add-user-auth-flask-okta.markdown‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: add-user-authentication-flask-apps-okta
33
meta: How to quickly add user authentication to Flask web applications using the Okta service.
44
category: post
55
date: 2018-10-08
6-
modified: 2018-10-08
6+
modified: 2018-10-10
77
newsletter: False
88
headerimage: /img/181008-flask-okta/header.jpg
99
headeralt: Flask and Okta logos. Copyright their respective owners.
@@ -420,7 +420,11 @@ def landing_page():
420420
~~ return redirect(url_for(".landing_page"))
421421
```
422422

423-
The above new highlighted lines do *x*.
423+
The above new highlighted lines check whether or not a user is logged in
424+
before each request. If a route requires a logged in user due to the
425+
`@oidc.require_login` decorator then the user will be redirect to the
426+
sign in page. We also added routes under `/login` and `/logout` to make
427+
it possible to log in and out of the application.
424428

425429
Set three environment variables so our application can use them when we
426430
run it. Make sure the placeholders `ORG_URL` and `AUTH_TOKEN` are set with

‎theme/templates/choices/api-frameworks.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<h3>What's next after building an API?</h3>
2+
<div class="row">
3+
<div class="c4">
4+
<div class="well select-next">
5+
{% include "choices/buttons/databases.html" %}
6+
</div>
7+
</div>
8+
<div class="c4">
9+
<div class="well select-next">
10+
{% include "choices/buttons/api-integration.html" %}
11+
</div>
12+
</div>
13+
<div class="c4">
14+
<div class="well select-next">
15+
{% include "choices/buttons/best-python-resources.html" %}
16+
</div>
17+
</div>
18+
</div>

0 commit comments

Comments
 (0)