Blog

Ruby on Rails Design Patterns

July 10th, 2013 Alina Guzman Web Development 4 Comments

My class started working with Rails this week, which was groundbreaking. After so much time spent on writing out simple CRUD apps on Sinatra (a light-weight web framework), it is a relief to be introduced to the MVC pattern! Ruby on Rails is a web framework that was written to emphasize several out-of-control-awesome design patterns, including active record, convention over configuration, and model-view-controller (a.k.a MVC).

MVC is a design pattern that separates and organizes all the code you write for an application – data, logic, functions, routes, and what the user sees as the output on the screen. It was hard for me to really understand the value of this pattern since I never learned how things are done otherwise. Our work with Sinatra does shed some light, however, and it becomes more clear to me why our course is structured the way it is. Jumping straight into Rails would have left a lot of blanks to fill. Sinatra doesn’t follow the typical MVC pattern – it jumbles up all of the elements that MVC so nicely separates.

Why does it matter anyway?

Well, I think one of the main advantages to this kind of architectural pattern is the re-usability it provides. The model represents a databases table as a class that takes properties from Active Record making it so you don’t need to write SQL. It still runs the SQL behind the scenes, but it lets you interact with the data in familiar Ruby terms.

The views consists of what the browser will display, made up of mostly HTML and a little erb code. And the controller houses the logic that communicates with the model and sends the views to be displayed. This system allows you write a lot less code in a lot less places. With Sinatra, I had to retype a lot of database requests. While ActiveRecord solved the majority of my database-request problems, MVC furthermore reduced the number of places I had to write them. Repeating yourself is not very DRY (don’t repeat yourself). Kind of goes against the whole point of programming, doesn’t it?

Perhaps my favorite and sometimes most exasperating pattern in Rails is convention over configuration. The whole theory behind this starts with the very brutal fact that when faced with a new Rails application, there is a ton of configuration to complete to even render a blank page to the browser. With every app, you will need to link data to logic.

Say you have a bunch of tables in your database, like Users, Addresses, Courses, Images, etc. All of these tables will have to correspond with a class that tells it how to behave (for example “I want to take the names of Users and display them here”, or “Put this users images on this page”). That is a lot of code you have to write to map each table to its respective class blueprint.

What’s the solution?

Naming conventions. Rails knows that if you have a table named Users, you will have a class named User. Similarly with Images and Image, Addresses and Address, and etc. Adhering to naming convention allows you to avoid writing many configuration files (you can always overwrite or add to any configuration if you need, however). While this is awesome, it’s also a double edged sword. If you miss an ‘s’ or name something wrong somewhere (naming convention goes beyond just tables and classes), everything goes ‘ka-boom‘. I have only been coding for a few weeks, but most of that time is spent staring at errors trying to decode them. My longest error starring contests came from these naming convention errors.

Tags: , , ,

Web Design 101

June 28th, 2013 Alina Guzman Graphic Design, Web Development No comments

Have you ever found yourself stuck in the beginning of a website redesign? Maybe you’ve decided to finally launch that website you’ve been thinking of. Or maybe you are ready to take your existing site to the next level. Whatever it may be, it’s likely you’re a bit stumped if you haven’t done it before or don’t have a designer on hand. I’ve certainly found myself in that position before.

I’ll take you through the planning process and the basic design principles (as well as suggest resources you can use) since tomorrow morning the WDI students will have a design workshop for nondesigners! I originally wrote this guide for Esvee Group when I worked there.

There are a few elements you will want to map out before diving into building your website. You will want to plan out your layout, color palette, and typography.

Layout

The layout of your website will depend on the type of website you are building. The basic types of websites are e-commerce, blog based, portfolio based, or informational. To help you figure out layouts, ask yourself a few questions,

  • What is my website’s purpose?
  • What do I want my visitors to focus on?
  • What information do you want to share and how many pages will your site have?

Your website’s visual hierarchy depends on your layout. If you want to show a portfolio or products, you may want to work with a full-width layout. If you have a blog, a layout broken up with sidebars is preferable. If you want your visitors to focus on your photography or store-front image, a featured photo and vertical navigation is preferable.

Color palette

Picking a color palette for your website is one of the most important steps in the design process. Colors will influence your website and give off a message to your visitors. Some things to ask yourself before diving in are-

  • What feeling do I want to give off?
  • Do I want to keep the colors fun or professional?

Your colors will greatly depend on your brand. Color is linked with emotion making it easy to distinguish between a fun website or a professional one. Once you answer these basic questions, finding a palette doesn’t have to be very difficult. There are resources available that give you pleasant color combinations and shades. My personal favorite is Adobe’s Kuler. You can input a color and a wheel will match others to it.

Typography

A font can easily make or break your website. There are plenty of Typography Principles I can bore you with but it all comes down to common sense. When mixing fonts, don’t use very similar typefaces. Opt instead for a bold contrast like a sans serif with a serif. When sizing, make sure the font is visible. Sans serif typefaces generally read better on the web but if you size a serif correctly, it can work. And one last tip – never use Comic Sans!

Here is a great post on 40 Best Typeface Combinations used in web design by Smashing Magazine. Decide if you want to purchase a font or download a free one. Dafont is a great resource for finding free fonts, it even lets you test text when you search.

 

Once you tackle these important elements, you are on your way to implementing your website design! If you have questions about anything raised in this article, please leave a comment below.

Tags: , , , , ,

RubyMine – An Integrated Development Environment by JetBrains

June 26th, 2013 Alina Guzman Tech, Web Development 1 Comment

Right before I started the WDI course, I found an IDE for Ruby that people often rave about, and decided to install it.

An IDE (integrated development environment) is a software program that helps developers build software. IDE’s usually include a text source code editor with syntax highlighting, a compiler that takes the source code into a program that executes it and/or an interpreter that runs programs that don’t need to be compiled, as well as a debugger that helps the programmer run through their code and find problem areas. That was a mouth full. In short- IDE’s offer a lot of tools that make your life easier (if your life is all about building web applications!)

What’s the alternative? Well, in our class for example, we write everything using Sublime – a text editor, and run everything through the command line. Sublime IS awesome and is loaded with all sorts of shortcuts that make writing code a pleasure. And the command line works and you can probably do things much faster than you would with a GUI if you’re fast enough. What I do instead…is use RubyMine.

RubyMine is an IDE by JetBrains, which also makes a ton of other software products for almost any language. The more I work with RubyMine, and the further I go into the course, I really see the advantage it gives.

 

Features and benefits of RubyMine

  • The code editor saves a ton of time and auto-completes every code ending. In comparison to Sublime’s TAB key auto-complete, I found the IDE’s version to be much swifter and more accurate.
  • Helps with testing by providing RSpec help (we only briefly touched upon this topic in class so I was happy to see that it is also a feature of the IDE).
  • Works with the Rails framework latest versions
  • Automatically bundle installs anything you specified in Gemfiles
  • Debugs your code in a super easy-to-use interface
  • Works with lots of VCS! Most importantly – Git! Every time I add a local repository through the command line, it adds a root and automatically adds any file changes to tracking! << I’m crazy about this one.
  • And many more that I’m sure I still have no idea about.

 

Tags: , , , , ,

The lonely PC

June 24th, 2013 Alina Guzman Tech, Web Development 1 Comment

I’m into Week 2 of Web Development Immersive! Most of what we covered was a review of the pre-course so it wasn’t as challenging as I know it will be in the weeks to come.

We covered the fundamental building blocks of Ruby- data types, arrays, hashes, methods, loops, iterations, and classes. Using just these essentials, we built a functioning stock and portfolio manager. I imagine it is important to master these basics as much as possible in order to be able to call on them without trouble once the course progresses and our applications become more complex. Throughout our work with Ruby, we also use the version control system, Git, and a hosting platform, Github, to be able to collaborate with others and open source our code. Git basically runs entirely from the command line. It’s quite fun to work from the CLI- makes things like creating files and directories must faster.

During orientation, I found out I was the only non-Mac user in the class! It was hard for me to imagine that Windows is so irrelevant in the Ruby community. I have long been aware of the stigma against Windows in the design world…but the development world too? As a graphic designer, I worked mainly on huge iMacs both at work and in my college’s design lab. I’m completely comfortable using Macs and have long passed the stage of googling ‘how to copy and paste on a mac’. Regardless, I still prefer using Windows as my main working computer OS. Running graphic design programs on Windows is no different than running them on Macs, so I must disagree when people try to make claims that graphic designers shouldn’t use it.

I say use what you want. If you want a PC- make sure it has killer specs and you’re fine.

Now that I’ve dipped into Ruby and had my fair share of work on the command line, I definitely see the value of the Linux inspired terminal on Mac OSX. Installing programs is as easy as typing out a line and hitting enter (once you download homebrew, that is). Need to create a ruby file and launch a text editor? Type it in the bash terminal. It’s not that I can’t find workarounds with Windows (because I can and have), it’s just a hassle following along a class that is instructed with Mac commands, tips and shortcuts. Because of that, the instructional team recommended on Day 1 that I partition or virtual machine a version of Linux onto my PC.

My father and I spent the next few days battling my machine trying to accomplish just that. The amount of errors we came across would discourage most. Eventually, we got a working copy of Ubuntu onto VirtualBox, but it was so far from optimal! It took anywhere from 30-60 seconds just to open up the terminal. I found a tutorial that changes the driver used in the new version to something faster (and not 3D). That did improve the copy a bit, but it was still far from the speed the computer should have.

We then installed a version of Mint, which is a lightweight version of Linux. While Mint was quite fast, it displayed a video driver error on the home screen at all times that I couldn’t figure out how to remove. Installing from the terminal was also more of a hassle than with Ubuntu because of how light it was.

Ultimately, I decided to keep Ubuntu and just deal with the slowness for when I need to use Linux (deploying my app to the servers, for example). Until that time, I’m sticking with Windows. That unfortunately means I have to listen to my instructional team lecturing in Mac terms. I try to write down what definitely doesn’t work with Windows and what I will need to use once I work on Linux. Some things I have to quickly figure out how to do on the Windows CLI – just like make a new file with ‘new-item’ as opposed to the Mac/Linux ‘touch’ command.

Next, I’ll write about my experience using RubyMine – an integrated development environment that, in my humble opinion, boosts coding productivity far more than anything else I’ve tried! Having my IDE completely obliterates any disadvantages I might have with Windows.

 

Tags: , , , , , , , ,

Journey of a Web Development Student

June 19th, 2013 Alina Guzman Tech, Web Development 1 Comment

The last few months were among the most important and eventful of my life. I graduated college, went on my first vacation abroad (sans family), and made the life altering decision to pursue my dream of becoming a web developer.

I hadn’t heard of the recently popular Web Development Boot Camp courses before my father mentioned a friend of his colleagues’ had enrolled into one.  I had, however, always been interested in the web. My father taught me HTML as a junior high schooler and I was hooked. I got this domain a couple of years ago as an outlet to express my various interests, display my portfolio, and play around with web design to my hearts content.

When the possibility of enrolling in a #webdev course started becoming a reality, I jumped at it. I applied and was accepted into General Assembly’s NYC Web Development Immersive course. I completed roughly 50 hours (if not more) of pre-course work that dove into the fundamentals of Ruby, the object-oriented programming language we would cover. The pre-work consisted of various tutorials and resources available from amazing websites like Codecademy and Codeschool. It was incredibly difficult to follow, and I was so grateful that I had my father, a seasoned developer and Technical Architect to explain every last concept to me repeatedly. While these free tutorials online are an amazing resource, they are far from ideal.

And so begins my 3 month, 9-5:30am every weekday dive into the amazing world of Ruby. Follow along as I learn to build web apps from scratch.

 

Til the days of templates are long gone, I strive!

 

 

Tags: , , , , , , ,

Typography | Posters

March 16th, 2013 Alina Guzman Graphic Design No comments

Sometimes you don’t need anything but words. I love designing posters sans graphics. I’ve always collected favorite lyrics and now I’ve found the perfect place to put them.

Tags: , , , ,

Swedish House Mafia | One Last Tour

March 14th, 2013 Alina Guzman Music, NYC No comments

In the past year, I’ve gotten a little into electronic dance music and went to a couple of festivals. I first dipped my toes in the scene during EDC‘s first visit to New York. At that point it had been almost 7 years since I’d listened to edm and I had a blast remembering how fun it could be. A few months later in September, I went to all 3 days of Electric Zoo on Randall’s Island. Since then I had really missed the atmosphere of a huge show so when I heard about Swedish House Mafia going to Barclay’s Center for their One Last Tour, I couldn’t wait to go. The show was amazing, I had never seen SHM live before. Glad I caught on before they officially broke up.


Next stop? Armin van Buuren’s ASOT600 NYC. A major thank you to Spotify for keeping me busy until then.

Tags: , ,

Adobe Photoshop Tutorials

June 26th, 2012 Alina Guzman Graphic Design, Tech No comments

I have recently began an extensive researching process to pick out the ultimate portable graphic design laptop. I’ve been debating Mac vs PC for quite some time. While I’ve always been a PC girl, I can definitely see Mac’s advantage for the design world. Whenever I ask anyone, Mac is the most obvious answer they give. But I know a PC computer can be just as great, you just have to find the right build! Or at least tweak it yourself.

I’m leaning towards the new 15″ Samsung Series 9 Ultrabook. It has strong specs and is ridiculously light (about 3 pounds). One of the main programs I’ll be running on it is, of course, Photoshop. Right now I’m using it on an ASUS EEE PC Netbook. Yes, its about as frustrating as you are imagining. It’s no wonder I’m going all out to ensure my next laptop will run all my Adobe Creative Suite programs smoothly.

In light of the enticement of a new laptop, I happily stumbled upon something awesome. I just discovered an amazing (and free) resource for Adobe Photoshop CS5: An Idiots Guide to Photoshop. This 4 part tutorial was written by Azamat “Bohed” E. from TrueKolor.net for the blog MakeUseOf.com. The tutorials range from the complete basics like how to create a document, to the more advanced effects like creating animations. You can download them in either PDF or E-Pub format (for nook, kindle, ipad). I got both versions for my laptop, tablet, and phone (you can never be too prepared).

Here are the links to the tutorials from Makeuseof.com [all of these have 2 versions but you have to take some steps to download them- you can quickly share them on Google+, Twitter, or Facebook and receive the link to download the Epubs]

Here are the links to the tutorials from TrueKolor.net [some of these are PDF only- you can download them by right clicking Save As]

 

Don’t hesitate to ask if you have any questions about the downloading process.

Tags: , , , , , , , , , ,

Sailing on the Hudson River

June 18th, 2012 Alina Guzman NYC, Yelp Reviews No comments

Yesterday marked one of the most exciting things I’ve done to this day. Last summer I impulsively purchased 2 Yelp deals (I’m subscribed to so many of these kinds of sites, its hard not to find something you like everyday), and booked a Father’s Day sail for me and my dad. Manhattan by Sail is a company that offers an array of sailing options around the Hudson River. I booked a 90 minute day time trip on the Shearwater, and 82 foot classic schooner. They have so many other intriguing options, including the Happy Hour sail with a free open bar, 4th of July Fireworks sail, Wine tasting sail with an expert, and a romantic late night sail.

The Shearwater is located in the North Cove Marina in Battery Park City right by a beautiful park where you can sit and enjoy the views. With about 30 passengers, the schooner set out to sail pretty close to the Statue of Liberty, made a U turn and came back to dock. Along the way, you see amazing views of the Manhattan, Jersey City, and Brooklyn skylines. You also come across plenty of other ferries, boats, and yachts along the way with eagerly waving passengers. There really is nothing better than sailing, sipping on a cool glass of wine and enjoying the view. Definitely something to try again.

Here is a more detailed review of my experience on Yelp.

North Cove Marina and the Shearwater schooner



Tags: , , , , ,

Lightbox discontinued

June 15th, 2012 Alina Guzman Tech No comments

Sadly, Lightbox was discontinued today. Last month, Facebook announced that it was buying out the social Android-only photo sharing application. Existing users like myself were given the option to download all our photos before the site shut down. Thankfully Instagram opened up to the Android population but its still sad to see this app go. Hopefully now the Lightbox team can bring some much needed help to Facebook’s mobile apps; they are ridiculously laggy!

Tags: , , , , , , ,

Find me on…

What I’m Tweetin’