Categories Archives

You are currently viewing all posts published under Tips & Tricks.

I have been working with ruby on rails recently and wanted to make a cheat sheet for all the command lines that need to be ran in order for me to get my development environment up and running. To run your server of course is rails s and to run console is rails c. I am using a background task gem called resque that requires redis to be ran and a rake task to be ran as well. The last thing I have to run is another rake task that handles delaying a worker for me. This uses resque delayed. Hope this helps you guys!

Run redis Server
redis-server /usr/local/etc/redis.conf
resque-webxs
add /resque to the end of the url to view dashboard

Run Resque Delayed Rake
LOGGING=1 INTERVAL=10 rake resque_delayed:work

Run Resque Scheduler
resque-scheduler

Run Resque Rake Task
rake resque:work QUEUE=’*’

Run Rails Server
Rails s
Rails c

Postgres start database
pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start

Ultrahook 
ultrahook stripe http://localhost:3000/stripewebhook

Looks like wordpress is here to stay. There has been a battle on which is the best CMS system out there and wordpress has kicked everyone else’s butt. If you have tried Joomla, you will know that it is convoluted and backward to use. The whole purpose of a cms is so that someone can control the website who is not from a technical background. It takes hours and hours of tutorials for clients to understand how to use the backend and even then, I am left with puzzled looks and disappointed faces.

Don’t even get me started with uploading themes and plugins. Updating is a nightmare and navigating through the directories is very time consuming. This article is not suppose to be a bash on all the other CMS systems out there, so lets continue talking about wordpress plugins.

One thing you have to keep in mind is when something is free, it doesn’t always work. WordPress plugins are no different. There are great plugins out there, but there are so many bad ones. Checking the star rating with the downloads number helps. You should always check these out before using one. Also take a look at the description. If there isn’t a well written description, chances are the creator didn’t take the time to create a good plugin either.

Here are the top 5 that we found to be really great!

1. Contact Form 7

This plugin allows you to use a simple shortcode to insert any type of contact form you are looking for. It is very versatile and easy to use.

contact_form_7

 

2. WP-Maintenance

Many clients need a block screen to stop people from accessing their new website. This plugin does just that. You can also change the settings to display a countdown time to website launch.

wp-maintenance-mode

 

3.  Social Media Mashup

Allows you display feeds from all the major social media websites.

social_media_mashup

 

4. Disqus Commenting System

Disqus is a 3rd party commenting system that has great functions. Not only does it look really clean and uses advanced javascript for realtime effects, it also allow people to comment on your website if they already have an account. This helps to limit stupid spam bots that are trying to farm links.

disqus_comment_system

 

5. All in one SEO Pack

Allows you to name each post and page with title and meta tags. It also can autogenerate keywords and description if you like. There is a new function that allows you to edit custom posts as well. The function appears at the bottom of the meta data boxes and is super easy to use. Also plays nicely with other plugins.

all_in_one_seo

 

I am always on the hunt for better wordpress plugins. Leave some comments below with your favorite!

 

GIT_website_designIn my past articles I have mentioned the idea of using version control in your web designing. What is version control exactly and why do we need it? I think the best way to illustrate this is by using a common example that happens a lot to us, while designing a website. You have created a new development for a particular page on your website and ready to implement it. You ftp the page to your server and it looks awesome. Woops looks like something major is going on with the css or javascript and this needs to be tweaked. Woops I forgot to save a copy of the last file.

You get the idea of this scenario. If you were smart enough to create a copy of the original page it starts to become an overflow of pages all over the place. Copy 1, Copy2, Copy3, and so on. Many of us also work comando meaning we work on the live server and don’t test or new edits on a test first.

This is where GIT comes into play. The best way to describe it is a like a secretary that keeps track to any changes that you make. It tracks the page and the line of code that you edit. It shows you what you had before and what you added. This is not only cool for yourself, but if you have ever tried to work on a project with others,  it is essential.

All the files that are saved are sent to repository (directory) on a server, so everyone can grab the current files. Every sends to that repo and everyone gets from that repo. In GIT language they call this push and pull. I don’t like command line stuff. I find it weird and it gives me a headache to have to remember all the commands. If you are like this to, I highly recommend Tower.

This is going to make your designing way more effiecient and effective. There are so many cool features you can do with GIT as well. Let’s talk a little about commits. A commit is basically just you saying that you like what you made and you want to save it. It keeps track of the commit and when you are ready you can push it to the repo. I like tower so much because it allows you to excute the GIT commands by clicking buttons. You can roll back to a specific commit your just revert the one you created.

I am a big fan of Chris Coyer and his video tutorials. Here is one he did on GIT Tower that I found pretty helpful.

He cracks me up, mainly because we run into the same mistakes. This gives you really good idea of what GIT looks like and tower’s great interface. A big help would be to also look at using github for your repositories. Remember a repository is just a place to store the files so you can push and pull the master changes. Github is free and you can find all kinds of crazy and cool projects that people have created. Many of the projects are open sourced and you can download or contribute to the project. Don’t go around changing people’s projects if you don’t know what you are doing. If you want the repository to be private you can pay a very affordable price of $7/month for 5 repos.

I was really confused in the beginning when people were using this word, so I hope that helps. Once you become comfortable with using version control you are gong to wonder why  you ever did your web design before it.

website_designIf you have gotten over the hump of learning HMTL and CSS it time you start to take a look at learning more useful tools and tips for your web designing. These will really help you to make the transition from being a sort of designer to “hire me because I can make you a website that kicks butt.”

Let’s talk briefly about CMS Systems. Content management frameworks allow you to manipulate the website quickly and without having to edit code. They are great to design websites fast and have your clients be able to manage them through a backend interface. There are a few out there, but WordPress has been making the most impact and growing the fastest. It has a bunch of proprietary code so make sure to read through the documentation if you want to make development edits. We recommend to learn wordpress.

Another buzz that has been going around is for Ruby on Rails. This is written in a different coding language and will take a little while to learn. It is lightening fast and suppose to be very easy to use to develop web applications. Some major website use it and it may be where the future is going.

Find a great text editor and ditch the GUI platforms like Dreamweaver. This type of apps are way to heavy and confusing. We recommend using a program like espresso or coda. They do cost a little, but make you code much faster, which makes you more money in the long run. There is a free text editor out there that is not bad called Textwrangler. This is a good alternative if you want to skimp.

Use a better ftp app. Filezilla is cool in the beginning, but has it’s limitations. Now that you are getting pretty good at designing it is time for you to upgrade, we recommend Transmit. It has so many cool features and the user interface looks really nice. You know how I like clean looking interfaces.

It’s time that you start considering version control. Version control allows you to keep track of all your changes and also work on a project with other people. If you have never worked on developing a website with other people, there are a world of problems that can occur. Code gets overwritten and you lose track of who did what. GIT allows you to keep track of everything and work with others on the same project. I highly recommend Github, which is a place to create these places to store your files for version control. They are called repositories and there are many great tutorials on how to use it.

So you see becoming a better web designer includes using better tools and new ways of doing things. After all we are flexible, right? Well we should be because we work in the Internet field and it changes ten times as fast as everything else.

web_designSo you have built this incredibly beautiful website and you launch it. People should flock to it, interact with it, and join no problem right? Too bad it doesn’t work like this. A large part of gaining traffic is through the search engines organic listings. The ranking is based on complex algorithms that nerds spent years developing and improving. One of the major problems is that if you are a new site you are well behind everyone else, even if your content is just as good or better.

I am going to unmask some basic techniques that will get you started and will help you at least get your foot in the door to compete with all those other websites out there. There are many tips out there and a lot of them are good, so don’t just stop here with this article.

First of all you are trying to increase in rankings, so you need to measure where you stand. DUh! I recommend rankings pro by stay apps. It will tell you where you rank for whatever keywords you choose for all the major search engines. It keeps track and displays the change per day on a cool chart.

Ok! Now that we have our base rankings let make sure that you title and meta tags are correctly labeled. One common mistake is that your website does not have a different title and meta tag for each page. I think that this is a common mistake because websites are becoming more dynamic and pages are no longer static html pages. Anyways, make sure they are different. The title tag is in the source code of the website. I am using google chrome. You can right click on the page and choose view page source. A bunch of code should be displayed. Near the top you should find a tag that looks like this

<title> title here </title>

seo

 

You can see from the image above there are also keyword and description meta tags as well. Make sure that these are different for each page as well. If you are using wordpress, there is a great plugin called all in one seo. It allows you to easily change all this for each page and post created.

Have a particular keyword in mind that you want to rank for and make sure to add that into your title and meta tags.

Now that you have a targeted keyword you are going after, we can talk about keyword density. Keyword density just refers to how many times a word appears on a page and total on your site. If your website is all about “socks”, the word “socks” better be used more then any other word.

Link building has become a much bigger player in the seo world then what it used to be. The key to helping your rankings is pretty simple, but not the easiest to do. You want to create links that have the anchor text of your keyword on other websites.

For example, you want Amazon.com to have a link like “socks” that links to the home page of your website. The general rule of thumb is the more popular the website, the more powerful the link will be and your rankings will climb faster. Google has a measurement scale called page rank. You can search it in google and learn all about it.

I hope this gets your mind turning and helps with your great website getting more traffic.

I get this question quite often so here goes. What are content management systems and which one is the best. Here is the breakdown. Content management systems are frameworks that allow users to interact with their website without directly connecting to the server. This helps with allowing someone who doesn’t know web design to be able to manupulate their website through the backend interface. Hence the name content management.

CMS systems work using dynamic coding, php, and a database. The php code allows the website to call specific tables in the database to display whatever they want. Since information is no longer static, like oldschool html pages, changes can occur much much faster. For example if you were to change a menu item in the top navigation in the past, you would have to edit every single page in that website.

Content management systems have also made large strides in allowing other developers create plugins that can be easily integrated. These type of websites are particularly useful on websites that need changing quite often, such as blogs.

The three major ones out there are Joomla, WordPress, and Drupal. I have tried all three and found that wordpress is the best. Joomla is very difficult for the normal user. Joomla brought me a lot of headaches with uploading components or modules. There are two sets of folders one for admin and one for content that just end up confusing everyone.   It is not very intuitive and difficult to install.

Drupal’s admin area is overwhelming and difficult to navigate. Updates often break other parts of the backend. Not as widely used.

WordPress is the CMS of choice. Clean design and getting better with each update. Everything is labeled and easy for developers to design plugins for.

There is a new trend out there with using responsive layouts. Website are not just being viewed on the computer anymore as you know. Have an application developed just to work on a mobile device or tablet is expensive. That is where responsive design layouts have come in play.

The idea is to have the same website content be able to adjust for whatever size monitor or device you are using. You can even adjust your browser screen and see the website adjust before your eyes. If you know HTML and CSS you can incorporate this into your site.

Here are the css tricks you are going to look for

/* Mobile */
@media handheld, only screen and (max-width: 767px) 
/* Smaller screens */
@media only screen and (max-width: 1023px)

Don’t forget to apply your new CSS to images and videos. That is usually the part of the site that people forget.