Skip Navigation
Falvey Memorial Library
Advanced
You are exploring: Home > Blogs

Happy Hacktoberfest!

Open-source software is an amazing movement in today’s programming environment. By sharing the code behind programs, open-source projects empower online communities to create quality programs that are available for free. These collaborations celebrate transparency and inclusion, improving the landscape of development in many ways. Many of the programs you likely use are developed by open-source communities. The Firefox and Chrome browsers, the Android operating system, and many websites are entirely or use open-source software.

If that sounds appealing to you, there is no better time to dip your feet into open-source development than now. Welcome to Hacktoberfest! Hacktoberfest is a time where the largest repository of open-source software, GitHub, encourages people to try out development and encourages its members and projects to make the barriers of entry as low as possible. Beginner projects are created for practice. Established projects tag issues that are good for new coders with a special Hacktoberfest label. Contribute enough code in the month of October and you will be sent a free shirt!

 


The shirts are awesome

 

So how do you get started? The first thing you have to do is learn a special tool called “version control”. If you’ve ever been working on a paper that requires revisions, you have experience with version control techniques.

 

 

What version control tools do is allow you to do is to bookmark changes and stages of progress without making a hundred different files. They also make it easy to go back to previous versions and see the differences between bookmarks. One of the most popular options is called git (hence GitHub).

The most important thing that git allows you to do is to reconcile different changes to the same files. You can “merge” changes from one version into another. This allows multiple people to work on the same files without conflicting with each others’ work. This means that teams and communities can delegate tasks and work on them individually. GitHub gives them a place to host code publically and git allows people to take projects in their own directions (called “forks”).

 

When someone wants to add their improvements back to the project, they create what’s called a “pull request”. A pull request shows all of the changes that have been made to a project clearly and asks the original owner if they want to include these changes in the project. It’s the center for conversation and progress on GitHub.

Now that I’ve covered the basics, it’s time for you to dive in and make your own pull requests! Creating only five scores you an awesome shirt. Go to the Hacktoberfest website to get started or check out this resource or this interactive tutorial for git to start applying that to your everyday routine.

 


 

Chris Hallberg is a web designer and technology developer at Falvey Library, an open-source enthusiast and part-time teacher.


Like

Falvey Library – now responsive in more ways than one

If you follow Villanova’s Digital Library on Twitter, you may have seen this recent tweet:

Check out our new responsive design (thanks to @crhallberg!): http://t.co/VmWL30gonx Play around & let us know what you think! #webdesign

— VillanovaDigitalLib (@VillanovaDigLib) December 5, 2013

Proud to say that the shout-out refers to me, Chris Hallberg, and I’m going into my third year of working on the front end of the Digital Library. That probably doesn’t mean much to you though, so let’s cut to the chase.

“Responsive”?

CHRIS HALLBERGaka: what is Chris’ job?

That’s a fancy way of saying that Falvey’s website has been designed to adapt to any size screen that it’s viewed on. This capability is an evolution from the design model of having two completely different websites: one to handle desktop users (ie. Wolfram Alpha) and another for mobile users (Wolfram Alpha again, mobile edition). Managing parallel websites presents two major problems: developers have to design, build, test, deploy, host and update two separate sites; and some functionality is lost.

Faster browsers, faster Internet speeds and updated web technologies allow web builders to create more powerful web pages than ever before. Web users know this, and they don’t want to settle. They demand the complicated features of the “full” website on their phones, and more and more users and mobile browsers try to use their ever increasing phone sizes to look at the desktop version. If you’ve ever tried this, you’ll know a lot of full websites look terrible on phones. This is where responsive design saves the day.

Read the rest of Chris’ informative primer on responsive web design from the Digital Library’s Blue Electrode here :


Like
1 People Like This Post

Responsive?

If you follow Villanova’s Digital Library on Twitter, you may have seen this tweet recently:

Check out our new responsive design (thanks to @crhallberg!): http://t.co/VmWL30gonx Play around & let us know what you think! #webdesign

— VillanovaDigitalLib (@VillanovaDigLib) December 5, 2013

Proud to say that the shout-out refers to me, Chris Hallberg, and I’m going into my third year of working on the front end of the Digital Library. That probably doesn’t mean much to you though, so let’s cut to the chase.

“Responsive”?

aka. what is Chris’ job?

That’s a fancy way of saying that the design of the website adapts to any size screen that it’s viewed on. This is an evolution from the design model of having two completely different websites to handle desktop users (ie. Wolfram Alpha) and mobile users (Wolfram Alpha again, mobile edition). There’s two major problems here: developers have to design, build, test, deploy, host, and update two separate sites; and some functionality is lost.

Faster browsers, faster Internet speeds, and updated web technologies allow web builders to create more powerful web pages than ever before. Web users know this, and they don’t want to settle. They demand the complicated features of the “full” website on their phones and more and more users and mobile browsers try to use their ever increasing phone sizes to look at the desktop version. If you’ve ever tried this, you’ll know a lot of full websites look terrible on phones. This is where responsive design saves the day.

The biggest problem with smaller screens causes features normally laid horizontally, like this text and the navigation on the left, to clobber each other when the real estate vanishes or to become so tiny the crushed text within looks like something out of House of Leaves. Worst, in my opinion, is the horizontal scroll bar that turns your browser into a periscope in a vast, hidden field of content.

normal
Normal

squish
One word per line necessary to fit in these tiny columns

overlap
Clobber-ation

scroll
Bum bum bum

Responsive design actively reorganizes the page so that this doesn’t happen.

responsive
That’s better

“Play around”?

Here’s how to properly play with this blog to enjoy responsive design.

If this window is full screen, click the resize button (next to the close button) on this window so that you can see all the edges of the window. Now, drag the right edge of the window to the left, squeeze the window if you will. Come on. It’s ok, no one’s watching. If you don’t do it, the rest of this blog won’t make any sense. Thank you.

The first thing that will happen is that the navigation buttons above (called “pills”) will jump below the search bar. Then, the menus on the very top and below the search bar will collapse into buttons.

Pause a moment. You are entering the land of the Mobily-Sized Browser Window. We designed the new library and digital library web sites to reorganize itself when you look at it on any screen the size of an iPad or smaller. In this case, the menu on the left (and up) is going to move on top of this blog post and fill the available space. We spare no expense! Just keep an eye on the search bar as you squeeze the window down as far as you’d like.

That’s responsive design at work.

What’s going on here?

In order to make websites look beautiful, developers use a language of rules called CSS, short for Cascading Style Sheets. It looks like this:

button { ← What are we applying the “rules” below to?
   background: #002663; ← Villanova blue in code
   color: white; ← Color of the text
   border: 1px solid black;
   border-radius: 4px; ← Rounded corners!
   height: 45px;
   width: 90px;
   margin: 3px ← Distance from border to the next element
   padding: 14px 4px; ← Distance from border to content
} ← That’s enough rules for our buttons

That code is more or less how we made the four pills next to the search bar look so pretty.

A year and a half ago, the powers that be added a new feature to CSS: media queries. Media queries can tell us all kinds of things about how you’re looking at our web pages. We can tell whether or not you’re running your browser on a screen, mobile device, TV, projector, screen reader, and even braille reader. It can also tell if you’re holding your phone sideways or vertically, what colors it can display, and (most importantly) what the dimensions of your screen are. By putting code like our button example inside these queries, we can apply rules, like fonts, colors, backgrounds, and borders, to elements of the page depending on the context of the browser.

@media print { ← If we’re printing something
  // Hide ads and colorful content
}
@media (max-width: 768px) { ← Anything thinner than a vertical iPad
  // Show a special menu for mobile users
}

Responsive designs are built right on top of this technology.

Browsers are really good at stacking things on top of each other. This paragraph is under the previous one. This makes sense and it’s quite easy on your eyes, and your computer. With a few CSS rules, we can tell the browser to put things next to each other. The trick is to put things next to each other, until it’s impractical to do so. Being able to tell your web site where to put things and how they look depending on how and where your user is looking at it is what responsive design is all about.

The Magician’s Secret

Before media queries were invented, developers had to write some pretty serious code. This code had to constantly watch the size of the screen and then, basically, rewrite the files where the CSS rules are kept. It was very complicated, which is why it made much more sense to create two completely different sites and route users to each depending on their “user agent,” a small snippet of information that your browser sends to a server when you open a page in your web browser. The problem is, these bits of information were made for people to read for statistical reasons, so they are complicated and change every time a browser updated to a new version. It was a digital guessing game.

Some of the people behind Twitter decided to make a framework that web developers could build on. Instead of starting from scratch, developers could start with their collection of code and CSS that pre-made a lot of common elements of web sites like tabs, accordions, and toolbars, for them. They called it Bootstrap. In 2011, they added responsive design, making it easy for developers to create a site that looked good on any device. In 2012, a graduate assistant named Chris Hallberg was charged with rebuilding the Digital Library front end. In 2013, he, along with web developers all over campus, made Villanova’s web presence responsive. Without this framework, creating a responsive site would have taken much, much longer, and possibly wouldn’t have occurred at all. Not only was it an essential tool to the process, it is a broadcasting platform for the technology. Bootstrap makes responsive design possible and popular.

A Final Word

While I did the work you see over at the Digital Library, I did not create the page you are looking at. I can only take credit for the menu on the left, which I’m clearly very fond of. David Uspal was the magician who conjured this page’s design and David Lacy is the magician behind-the-scenes, organizing and delivering the thousands of books containing the tens of thousands of images we’ve scanned. We both received invaluable input from the Falvey Web Team and even viewers like you. Your feedback helped and continues to help us fix errors and typos, and (most importantly) pick the colors for our pretty new web site.

Enjoy!
– Chris Hallberg

PS. A fun example of the new power of the web is Google Gravity from the gallery of Chrome Experiments.
PPS. As a reward to offset the new habit you’ve developed of resizing every window you find, here’s an accordion to play.


Like

 


Last Modified: December 11, 2013