Category Archives: Web

Digital Zaza LLC

My first business: Digital Zaza LLC

So I started my first company. Yay! It’s honestly nothing too crazy, more formality than anything else. My buddy who is working for an ecommerce startup got in touch with me and he wants me to do some Magento web development work. I’m pretty pumped for the opportunity to work with him and his awesome sounding team, and hopefully there is nothing but boatloads of money in our future.

This is the first time I’m working for a legitimate customer so I needed to make sure my business was legitimate. Although I could have just accepted check written out to my name, I decided to start an LLC for several reasons. One of the major reasons is that I have to pay taxes, and that means that I have to keep my personal finances separate from my business finances. I don’t want to be paying for business items with personal credit cards, etc. Having my own business account makes the whole tax process much simpler.

Another major reason for the LLC is that you get an Employer Identification Number (EIN). EIN’s are essentially the social security number of your business. When you have an EIN you are much more real to both other prospective customers and the IRS. What I mean by that is if a company wants to hire me, they will want to hire me as a company. They want me to write them a professional invoice. They want to see I am a registered business. Companies have to pay their own taxes. My ability to invoice, and their ability to write a check out to my LLC, allows for a paper trail that makes taxes easier for the company, the IRS, and myself. No one wants to write a check to some random dude and then explain to the IRS that they paid thousands of dollars to some guy Joey from New Jersey.

Another reason for the LLC is one that you hear about often. I’m limiting my personal liability. Generally an LLC separates my personal finances from my business finances. If I mess up in some disastrous way I will lose the capital of my company, but I generally will be covered from people trying to come after my personal finances.

Finally I wanted an LLC because it puts me in a potential position for future growth. While I don’t plan on this business getting too big, there always is possibility for growth. If my friend decides to dump more work on me than I can physically do or if I happen to be given work from another company, I’ll probably want to consider hiring employees or bringing someone on as a subcontractor. Having an LLC in place makes that process fast and much less painful.

You may actually be interested in some other form of business such as a sole proprietorship, S-Corp, etc. There are a lot of options for starting a business depending on what you’re trying to get into. But if you want a similar setup to what I have then I would probably recommend two links. The first is a step-by-step guide of what you need to start an LLC in the state of NJ. It’s good for general reading and getting a feel for if an LLC is right for you.

Staring an LLC in NJ

The best link is the actual state page where you can sign up for the LLC. Generally government websites are garbage. Information is all over the place and you have to spend hours or days trying to figure out where things are and what they mean. Once you figure it out you often have to go to some random building during some very specific time and then wait for days or weeks in the mail to get whatever it is that you need. This website and this process were the complete opposite. It couldn’t be any easier to setup an LLC then to just follow along the step by step process on this state website. So a huge shoutout to the New Jersey government for getting something right. It’s important to make something as beneficial as new business generation so painless and simple. Thank you.

NJ State Website for LLC

The site lets you search for and choose your business name, nominate your Registered Agents, sign up for an EIN, send in all the information that you have to, sign all documents online, and make payment via credit card right there all on the same site. At the end of the 15-minute process you have the certificate of formation, business registration, and EIN. Congratulations. You have an LLC.

With that information you can go right to the bank and open up a business account with whatever bank you prefer.

At this point in the post I should probably mention that you definitely might want to consult an accountant or lawyer to make sure you are doing this all correctly. Or you can go with a site like LegalZoom to get you up and running. I had some knowledge of these topics from going for my MBA and I also want to get a better understanding for law since it is such an important part of business. That’s why I went through the research to figure out what was appropriate for my situation. Often times it will be cheaper to have someone else do this work for you or prevent you from making costly legal or accounting mistakes.

For me this whole LLC process happened quickly. The time between my friend reaching out and me starting work was really fast. I didn’t have much time to think of a name. The name in this case isn’t too important as it mostly will be only used on the check that my customer writes. I don’t plan on actively marketing for work, but I want the LLC in case I ever get the opportunity to work or grow. I wanted a name that was pretty broad that I could use for a variety of work. While I’m doing web development for an ecommerce website today, I could definitely see myself doing engineering or business work and would want a name that could cover some general fields. I didn’t want Joseph Butewicz LLC because that’s boring and kind of implies a one-man shop even if I did have a lot of employees. I also didn’t want anything stupid like Innovative Technology Solutions LLC or Expert Engineering Consulting LLC. I hate corporate talk. I also wanted to make sure the domain name was available so I could easily add a nice website in the future. Since I had only a couple of minutes to think of something, I had two ideas. The first was Pro Peach LLC. The word peach is dear to me these days. The second was Digital Zaza LLC. Joey Zaza, or Zaza, or Za is a nickname of mine that goes way back. I kind of liked how Digital Zaza sounded. I like the word Digital, as technology is probably the area I most want to be involved with. Pro Peach LLC kind of really sucks so I went with the only option I had left lol.

I made sure the domain name was available and I picked that up as well. I decided to build a simple website for the business which I’ll talk about in detail here.

Sometimes when people have a business, especially a new one, they clutter their website with all sorts of corporate talk. Useless pages of text. Terrible stock images, etc. You’ve seen a million of these sites and they are disgusting. Just because you have a website, that doesn’t mean you need to fill it to the brim with pages and pages of worthless content. If anything I would argue that you always want to be evaluating your website (and your business, and probably your life as well) and be trying to remove unnecessary clutter that is there. Unclutter your page. Make your message clear. Since I don’t have much content, I wanted my site to be very simple. I don’t have lots of clients. I haven’t done any work for this company. Everything of interest deals with my personal programming life. I’m not sure if this company will continue with ecommerce development work or if it will morph into something else. I don’t know what my company will be. All I know is I wanted an LLC for the reasons previously stated. I just want to build awesome things with other people. Maybe a way to contact the business would be good.

So with all of those thoughts and ideas, I created exactly what I wanted to. I used Digital Ocean’s $5/month hosting plan, which is overkill for this site, but the cheapest you can really buy. I installed a LAMP stack as I have done many times before and got to work building the site.

There were eight things I wanted in the site.

  1. Name of the company
  2. A single sentence, almost like a slogan, giving you the slightest idea of what this is all about
  3. A link to my blog, specifically to this post. Remember, my company isn’t anything yet. It’s two days old, and while it has a customer, I have no idea what it’s future is. Everything that is of interest is related to my personal life.
  4. A way to contact me
  5. I want these four things in the center of the website, both vertically and horizontally.
  6. A font that plays off of the digital theme.
  7. This orangish, pinkish, salmonish colored background. I wanted to make a site with this color background for some time now and this was finally the opportunity lol.
  8. A favicon, that little icon at the top of your browser tab

The concept was very simple. As always the execution ends up taking way longer than expected. It’s remarkably difficult to center something both vertically and horizontally using CSS. Sure, I’m being a little dramatic, but it’s such a common thing to want to do and it always is so difficult. Instead of running through all of the different solutions for this problem, I’ll just say that I used flexbox. I’m happy enough with this rendering properly on the majority of devices. I doubt many people will visit this page in the near future, and I expect those people that do will have a reasonably up to date browser. This is a pretty bad assumption for a web developer lol.

Finding a font to use was pretty easy. I’ve used several font sites in the past and can recommend Font Squirrel, Da Font, and 1001 Free Fonts. There are other sites that you may use. I found a couple good fonts but my favorite was Silkscreen. Shout out to Jason Kottke for the Silkscreen font, specifically Silkscreen Expanded Normal. It’s exactly the right blend of digital and modern. Get Silkscreen here

For some reason I was having issues rendering this font on all of the different browsers I was testing. I must have been making some sort of syntactical mistake. The best way to get fonts to render on all of the devices is just to use Font Squirrel’s webfont generator. You upload your font and the generator will produce all of the different types of fonts you need along with the CSS that you can copy and paste over to your style sheet. Why waste your time writing it from scratch, and then wasting a bunch of time figuring out where your syntactical error is, when you can just copy and paste?

As for a way to contact, I really didn’t want to get away from the simplicity of the site. A contact page may have been alright but it’s kind of impersonal and definitely doesn’t fit with the idea of the site. I decided to find a free email-hosting site that would use my domain name and just link that email in a contact link on the site. Surprisingly Zoho is one of the few that has free accounts. It’s ad free too, which is great. You get up to 10 users with 5 GB storage per user for email. It’s exactly what I wanted for this site. If the site works well then I can see myself paying for their services will several other small sites. I signed up for the service and quickly had myself an email address that can send and receive to the digitalzaza.com domain.

Selecting the background color was easy enough. I had a really good idea of the color that I wanted. I googled around a bit to pick out some nice supporting colors. I usually use Google Image search for general ideas. If there’s a specific color I like then I’ll grab it via a color picker in something like GIMP. I often play around with the different color tools that show up when you search “color calculator,” etc. in google. Eventually after a little trial and error I had all of the colors that I wanted.

As for the favicon I just wanted the letters ZA in the Silkscreen font on the salmon background color. Favicons can be a pain in the ass to make all of the different sizes needed to support all of the different devices and browsers that use them. It’s best to just use one of the many great tools out there. Shout out to Philippe Bernard for the Real Favicon Generator. It takes your one image and makes all of the icons you need and generates all of the CSS that you need. Tools like this help accelerate the speed at which great things are built.

So that’s mostly it for the idea behind the business and the site. Putting it all together you get something that looks like this.

Digital Zaza LLC
Digital Zaza LLC

You can check out Digital Zaza by clicking this link. If it looks absurdly simple, that’s pretty much the intention. Over time this website may evolve into something more substantial, and that will be dictated by the growth of the business. But for right now I’m just a guy with an LLC who wants to build beautiful things.

Cheers,
Joe

Why I needed a macro lens

Joe’s Postcards, a WooCommerce Site

After building a big time website on the Magento eCommerce platform, I wanted to build a smaller eCommerce site using a platform suited more for an individual or small business. After researching the platforms that were available, I determined that WooCommerce had the best combination of costs and features. WooCommerce is a plugin for WordPress, a content management system that I have worked on in the past. My intention for this project wasn’t to build another WordPress website. I was hoping to get some experience with a new technology, but with such a large percentage of websites running WordPress I was willing to go through the development process again.

Since this website would not be getting massive amounts of traffic, a small hosting plan such as Digital Ocean’s $5 per month for 512MB RAM and 20GB SSD is a reasonable option. I added it to my hosting account and got to installing the LAMP stack of Linux, the Apache HTTP Server, the MySQL relational database management system, and the PHP programming language. Once that was setup I installed WordPress. WordPress is a free and open source content management system that many people use to create blogs, although it is capable of making some great websites. After WordPress was installed I installed the WooCommerce plugin. At this point I pretty much had an eCommerce store minus all of the content and styling.

The website I would be building was a website for my dad to sell postcards on. The site would be very simple. There would be a home page to welcome the user, a store, cart, checkout, account login, and a contact page. The simplicity was great but it left me with a single opportunity to translate the postcard onto the digital screen in a way that was personal. I tried to accomplish this in several different ways, the first being to open up the website with a lot of whitespace.

Although the stock WooCommerce theme is usable, there are many changes that I wanted to make to the design. I debated whether to completely develop my own theme or use one of the many themes that were already available, several of which were free. I thought the Klasik framework theme and the Mystile theme were both a good starting point. I liked the Mystile theme, which can be seen below. I was looking for a theme that was open and had a lot of whitespace and had a responsive design that would adapt to tablets and cell phones.

Stock Mystile WooCommerce theme
Stock Mystile WooCommerce theme

I ended up choosing the Klasik framework because I thought it would allow me to make the fewest changes while accomplishing the look that I was going for. I installed the theme and got to work customizing the theme. This is what the Klasik framework looks like out of the box.

Stock Klasik WooCommerce framework
Stock Klasik WooCommerce framework

I created a logo. It’s a postcard that has “Joe’s postcards” in a script font called PlumBAL. The green stamp in the upper right corner is a nod to the one-cent Benjamin Franklin stamp from the Series of 1902 (Second Bureau Issue) stamps. While I was looking through the postcards for inspiration for the design of the website, I noticed this green Ben Franklin stamp appear many times. The date of this stamp also coincides with the golden age of postcards, the time during the early 1900’s that many post card collectors agree is the age when the best and most desirable post cards were created. It’s definitely a stretch that anyone unfamiliar with postcards will ever be able to notice the meaning of this color green for the stamp, but hopefully some experienced post card collectors may get the reference.

Series of 1902, Second Bureau Issue stamps
Series of 1902, Second Bureau Issue stamps

While I was going through the post cards I realized that I wanted to represent them on the screen in a way that captured depth and texture and evoked emotion from people who might not be familiar with post cards. To me post cards are very personal. They are pieces of paper that contain lovely little messages between loved ones, often those traveling to new places and having some of the greatest times of their lives. When picking out post cards to photograph for the site I was equally drawn to the handwritten sides as I was the sides with pictures. Postcards are intimate pieces of paper and ink and I wanted to convey that on the screen. I realized I would need an appropriate camera lens to capture this and I purchased a Tamron 90mm f/2.8 macro lens for a sweet deal.

Why I needed a macro lens
Why I needed a macro lens

The images on post cards can evoke certain emotions based on the location they are from or the moment they celebrate. There are many good post cards for the holidays so I wanted to have a slider on the main page that had appropriate holiday images for the holidays. I set up a slider and used some PHP to automatically change the images based on what season it was. Pumpkins for Thanksgiving, soldiers for Veteran’s Day, turkeys for Thanksgiving, and neutral images for when neither holiday was close.

Holiday themed home page
Holiday themed home page

The storefront that wanted for the post cards had to include some detail about the image and the image of the card itself. I thought about several ways to display this. Postcards are very visual so I considered making the store to be dominantly visual and only include text details after hovering over the images. I decided against this because I wanted to give the store a more standard look. I didn’t want anyone to get frustrated with an unfamiliar layout and abandon the shopping page. The right side of the shop has a product category list and a search box that the shopper can use to find specific cards. There is also a sorter at the top so that the shopper can sort by newest card or price.

Familiar store front
Familiar store front

Once a user clicks on an item, a larger image is visible along with a longer description.

Cool cat postcard
Cool cat postcard

The image can be clicked on again for a full screen view to show high detail, which is something that is necessary for a lot of buyers of post cards. The product categories and search bar are still available from this page. A related products section displays below the item.

Meow!
Meow!

The rest of the site is basic and simple. The cart and checkout are easy to use and standard as to what you might see on many other sites.

Checkout page
Checkout page

The shopper has an option of creating an account with the site. If the shopper does sign up for an account then they will be able to login to check order status and set addresses for faster payment in future transactions. A contact page is very simple. There is a form that the shopper can fill out to send an email to the owner of the site.

Contact page
Contact page

Emails are automatically sent to buyers throughout the order process via a simple email server and settings in WooCommerce. Payment is accepted via credit card or PayPal via the PayPal payment gateway.

There were large differences between building an eCommerce site on Magento and WordPress WooCommerce. Magento takes a lot longer, is more programming intensive, a lot more money to develop and maintain, but it provides much more flexibility and power for selling online. Still the WooCommerce plug in has enough power to create a beautiful site that is more than capable for an individual to small business to sell product through. Companies such as Harley Davidson, New Balance, Cosmopolitan, and Entrepreneur all use WooCommerce to sell their products online. There are stories of businesses running tens or hundreds of thousands of products on WooCommerce, of course on the right hardware to manage that storage and bandwidth. WooCommerce might be fast, cheap, and “only a WordPress plug-in” but it is plenty capable and often suitable for many businesses that decide to use a much more expensive and complex platform such as Magento.

You can check out the final website at Joe’s Postcards.

Nizanta Banner

Nizanta Jewelry, a Magento e-Commerce site

My friend, Suhrid Thacker, decided to leave the corporate world of finance and start Nizanta, an e-commerce company selling high quality hand made Indian jewelry. He researched the various e-commerce platforms that are available and decided that he wanted to run the business on the Magento platform, a content management system for e-commerce web sites. Magento, owned by eBay, is a platform used by hundreds of thousands of retailers, including Nike, Christian Louboutin, Ghirardelli Chocolates, Rosetta Stone, and many more. It’s the king of the medium to large business e-commerce platforms and a reasonable choice if you can afford the price and manage the complexities.

Building a Magento website is not cheap. There are two versions of Magento available. Magento Community is an open-source version which is powerful enough to run most stores, especially one starting out with a smaller product inventory. Magento Enterprise comes packed with many more features and scales better than the Magento Community version but it costs $16,000 per year.

That’s just the software cost. Then you need to get hosting, pay for someone to build the site, and pay for someone to maintain and run the website for you. Hosting costs are cheap enough but to hire a developer to build a reasonable Magento e-commerce site will cost a bunch. Suhrid contacted several developers in the United States and he was quoted between $10,000 and $60,000 for a Magento website, a price that reflects that it will generally take months to properly develop a Magento website. A simple Google search will show that some developers charge $100k-$200k+ to have a Magento website developed. It’s not cheap. Rates for developers from India were around $2,000 to $10,000 for a Magento website, but you have to be able to manage the language, time, cultural, communication, etc. issues that come with outsourcing development to one of the lower labor countries. Both approaches can be justified but that’s a separate conversation.

The critical thing to keep in mind when deciding on the Magento e-commerce platform is that you will have to hire someone to continually change and develop for it or you will have to do all of that programming yourself. You don’t just build the site and never develop for it again. You constantly are tweaking, improving, managing, and scultping the site. So you will have to spend a lot of time programming (time that may better be spent marketing or solving other business problems) or hire a developer (Magento developers can cost $100s/hr). When you agree to using the power of Magento you are agreeing to a development intensive business. However the power and customization of the platform will pay dividends if you can get sales to a reasonable level.

As a new business owner, my buddy would have to spend a huge chunk of money on product inventory (24k gold jewelry tends to be expensive), shipping, marketing, accounting, and million other things that a new business owner has to deal with. He initially decided to develop the site himself to try to save on costs and he got some help from friends but he was happy to hand off the development work to me and let me have at it. It was a pretty good match. I didn’t need any money but I wanted the opportunity to build something cool. I told him I would get him to a point where he had a functioning website that looked good and would turn it over to him before I left for my 45 day trip to Europe, which left me a month and a half or so to learn a new platform and get all of the work done.

My buddy had already looked around and found a Magento theme called Ultimo that he liked for both its looks and responsiveness to adapt to mobile platforms. When he turned over the project to me the website was hosted, Magento installed, and the theme installed. The website was not fully up and running and there was no customization to anything but I had a starting point to get to work.

I got to work breaking down Magento and learning what I had to. The admin panel is an impressive content management system. There are a bunch of headings that lead you to settings to control everything from product inventory, currency, shipping, taxes, payment gateways, emails, even CSS customization. It will take you a couple hours/days just to go through all of the options and see what is available straight out of the box. Since Magento Community is used by so many developers there are often solutions for whatever problem that you have available on Google. Magento also has a bunch of extensions that you can download to add features without writing any code. If you want to change the style of your website you can download one of the many available themes that are available. The community and options for tweaking, downloading, and coding are limitless.

Generally when it comes to working on a platform such as Magento, I like to avoid installing any plugins as it is not usually worth the hassle of installing some module that accomplishes what could be accomplished with some CSS or PHP or whatever. Adding plugins can lead to worsened security, slower performance, information being stolen, or a whole big list of things, whereas I know what I am getting when I manually add code to CSS or a PHP file. I generally will install a theme and customize the theme because for a small cost (free to $100) you can get a good starting design that is responsive to many different devices and has hours of CSS and JavaScript and PHP work done for you.

The process of developing for Magento involved a lot of setting up the platform through the admin panel. I generally think that if you can accomplish something through the admin panel in a platform like Magento then you should, as this is more likely to work following an update to the platform or theme versus changing the CSS or PHP and then having to verify that those changes still work on upgrade to a new version. There are best practices that should be taken when developing for Magento and it is recommended that they are followed when developing to avoid wasting time later on.

Once you think you have everything set in the admin panel, the next step is to move on to the CSS customization. At this point in the project I had already made some necessary changes to CSS and PHP to address problems that the admin panel presented. At this point I am willing to make whatever changes that I have to with CSS and PHP code to get the site running exactly as I want it.

Development is moving along smoothly when Magento decides to drop a bomb on the project and release version 1.9 of Magento Community. It’s usually great to get a new version release, but mid-development means that you have to get to a good breaking point, back everything up, install the new version, migrate everything over, and remove the backups. This process usually takes longer than expected and leads to broken websites that give the developer a long list of problems to fix. In actuality, there was some of that, but the migration process was remarkably smooth. When you follow the directions and everything works you feel pretty good and gracious. Programming always (usually) works as it’s supposed to, just not as you think it should.

Eventually, after a few more days of solving other problems and designing the site as perfectly as my buddy and I wanted it, including secure payment integration, email notifications, fixes to mobile design, batch loading products, and everything else, the website was in a reasonably usable form. At this point the goal is to test the website on different browsers and devices and try to break it and note what has to be fixed. Several days of breaking and fixing and adding new features that pop up and before long it’s time for me to head off on my trip to Europe and turn the website back to Suhrid. Most of the work is done. The website looks great, and when all the product information and page content is loaded, it will be ready for primetime.

During the development process my buddy set up to have the rest of the site wrapped up by a company called The Integrated Penguin, or TIP, a digital creative agency that produces quality work. Since my trip they have polished up the website. You can check them out here (The Integrated Penguin – TIP). Suhrid finally decided to go live with the website a couple weeks ago and so finally I am able to make this blog post and show off what I spent many long weeks building during the summer. I hope you enjoy the clean website that showcases the gorgeous hand crafted Indian jewelry as much as I do, and if you like any of it then feel free to buy. The Magento platform will be happy to process your order. The Nizanta website can be accessed via this link (Nizanta Jewelry).

I don’t have any screen captures of what the site looked like before TIP got a hold of it. They did a good job adding some nice design elements to the page. Overall there is a little of tightening up to do, but all of that will be accomplished over time. Here are some captures of what the Nizanta jewelry site looks like.

Bold and clear
Bold and clear

The site is full of white space. The jewelry and marketing message really stands out. Sliders are popular for many websites these days and I feel they provide a great way to change a pages look and feel with little effort. Great for seasonal items, or posting new inventory.

The theme of whitespace and simplicity continues in the product page. I don’t really want there to be anything in the way of the customer viewing the jewelry. No names. No prices. First look at the jewelry, and then if you like a piece simply mouse over for the price.

Beautiful jewelry shopping
Beautiful jewelry shopping

Or if the user wants to know more information click on a product for added detail. Product images can be hovered over to show higher definition of the beautiful hand crafted jewelry. Descriptions are short and useful. The necklaces product descriptions have a size sheet that the user can use to see what the necklace would look like when it is on. The descriptions describe what the 24 karat gold foiling means.

Descriptive and useful
Descriptive and useful

After the customer is done shopping, products can be added to a cart for final viewing before checkout.

Cart is simple and easy to use
Cart is simple and easy to use

Checkout process is simple enough. Both credit cards and PayPal can be accepted. Email notifications are automatically sent out to the buyers throughout the buying process. A login is available for return customers. Newsletters, gift cards, social links, etc. are all taken care of.

The building of nizantajewelry.com was a little painful at times but I learned a whole bunch. The end result was a great website that will scale as the business grows.

Not even half the people at HackRU

HackRU Fall 2014

Finally caught up on sleep from this weekend’s hackathon. For those of you who don’t know what a hackathon is, a hackathon is an event that usually lasts for a day or two in which people try to implement new computer hardware or software ideas in an individual or small group format. It usually has nothing to trying to break into databases, security, or any sort of illegal activity. There certainly are some great events for this, one of the more notorious being DEF CON in Las Vegas. The hackathon that I was at was HackRU, a 24 hour hackathon at Rutgers.

The first problem that you have to solve at a hackathon is what you are going to try to build. Idea generation and brainstorming can take a considerable amount of time, and with a 24 hour deadline it is a good idea to come prepared with an idea or two in mind. Luckily for me, I already knew two programmers that I wanted to work with and we had decided on an idea before heading in to the hackathon. We added a fourth hacker a few days before who couldn’t dedicate the full 24 hours as he had work the following Sunday. He floated between doing some of his own learning and trying to figure out our pretty messy work flow. The idea for what to build at HackRU was already pretty well established, as we met one day about a week and a half before to brainstorm ideas.

The idea that we decided to build was a student study group and tutoring website and Android application. The concept is pretty simple. Students can sign up and input their classes and form study groups. If they need additional help in class then they can request tutors (who sign up for the app with a separate registration). The value we try to provide is to increase efficiency in which students can form study groups and gain access to tutors. We also strive to improve efficiency in which tutors can find work by providing them with many potential students to tutor. While building for two different platforms was probably too ambitious, we decided to go for it.

The DigitalOcean sponsors hooked us up with some free credits for their virtual private servers, which I was pumped to receive. I have used them in the past and they have always been great to work with. I set up the server, a boring but tried and true LAMP stack. I would have loved to mess around with MongoDB but we decided to stick with MySQL as everyone was familiar with it and one of our hackers had a lot of PHP experience.

About an hour later we had our cloud server setup up as we wanted and had also acquired a couple domains from Namecheap who was also sponsoring the event. They were giving away some free domains but we also decided to pony up some bucks for the .com domain. At this point we had to pick a name for the app and decided on CourseSync, a name that was available for the .com domain, although we found out later was not available for gmail (say hi at coursesyncchampions@gmail.com) or twitter (follow us @coursesyncdev).

With the server up and running, Brad, the psychology major with ambitions of med school and wizard of brainstorming got to messing around with the user interface. Joe A., the computer science major, got to building the database and handling the php. Charles, the pharmacist, was floating between looking into how to improve our UI, researching his own stuff, and checking out what going on at the hackathon. I was handling the native Android development which was being done in Eclipse.

We worked for hours and hours. Charles clocked out around 1 AM because he had work the next day. Between Brad, Joe A., and myself I think we clocked around two hours of combined sleep. Unfortunately the 24 hour time constraint meant not much sleep and not following best practices or building a sustainable product for future development, but when the time had past we were pretty happy with were we ended up. We have an almost usable Android app and website, although we have a lot of UI to improve and we have to finish connecting the two apps to the database.

The website looks like this.

CourseSync webpage
CourseSync webpage

Pretty simple and you can see we have a lot of progress to make.

The Android app looks like this.

CourseSync Android Login
CourseSync Android Login
CourseSync Android Tutor Login
CourseSync Android Tutor Login
CourseSync Android Add Study Group
CourseSync Android Add Study Group

Same deal. Very basic and a lot to improve on.

By the end of the 24 hours we were beyond exhausted, but happy with what we learned and what we built. The feedback we received seemed good and people who we talked to or got to see our demo said they saw value in the app and would love to use it once we released it. You can follow @coursesyncdev on Twitter for updates and release. The plan will be to release at Rutgers and gauge the response before potentially targeting other schools for release.

HackRU is one of the few hackathons that is open to non-students, which I think is a very important feature. I have a BS and MS in Industrial and Systems Engineering and an MBA but my passion for the last few years has been anything and everything related to programming. I’m willing to travel all over the country and the world to attend these events as they are great opportunities for learning, meeting people, working with technologies that aren’t available, and providing a good reason to be in front of a computer for 24 or more hours at a time. I’m willing to pay a non-student entry fee or do whatever else is necessary to help out to offset the additional cost that I would bring. Having a bunch of computer science students working together is great, but the hackathon experience can be greatly enhanced by people who have different backgrounds or industry experience, are entrepreneurial, or have connections to companies, financing, jobs, etc.

Different backgrounds bring different people and thinking together. How would having a marketer, pianist, chemist, or sports therapist change the idea generation process? Industry experience is provided on the tech side by some of the sponsors or organizers, but you will never know what software pharmaceutical companies need unless you have someone with a Doctor of Pharmacy who has been working with pharmaceutical software for several years like one of the members of our team. You will never know what huge opportunities are available in the Department of Defense or data architecture fields unless you have someone like myself with years of experience working in those industries. Our mix of two people with industry experience (PharmD in pharmaceutical, MBA/Engineering in DoD), and students in Psychology (med. school ambitions), and computer science can lead to both some wild ideas or practical software that is desired or needed in industry.

Trying to include entrepreneurs and people with business interests are another way to improve hackathons. I was really impressed that there were over 100 submitted projects for this HackRU. That is an incredible number and an accomplishment for a hackathon that has been growing bigger every semseter. Most of these projects will die and never be developed for in the future. And while that is a good idea for most of the hacks, some are promising for future development. I would love to see some of these hacks turn into businesses, start generating revenue, or start accumulating large user bases. This is often too much of a time/money constraint for a broke student to accommodate amongst the many classes, projects, exams, work, and debt that they have to deal with. Opening hackathons up to non-students can get entrepreneurs, funding, and people who have the time and money resources to take the project to the next level involved.

Bringing in non-students also can bring in connections to companies which can be invaluable to students. This can bring in people who have access to jobs, internships, and exclusive technologies. It also can bring experience to show students how technologies or work flows exist in industry and what to be prepared for as ideas move from one or two person teams into businesses with hundreds or thousands of employees.

I’d like to conclude by giving the biggest thank you to the organizers of HackRU, the people at Major League Hacking, and all of the help of the Rutgers employees and students who made the event possible. It was impressive seeing you all be able to handle putting on a hackathon that took over all floors of the College Avenue student center with very few hiccups. We hope to see you all again in the Spring when we do it all over again.

Finished jbutewicz.com. Home of my travel and programming adventures

I’ve been messing around with some web development lately and figured it would be good to build a personal page for myself to get some experience and post about my programming adventures. I also wanted to do this to build a travel blog to keep people at home up to date with my travels (hi mom!).

As for content of the site, I wanted to keep it pretty simple. I wanted a nice homepage to invite the user. I wanted a blog to house my travel and programming adventures that I could easily update. Having a mobile interface to update content might be useful. I wanted to include an about me page to introduce myself to the user. I wanted to include my resume that could be downloaded in word or pdf incase anyone is interested to look at what I’ve done previously. I wanted a contact page with a list of my social links, Twitter, GitHub for my code, my apps in Google Play store, etc. I wanted everything to be clean and modern and be responsive and work on different devices. And having no ads was important for me because I generally hate the ad model as a source of revenue (because we put ads everywhere in life, even if they don’t achieve a reasonable return on investment for the ad agency or the company advertising), especially on a site like this.

When looking at what technologies to use, it was a pretty easy choice to go with WordPress. WordPress is used by so many websites. It powers somewhere between 20-25% of websites. Since a big portion of my site would be blog posts, it made a lot of sense to go with it.

Installing WordPress on a server is simple. I was pretty surprised with just how simple it is. Usually setting up a new platform can take hours of downloading, installing, and configuring, but WordPress really lives up to the 5-minute install time that they advertise.

Customizing a WordPress site is pretty easy too. Between the different themes, plugins, and the enormous community, you can quickly find and implement a solution to whatever you want to do that does not come bundled with the initial install. I was actually hoping there would be a lot more messing around with html, css, javascript, and php but there wasn’t too much. The general simplicity and ease of use of WordPress is great because I was able to build my site quickly but a bummer because I didn’t get the learning experience I was looking forward to.

As for choosing a theme I opted for taking the twenty fourteen theme that WordPress provides and customized it. WordPress releases a new theme every year. I wanted to use their theme as a starting point because it will eventually provide the user a sense of familiarity. Users will see the twenty fourteen design throughout the internet and it will feel natural for them to view my site. I generally liked the fonts, which were fairly modern looking. Things that I disliked about the theme was the overuse of black (I disliked most of the color scheme) and the narrow width of the paged at 474 pixels. I also disliked some of the confusing structure of the theme that didn’t make much sense to me. I changed most of the black to white and opened the page up for desktop users to 741 pixels and cleared out some of the complex structure.

Initially the theme looks like this.

Confusing and bad colors, but has potential
Confusing and bad colors, but has potential

I wanted to brighten things up with a green and white theme. I spent way too much time go back and forth with design, color palettes, and researching which colors were popular and fit the site that I was trying to build. If anyone out there is working off of the twenty fourteen theme I my dark green (#2d9185) replaced #24890d, mid green (#31be99) replaced #41a62a, and light green (#0cddbe) replaced #55d737. If you’re interested in any of the css/php changes, etc. then I can send you all the files and let you know specifically what was changed to achieve the styling of my site.

Final colors
Final colors

I wanted to take the site and remove everything to give the content the ability to shine through. I want my users to clearly see the content in a modern and comfortable way. After struggling with designs, I think I smartly removed everything that I could. Things were removed and removed until I couldn’t remove any more. Things that I added were removed. Eventually I got this design, a nod to the tremendously popular white space/flat design craze that is popular. You will see the green of the theme when you use it for helping to highlight and navigate around the site.

Modern and clean
Modern and clean

Although a large amount of my time was spent setting up the style of website, another large amount of my time was spent going and backfilling in some content. I took some pictures from some previous trips/programming work and added them to the site so that there would be content to greet the user. I plan on writing a little more in depth as I am updating posts going forward, but for going back on an entire year of my life I think I provided enough commentary to keep the user interested.

And that’s about it. I have to say WordPress has been a gem to use so far. I would recommend it to anyone building a personal site or one driven by continuously updated content.

With that, welcome to jbutewicz.com!