Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Django vs Flask Worksheet from https://wakatime.com/django-vs-flask-worksheet
{% extends "common/base.html" %}
{% block subtitle %}Django vs Flask Worksheet{% endblock %}
{% block css %}
{% compress 'css' %}
<link href="{{STATIC_URL}}libs/fullpage.js/jquery.fullPage.css" rel="stylesheet" type="text/css">
<link href="{{STATIC_URL}}css/django-vs-flask-worksheet.less" rel="stylesheet" type="text/less">
{% endcompress %}
{% endblock %}
{% block content %}
<div id="fullpage">
<div class="section">
<div class="m-bottom-xs-160 center-xs">
<div id="result-winner"><span class="title">You should use: </span><span class="value">[FINISH QUESTIONS FOR RESULT]</span></div>
<div id="result-totals"><div class="title">Totals</div><div class="value"></div></div>
<div class="m-top-xs-40">
<span class="m-right-sm-30">
<iframe src="//platform.twitter.com/widgets/tweet_button.1384994725.html#_=377230709693470&count=horizontal&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Fwakatime.com%2Fdjango-vs-flask-worksheet%2F&size=m&text=Can%27t%20decide%20between%20Django%20or%20Flask%3F%20This%20worksheet%20shows%20you%20how.&url=https%3A%2F%2Fwakatime.com%2Fdjango-vs-flask-worksheet%2F&via=WakaTime"
allowtransparency="true" frameborder="0" scrolling="no"
style="width:100px; height:20px;">
</iframe>
</span>
<span>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwakatime.com%2Fdjango-vs-flask-worksheet%2F&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=672782146122594" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:90px;" allowTransparency="true"></iframe>
</span>
</div>
<div class="m-top-xs-40">
Read more about <a href="https://wakatime.com/blog/25-pirates-use-flask-the-navy-uses-django">Django vs Flask</a>.
</div>
</div>
</div>
</div>
{% raw %}
<script id="section-template" type="x-tmpl-mustache">
<div class="section">
<div class="m-bottom-xs-160 center-xs">
<div class="container-fluid">
<div class="row">
<div class="col-xs-5 col-xs-offset-2 right-xs">
<div class="row">
<div class="col-xs-12">
<div class="question">{{question}}</div>
</div>
<div class="col-xs-12">
<div class="description">{{{description}}}</div>
</div>
</div>
</div>
<div class="col-xs-4 left-xs">
<span class="answer yes btn btn-default btn-lg">YES</span>
<span class="answer no btn btn-default btn-lg">NO</span>
</div>
</div>
</div>
</div>
</div>
</script>
{% endraw %}
{% endblock %}
{% block javascript %}
{% compress 'js' %}
<script src="{{ STATIC_URL }}libs/fullpage.js/jquery.fullPage.js"></script>
<script src="{{ STATIC_URL }}js/django-vs-flask-worksheet.js"></script>
{% endcompress %}
{% endblock %}
$(function() {
var scores = {};
var questions = [
{
question: "Have you been coding for more than 5 years?",
description: "Even though Flask is easier to get started than Django, it doesn't hold your hand through the whole process. Django on the other hand has guides for everything.",
yes: 'Flask',
no: 'Django',
},
{
question: "Have you coded in Python for more than 3 years?",
description: "Flask is so easy to get started, you don't even need to know Python to make your first website. Using Flask is actually a great way to learn Python.",
yes: 'Django',
no: 'Flask',
},
{
question: "Do you like reading Python code? (vs reading docs)",
description: "Have a few hours? Grab a coffee and read the Flask source code. It's micro so you can actually read the whole source in one sitting.",
yes: 'Flask',
no: 'Django',
},
{
question: "Will you have an API?",
description: "Flask > Django for APIs. For example, a nested api resource in Flask is <code>@app.route('/users/&lt;string:user_id&gt;/teams/&lt;string:team_id&gt;', methods=['GET', 'POST'])</code> while with Django REST framework this is impossible. (<a href=\"https://github.com/alanjds/drf-nested-routers\" target=\"_blank\">drf-nested-routers</a> helps but breaks unless you use only the most basic Django REST framework features.",
yes: 'Flask',
no: 'Django',
},
{
question: "Will your site primarily have dynamic HTML pages?",
description: "This is the opposite of an API heavy site. Django makes building HTML websites easier.",
yes: 'Django',
no: 'Flask',
},
{
question: "Will you use Service Oriented Architecture (SOA)?",
description: "Because of it's micro principles, Flask is easier to use with SOA than Django.",
yes: 'Flask',
no: 'Django',
},
{
question: "Using an SQL database?",
description: "Complicated SQL queries are a piece of cake with Django's built-in ORM. Most people use SQLAlchemy with Flask, which is powerful but not as easy to use as Django's ORM.",
yes: 'Django',
no: 'Flask',
},
{
question: "Want new devs to already know your conventions?",
description: "New devs joining your team will already know how to code the Django way. Flask is more flexible, which leads to larger variance in conventions.",
yes: 'Django',
no: 'Flask',
},
];
// Render questions and add to page
var template = $('#section-template').html();
_.each(_.clone(questions).reverse(), function(question) {
$('#fullpage').prepend(Mustache.render(template, question));
});
$('#fullpage').fullpage({
//Navigation
navigation: true,
navigationPosition: 'right',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: false,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
sectionsColor: ['#D5FFD4', '#F1C2FF', '#FFED98', '#FFBF7C', '#BCF6AC', '#F9E4B6', '#61B9FF', '#D5FFD4'],
paddingTop: '0px',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction){},
});
// Disable scrolling
$.fn.fullpage.setAllowScrolling(false);
$('#fullpage').find('.answer').on('click', function(e) {
e && e.preventDefault();
var choice = $(e.target).hasClass('yes') ? 'yes' : 'no';
var index = 0;
var found = false;
$('#fullpage .section').each(function() {
if ($.contains(this, e.target)) found = true;
if (!found) index += 1;
});
scores[index] = questions[index][choice];
if (index + 1 == questions.length) {
// Answered all questions, now show result
var winners = {};
_.each(scores, function(choice) {
if (!winners[choice]) winners[choice] = 0;
winners[choice] += 1;
});
var tie = false;
var winner = undefined;
_.each(winners, function(score, choice) {
if (winner && winners[winner] == score) {
winner = 'It\'s a tie! Read about <a href="https://wakatime.com/blog/25-pirates-use-flask-the-navy-uses-django">Django vs Flask</a> to make your own choice.';
tie = true;
} else if (!winner || winners[winner] < score) {
winner = choice;
}
});
var $totals = $('<div />');
_.each(winners, function(score, choice) {
var $html = '<div>' + choice + ': ' + score + '</div>';
$totals.append($html);
});
$('#result-winner .value').html(winner);
$('#result-totals .value').html($totals);
if (tie) {
$('#result-winner .title').remove();
}
}
// Scroll down to next section
$.fn.fullpage.moveSectionDown();
});
});
.navbar {
margin-bottom: 0px;
}
.question {
font-size: 24px;
font-weight: 700;
}
.description {
font-size: 17px;
font-weight: normal;
color: #555459;
code {
font-size: 12px;
}
}
.answer {
margin-right: 16px;
cursor: pointer;
}
#result-winner {
margin-bottom: 20px;
.title {
font-weight: bold;
font-size: 36px;
}
.value {
font-size: 36px;
}
}
#result-totals {
.title {
font-weight: bold;
font-size: 24px;
}
.value {
font-size: 24px;
}
}
#fullpage {
top: -10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.