Add old blog post images/embeds

This commit is contained in:
Tyler Hallada 2014-07-28 15:13:49 -04:00
parent 3299254995
commit 72f340e28d
31 changed files with 127 additions and 24 deletions

View File

@ -0,0 +1,107 @@
---
title: Hello, World!
layout: post
---
This past summer, I decided that the basic HTML site that I had at hallada.net
wasn't going to cut it anymore. I needed a blog.
At that point, I had already come a long way with [Python](http://python.org/)
and was pretty familiar with it and I was beginning to get familiar with
[Django](https://www.djangoproject.com/), a web framework for Python. Django
was what I was working with at [Valti](https://www.valti.com), and I was really
liking making websites with it. It took what made Python awesome and applied
that to web development.
I started from a blank Django project and built it up from there. Django's
Object-Relational Mapper (ORM) can be boiled down to this: python classes
(called models) in a Django-specific module named `models.py` represent a table
in a database, where the attributes of the classes are columns in the table and
instances of the classes are rows. This was something that was very intuitive
for me, since I came from a Python and object-oriented programming background.
The first step was to create Entry models which would hold text, title, and
other related data pertaining to a blog post. I then created a view that would
display these Entry objects in some order. A "view" in Django is just a Python
function that accepts an HTTP request as a parameter and returns an HTTP
response that the server will then hand off to the clients browser.
From there, the project took off. It became the project where I would take all
of the refined knowledge I was gaining at Valti about Django, and apply it in a
very controlled and perfected environment.
I built other features such as Project models that hold data about a specific
project I have done, Tag models to hold a word that would categorize Entries
and Projects, an archive view that would chronologically list all of the
entries I've ever posted, and many other small things I could never list out in
one blog post.
Django itself provided many useful features for my blog. After all, it was
built for this type of use.
[Comments](https://docs.djangoproject.com/en/dev/ref/contrib/comments) were a
big feature out of the Django contrib package that I used. However, I heavily
modified the way comments work on my blog to make it more streamlined. For
example, I used [jQuery](http://jquery.com/) and
[Ajax](http://en.wikipedia.org/wiki/Ajax_(programming)) to grab another
commenter's post in pre-rendered markdown syntax and inserted it into the
comment text box when you click reply on someone's comment.
I pulled in a few third-party packages, like
[South](http://south.aeracode.org/) and
[django-markdown-deux](https://github.com/trentm/django-markdown-deux) as well
to make my life easier, but I tried to constrain them to things that would more
aid me than do all the work on the blog for me. Because the fun in creating a
blog in Django instead of using some pre-manufactured
[Wordpress](http://wordpress.org/) template is that I get to design, implement,
and maintain the site all on my own. This allows me to really truly understand
what is going on under the hood.
Surprisingly, the most difficult part of the whole project was the design of
the site. It was actually what stalled me from completing the blog until months
after I had started creating it. I absolutely despise CSS.
Luckily, I found [Bootstrap](http://twitter.github.com/bootstrap/). It's
sensible grid-system actually made sense to me. And I was able to make a decent
looking layout very quickly using it. But of course, I still stalled forever in
trying to perfect the design to get it *just* right. A couple weeks ago I
finally decided enough was enough and I was going with the current layout so I
could start blogging.
My old site was hosted on a friend's server, but this time I decided that I
would host it on my own server so I could get a better understanding of the
inner workings of web servers. I ended up hosting it on my [personal virtual
machine](http://alpaca.mit.edu) provided by [MIT's SIPB](http://sipb.mit.edu/)
[XVM project](http://xvm.mit.edu/). I had previously hosted many Django
websites through the cloud server provider [Heroku](http://www.heroku.com/),
which worked fantastically. But, I had never tried to host on my own server.
I decided on using [Apache](http://www.apache.org/) to host my website since it
was the most common throughout the web and I would be bound to encounter it
again in web development anyways. I tested the whole configuration on the
desktop computer in my dorm room before I deployed it to Alpaca (my MIT virtual
machine). There was much frustration before I got the VirtualHost configuration
in Apache set up correctly to allow access to the static files for my blog, but
it all could be chalked up to me just being generally unfamiliar with Apache.
So that is the majority of the work that went into making this blog a reality.
Again, this is something I've created that I haven't had the chance to test
extensively on a large scale, so there may be bugs here and there that you
might notice. Do me a big favor and report them to me so I can make sure my
blog is running as smoothly as possible.
Also, I welcome constructive criticism, so comment if you have any thoughts or
suggestions about my writing or the site in general. Also, I just want people
using the commenting feature so I can make sure it's really working :P
I hope you all enjoyed the first post ever on my blog.
EDIT: View the code for this project at
[GitHub](https://github.com/thallada/personalsite).
EDIT: I have since moved the site from SIPB's XVM service to SIPB's (hopefully
more reliable) [scripts service](http://scripts.mit.edu). <a
href="http://scripts.mit.edu/"><img alt="powered by scripts.mit.edu"
src="http://scripts.mit.edu/media/powered_by.gif" /></a>
EDIT: This post is now referring to an old version of my website. I have since
re-wrote my website and moved away from Django.

View File

@ -7,7 +7,7 @@ layout: post
The original intention of this blog was to serve as a place where I could The original intention of this blog was to serve as a place where I could
showcase the programming work I have done and detail my process. However, as showcase the programming work I have done and detail my process. However, as
you can tell, there hasn't been any posts since my first ["Hello, you can tell, there hasn't been any posts since my first ["Hello,
World!"](/blog/hello-world/) post. Sure, I've been working on projects, but I World!"](/2012/12/03/hello-world) post. Sure, I've been working on projects, but I
just haven't gotten to the point in any of those projects where I felt like I just haven't gotten to the point in any of those projects where I felt like I
could blog in detail about it. could blog in detail about it.

View File

@ -34,7 +34,7 @@ George Mason's campus. All of the data is scraped from the eSuds site using
every time you refresh the page. every time you refresh the page.
<div style="text-align: center"><a href="/laundry" alt="See it in action"><img <div style="text-align: center"><a href="/laundry" alt="See it in action"><img
src="/static/img/laundry_preview.png" /></a></div> src="/img/blog/laundry_preview.png" /></a></div>
The site will save which laundry room you select so when you come back you will The site will save which laundry room you select so when you come back you will
immediately see the chart for your laundry room. immediately see the chart for your laundry room.
@ -55,7 +55,7 @@ recorded the laundry usage with a [cronjob](http://en.wikipedia.org/wiki/Cron)
every 15 minutes for an entire week: to get an idea of when there is a high every 15 minutes for an entire week: to get an idea of when there is a high
probability of open machines. probability of open machines.
<embed type="image/svg+xml" src="/static/record.svg"> <embed type="image/svg+xml" src="/img/blog/record.svg">
This one is a little interactive. This one is a little interactive.

View File

@ -15,7 +15,7 @@ quite a bit of effort into it.
See it here: [swe205.hallada.net](http://swe205.hallada.net) See it here: [swe205.hallada.net](http://swe205.hallada.net)
<div style="text-align: center"> <div style="text-align: center">
<a href="http://swe205.hallada.net" alt="See it in action"> <a href="http://swe205.hallada.net" alt="See it in action">
<img src="/static/img/gmu_bookstore_preview.jpg"> <img src="/img/blog/gmu_bookstore_preview.jpg">
</a> </a>
</div> </div>
<br> <br>

View File

@ -20,7 +20,7 @@ website: [http://m.reddit.com](http://m.reddit.com), and it looks absolutely
beautiful in w3m. In fact, I think I prefer it to the normal website in any beautiful in w3m. In fact, I think I prefer it to the normal website in any
modern browser; there are no distractions, just pure content. modern browser; there are no distractions, just pure content.
<a href="/static/img/w3m_mobile_reddit.png"><img src="/static/img/w3m_mobile_reddit.png" alt="m.reddit.com rendered in w3m"></a> <a href="/img/blog/w3m_mobile_reddit.png"><img src="/img/blog/w3m_mobile_reddit.png" alt="m.reddit.com rendered in w3m"></a>
In order to get cortex to open the mobile version of reddit, I made a bash In order to get cortex to open the mobile version of reddit, I made a bash
script wrapper around w3m that takes urls and replaces `"http://reddit.com"` and script wrapper around w3m that takes urls and replaces `"http://reddit.com"` and

View File

@ -27,8 +27,8 @@ Googles ARM processor Chromebook, I discovered what makes Chromebooks, and
even ChromeOS, so amazing. **I realized there is no need for anything more than even ChromeOS, so amazing. **I realized there is no need for anything more than
Chrome**. Even for a power user like me. Chrome**. Even for a power user like me.
<a href="/static/img/full_chromebook.jpg"><img <a href="/img/blog/full_chromebook.jpg"><img
src="/static/img/full_chromebook_thumb.jpg" alt="Samsung Chromebook open on a src="/img/blog/full_chromebook_thumb.jpg" alt="Samsung Chromebook open on a
porch"></a> porch"></a>
Before long, I had completely abandoned my old heavy [2011 Dell Before long, I had completely abandoned my old heavy [2011 Dell
@ -65,12 +65,12 @@ need to on a laptop thats under $300.
for 2 years and 12 free Gogo passes with the Chromebook, which definitely comes for 2 years and 12 free Gogo passes with the Chromebook, which definitely comes
in handy. in handy.
<div> <a href="/static/img/chromebook_keyboard.jpg"><img <div> <a href="/img/blog/chromebook_keyboard.jpg"><img
src="/static/img/chromebook_keyboard_thumb.jpg" alt="Samsung Chromebook src="/img/blog/chromebook_keyboard_thumb.jpg" alt="Samsung Chromebook
keyboard up close" style="float: left;"></a> <a keyboard up close" style="float: left; width: 50%"></a> <a
href="/static/img/chromebook_trackpad.jpg"><img href="/img/blog/chromebook_trackpad.jpg"><img
src="/static/img/chromebook_trackpad_thumb.jpg" alt="Samsung Chromebook src="/img/blog/chromebook_trackpad_thumb.jpg" alt="Samsung Chromebook
trackpad up close" style="float: right;"></a> </div> <br> trackpad up close" style="float: right; width: 50%"></a> </div> <br>
While that all of that is nice, the Chromebook still only has 16GB internal While that all of that is nice, the Chromebook still only has 16GB internal
storage, no DVD drive, no ethernet port, and hardly any processing power. And I storage, no DVD drive, no ethernet port, and hardly any processing power. And I
@ -98,8 +98,8 @@ that channel and enable “Immersive Mode” in `chrome://flags` to get it looki
like I have in the screenshot ([more like I have in the screenshot ([more
info](http://gigaom.com/2013/08/22/chrome-os-users-gain-immersive-mode-and-more-in-stable-channel-update/)) info](http://gigaom.com/2013/08/22/chrome-os-users-gain-immersive-mode-and-more-in-stable-channel-update/))
<a href="/static/img/fullscreen_gdocs.png"><img <a href="/img/blog/fullscreen_gdocs.png"><img
src="/static/img/fullscreen_gdocs_thumb.png" alt="Demonstrating Google Docs in src="/img/blog/fullscreen_gdocs_thumb.png" alt="Demonstrating Google Docs in
fullscreen immersive mode"></a> fullscreen immersive mode"></a>
Another little-known feature of Google Docs is creating a new document based Another little-known feature of Google Docs is creating a new document based
@ -163,8 +163,8 @@ fullscreen in some other chrome window, I can quickly click the panels icon
and the window will pop open above all of the other windows. I can then and the window will pop open above all of the other windows. I can then
interact with it and minimize it back into the dock out of my way. interact with it and minimize it back into the dock out of my way.
<a href="/static/img/chrome_panel.png"><img <a href="/img/blog/chrome_panel.png"><img
src="/static/img/chrome_panel_thumb.png" alt="Demonstrating chrome panels with src="/img/blog/chrome_panel_thumb.png" alt="Demonstrating chrome panels with
Panel View for Play Music open"></a> Panel View for Play Music open"></a>
In order to enable them I had to be on the Beta channel of the ChromeOS and In order to enable them I had to be on the Beta channel of the ChromeOS and
@ -177,8 +177,7 @@ me:
* [Panel View for Play * [Panel View for Play
Music](https://chrome.google.com/webstore/detail/panel-view-for-play-music/dimpomefjdddhjmkjgjdokhidjkcmhhn) Music](https://chrome.google.com/webstore/detail/panel-view-for-play-music/dimpomefjdddhjmkjgjdokhidjkcmhhn)
* * [Hangouts](https://chrome.google.com/webstore/detail/hangouts/nckgahadagoaajjgafhacjanaoiihapd)
[Hangouts](https://chrome.google.com/webstore/detail/hangouts/nckgahadagoaajjgafhacjanaoiihapd)
* [Panel View for Google * [Panel View for Google
Keep](https://chrome.google.com/webstore/detail/panel-view-for-keep/jccocffecajimkdjgfpjhlpiimcnadhb) Keep](https://chrome.google.com/webstore/detail/panel-view-for-keep/jccocffecajimkdjgfpjhlpiimcnadhb)
* [Google Tasks * [Google Tasks

View File

@ -24,11 +24,6 @@ body {
color: #444; color: #444;
} }
strong {
font-weight: 400;
color: FireBrick;
}
h2 { h2 {
font-weight: 300; font-weight: 300;
} }

BIN
img/blog/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

BIN
img/blog/chrome_panel.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 611 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
img/blog/diagonal-noise.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
img/blog/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
img/blog/gmu_bookstore.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
img/blog/laundry.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
img/blog/loading.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
img/blog/personalsite.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

2
img/blog/record.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 KiB

BIN
img/blog/whatsopen.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB