nerdery
I come from the before times. The times where PHP was it, many were switching from tables to css, Bush was president and you had to get help from some weird phpBB forum post where the signatures took up half the screen—and you LIKED IT!
I need a more ominous before picture...
If that's how I think of the times before Bootstrap, how will I think of Bootstrap 5 years from now?
I am writing this as a tool to help me learn more about Ionic and Bootstrap to decide which, if either, library to use for my new hybrid web app. My app has to look good and function well on desktop, tablet and mobile.
I haven't used Ionic at all, yet, but I have used Bootstrap for over a dozen projects. I love bootstrap, but there are some things that definitely bug me and I'd love to learn about some alternatives.
Columns. Rows. Grids.
It's only getting more complex with .col-md-12, .col-xs-12 and such. These things aren't hard to learn, but I had just
gotten the hang of doing the whole .container .row .span dance. Oh, don't forget .row-fluid was awesome, too.
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div>
Unforunately Bootstrap requires jQuery, but there is an awesome repo that has a version of Bootstrap without the jQuery requirement!
This is a criticism a lot of people have that I don't entirely share, however I thought I'd mention it anyway. Many sites are using basic bootstrap stuff without tweaking it much—doesn't really bother me, I think it's an important tool for developers who aren't designers.
Boy did they nail it. I feel like Bootstrap had the best documentation of any library a couple years ago, and it still may hold that title. It's a snap to find what you are looking for, the explanations are easy to understand and there are examples for nearly everything.
Bootstrap is getting more and more mature, people know how to use it and appreciate it. There are lots of tried-and-true plugins, examples, tutorials, videos, etc. for Bootstrap.
Typeahead, image sliders, on and on. So many useful little features, so easy to use and expand. It's nice to be able to rely on a library most of the time!
Shit is written with FLEXBOX! I have been waiting for some kind of support for this forever, a good friend of mine Levi Thomason tried to explain it to my glazed over eyes but I think I caught the jist. Flexbox solves a ton of problems that are normally solved with floats, tricks, and wizardry:
Ionic is built on top of AngularJS for all of the interactions, that is awesome. AngularJS makes writing front end stuff so much less painful and so much easier to test. Way back when I couldn't imagine writing tests for jQuery stuff, how would I emulate so many DOM elements?
AngularJS helps you write unit-testable code by abstracting away the DOM, instead you play around in a $scope
where all data is stored.
Maybe it's because I am so used to how Bootstrap has everything laid out, but it just feels a little wonky and lacking sometimes. For example, how the hell do I use that awesome list of animations? How do I use gestures? I had to look at the source code to figure out what I was doing wrong.
Ionic is built only for mobile, which is a big problem for me because I want to design a hybrid mobile/desktop app.
However, I feel like I just need to "do it" and try. Every other UI framework I've used on mobile has performed terribly, but Ionic has been doing pretty good so far.
I'm not a huge fan of the colors/styles available now, but I am sure that will get better as the project matures. Do we really need like 10 colors for buttons?
Ionic seems to only support mobile, although it says it is a Hybrid framework. I feel like Bootstrap is much better at doing desktop. This comparison seems more apples to orange than I first suspected, these frameworks are solving totally different things.
I am going to give Ionic a shot for my next app even though it only seems to support mobile, I have already started and it's not going terribly, here's what I have so far for my workout tracking app:
Workout entry screen. This took a few hours and looks terrible but,
I'm happy with the performance so far!
I am a shoot from the hip kind of guy, I like to do things fast—if I messed up on any details about Bootstrap or Ionic, please correct me!
Is something easier than I am making it seem? Am I doing something wrong? Let me know! I plan to update this as I learn more.
Deciding what static site generator to use was tricky. The first option was Jekyll which is ruby and I'm looking for something python. Next I looked at Hyde but that had the extra requirement of Django. I feel like all I need something super simple that has the bare minimum to poop out content from markdown.
Then I finally found Pelican and it seems to satisfy all of my needs: python, ultra simple integration with heroku via this buildout!
> pelican-quickstart
That will take you through a wizard to create a project structure like:
yourproject/
├── content
│ └── (pages)
├── output
├── develop_server.sh
├── fabfile.py
├── Makefile
├── pelicanconf.py # Main settings file
└── publishconf.py # Settings to use when ready to publish
> make regenerate
Any time you make a change to a piece of content the site is rebuilt.
This is what I ended up with for a rough rough draft, from examples in pelican-themes repo
mytheme/
├── static/
│ └── css/
│ └── fonts/
│ └── images/
└── templates/
└── includes/
│ └── _article.html
└── article.html
└── base.html
└── index.html
└── page.html
Added this to the bottom of my _article.html
{% if article.tags %}
<div class="tags">
<i class="fa fa-tags"></i>
{% for tag in article.tags %}
<a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</div>
{% endif %}
Added this to my menu, the "blog" is just a link back to index, so I added that manually
<div class="menu">
<ul>
<li><a href="{{ SITEURL }}/index.html">blog</a></li>
{% for page in pages %}
<li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title|lower }}</a></li>
{% endfor %}
</ul>
</div>
> git push heroku master
Used the assets plugin from pelican-plugins which requires the webassets python module.
{% assets filters="cssmin", output="css/packed.min.css", "css/bootstrap.min.css", "css/pygment-solarized.css", "css/main.css" %}
<link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
{% endassets %}
Created an environment variable PELICAN_SITE_URL for my virtualenv and on heroku, that way I can set it locally and test with make regenerate easily.
Signed up on disqus and got the embed code, then added the disqus_identifier, disqus_title and disqus_url extra configuration variables.
To the bottom of article.html I added:
<div class="disqus">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'ericcarmichaelsnerdery';
var disqus_identifier = '{{ article.url }}';
var disqus_title = '{{ article.title }}';
var disqus_url = '{{ SITEURL }}/{{ article.url }}';
(function() {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
Pretty dissappointed in disqus, can't style it very easily and I feel it clashes with the style of the blog quite a bit.
Man. What a joy! Everything made sense, except for a couple hiccups with webassets that ended up being my fault, typical!
I'd recommend Pelican to anyone looking to start a simple blog, it was a joy to work with thanks to all of the hard work
that went into pelican-quickstart and the custom heroku buildout!