Let’s Get Comfortable using Git for Version Control

Working from the command line is pretty awesome and from what I’m hearing, it’s an essential skill for any web developer. It is also another way to stay up to date with web technology. I’m still learning how to use Version Control but I thought I would write this post as a helper tool for anyone that’s learning how to use version control.

GitHub for Windows screenshot

The GitHub app is a great gateway tool for anyone looking to start using the social coding site.

What is Version Control?

I could tell you what Version Control is but I think this video by @matthewmccull from GitHub explains it much better than I ever could.


When I first started to use Git, I didn’t use the command line at all and it wasn’t fulfilling, let me tell you. I also know that companies might frown upon a developer that’s using a GUI to collaborate on GitHub. When I first became interested in learning how to use GitHub, I downloaded the GitHub for Windows app. This is a GUI and it’s great for anyone that wants to collaborate but aren’t willing to learn any commands (really, there aren’t that many commands to begin with). Once I started using this, I felt something was missing. If you’re using the GitHub for Windows or Mac application, you might feel the same way.

This post isn’t about the GitHub for Windows or Mac applications, it’s about installing and using Git from the command line or terminal.

So with that being said, we are going to create our first repository using Git Bash (a command line tool that comes with the Git download).

Are you ready to use Git? Let’s git started!

Get it?…let’s git started!?…err, no.

 Make Git Yours

1. First create an account on GitHub.

GitHub

In order to start using GitHub, you have to create an account.

To get started you will need a GitHub account. Create an account and create your first repository. We are going to call this repository ‘MyFirstProject’. While we’re here, click the box that will create the ‘README.md’ file also.

 2. Second, install Git on your machine.

Download Git

Git won’t come installed on your machine. You have to download it from the official site.

Git is not something that already exists on your computer. If you want to use Git, you first have to install it on your machine. I went to git-scm website and clicked the download link. This way you should have the most recent version of Git on your machine.  We are going to use Git Bash since we want to become comfortable in the Terminal.

3. Open Git Bash and configure your user account on your local machine. You will have to type the following lines to configure:

git config –global user.name 'PutYourNameHere'
git config –global user.email 'PutYour@Email.Here'
Make sure you put your name and email in parentheses. The email that you use should be the same email that you used when you created your account on GitHub. This is VERY important. That way anything you work on will be associated back to you.

Now that we have those things squared away, we can start with the fun stuff and create our very first repository. Yipeee!

Create a Repository

Each command starts with ‘$’. You should not try to erase this. The ‘$’ is a default command in the Terminal and precedes the commands that we’re going to type.

From my very basic use, there are only a handful of commands that are used in git. These commands are:

(a) git init, git clone and git config are used to set up a Git repository.

(b) git add and git commit are used to record snapshots.

(c) git status and git log are used to inspect a Git repository.

1. You should be in the root folder when opening the command line. I’m using Git Bash. So I will see this: ~ (master). We have to now create a new repository for our project. First type: mkdir and the name of your new repo. So for example, my repository will be called MyFirstProject so I will type into the command line: mkdir MyFirstProject.

2. Next, you have to go into this new repo that you’ve created. So to do this, type: cd MyFirstProject. The cd part is short for change directory. Now you should be inside of your new repository. You should now see something like this in Git Bash: ~/MyFirstProject (master)

3. Next type: git init What this does is this initializes your repository.

4. Next type: git add . and what this does is this stages your repo for GitHub.

5. Next just type git status to get a briefing on what is currently going on with your local copy of your repository. You should get a list of files that are available and have not yet been committed. Each file should begin with new file: because they have not been pushed to your repository yet. That’s what we’re going to do next.

6. Now that we’ve gotten the status, we now want to tell git to create these files and make them available locally. Type: git commit -m ‘first commit’ and we should now have a copy of our files available.

7. If you created a README.md file in GitHub when you created your repo, we have to pull this down to our local machine first. Type the following: git pull git@github.com:yournamehere/MyFirstProject.git master. You will have to clone your project and replace the name and URL with your own for the URL in parentheses. This stuff will already be done for you when you copy the SSH clone URL.

8. Once this is done, you have to push your files to your GitHub repo by typing the following: git push git@github.com:yournamehere/MyFirstProject.git master. Again, replace what’s in parentheses here with the cloned URL of your own repo.

What’s Next

It’s time to celebrate, that’s what.

Credit: "Github" by Fumi Yamazaki

Credit: “Github” by Fumi Yamazaki

Once this is done, it’s pretty much smooth sailing for us. But let’s go a step further. Create a new file in your text editor and name it index.html. We’re going to save it in the same folder as the local copy of of repository. Create a list on your new page and save it to the MyFirstProject file. In Git Bash, type git status. See how this works now? The file that you just created should now be highlighted in red as a new file.

 I made some changes, now what…

1. Type the following: git add index.html

2. Now we’re going to type: git commit -m ‘created the index.html page’

3. Next, type: git push (your SSH key here) master

4. Now, type: git status (you should get the message, On master branch nothing to commit, working directory clean

 Connecting to GitHub is done via an SSH key. To learn more about generating an SSH key visit this link.

I hope this helped eliminate any confusion that you guys may have about Git and version control. If you have any questions, feel free to drop me a line and we can walk through any problems that you might have together. You can find and follow me on GitHub and follow me on Twitter too. Until next time…

 

Photoshop Organization Tips for Web Developers

What’s up guys. Carlton Stith here. Thanks for joining me as I discuss my Photoshop organization tips for web developers.

Adobe Photoshop Throwback

Adobe Photoshop has been the go to editor of choice for web designers for a while.

Responsive web design has changed the game for a lot of us when creating web mock-ups. Some of us like to create mock-ups in Photoshop while others prefer to jump straight into the browser. If you still get a kick out of designing in Photoshop or you have clients that insist on having a PSD of their site, then this article is for you. I’m going give you 10 ways to organize your PSD’s for faster web development.

Using a PSD template can be a life-saver.

Mobile device mockup

Some people prefer to design in the browser for rapid responsive web prototype development.

When you are creating a mockup in Photoshop, it’s very important that you organize your individual files. This can save you a lot of time when it comes down to coding the page in your text editor.

Here are 10 tips to organize your PSD

1. Group your layer files into folders. Be as semantic as possible when assigning names to your layers.

2. Name your layers. There is nothing worse than looking at a PSD and trying to decipher the main header from the footer copy.

3. Color code your layers. To do this, right click over the eye icon in your layer. This will pull up the layer field.

4. Be as semantic as possible when naming your PSD. Final.psd and final-last.psd doesn’t help either of us.

5. Use a grid when you’re creating a mockup. There are more than a handful of them out there such as the 960 Grid by @nathansmith, Twitter Bootstrap and Skeleton.

6. Go easy on the effects. Less is more. Avoid over-editing your file and know when to stop.

7. Use a web font and make sure the development files are available for code. If the font that the client wants is licensed, make sure he/she is aware.

8. If you can tell there’s a drop shadow, you probably used used too much.

9. Proofread your copy. Have someone else re-proofread your copy. There’s nothing worse than a web professional that doesn’t check their own work.

10. Conserve the size of your file and use Save for Web when you’re ready to ship.

Well, that’s about all that I have for now. If you want to learn more, follow me on Twitter and hit me up on there. If you want to learn more about me, visit this page and contact me for more. Until next time folks.

Should I Learn JavaScript or jQuery?

JavaScript the Good Parts and JavaScript the Definitive Guide

JavaScript the Good Parts and JavaScript the Definitive Guide are 2 recommended books for those of us learning JS.

Learn JavaScript and conquer the world!

What’s up guys I’m back! Yes, it’s Carlton Stith from CeeJayS Media Media and I want to give you my take on the route to take when learning programming languages. I’m going to talk about JavaScript and the jQuery library in particular.

I listen to the ShopTalk Show podcast a lot. Chris Coyier and Dave Rupert are totally awesome and give some great advice. In a recent episode, the question of what’s the best programming language to learn first was asked. The listener was in the process of beefing up his coding skills and wanted to know if he should learn JavaScript or jQuery. Well I’m going to give you my take on the question and I want to know if you think I’m right or wrong for saying this.

Learn JavaScript.

What’s the best way to learn JavaScript? Write more JavaScript!

I think if you are interested in advancing your career and a programming language is what you are seeking to learn or teach yourself, then you should by all means stick with learning/teaching yourself Vanilla JavaScript and I’m going to tell you why.

I can hear a lot of designers right now saying “but why. Noooo! Jquery will let me see things immediately! And it’s the cool stuff that’s going to make my webpage much better.” I feel you guys. I feel the same way, kind of.  And while this is true, I feel like learn JS will make you more of a well-rounded and knowledgeable web developer. Learning JS is tough, I know. If you just stick with the basics, then this is an advantage that you will have over the next guy who only knows the jQuery library. Jquery is absolutely fantastic, don’t get me wrong, and it cuts development time but it has its place. Don’t crucify me for saying that you shouldn’t concentrate on jQuery. But at the same time, you have to remember that jQuery is only a library.

Now I’m still learning JavaScript myself and I asked myself this question a number of times before finally landing at the conclusion that I will eventually be able to say to a hiring manager that asks if I can write vanilla JS with confidence, “Yes! I know and can confidently write in JavaScript!”.

JavaScript code

Learn the basics first. Programming is an art.

I recently saw an opening for a junior web developer position and within the job requirements, besides the usual stuff, the job required that the person knows JavaScript and not just jQuery. Now I’m not sure about you, but I would much rather know how to prepare a 3 course meal than merely knowing how to make a desert. (I hope I didn’t fumble than crude attempt at an analogy). And I’m pretty sure you get what I’m saying and let me know if I’m wrong! Like I said before, I’m still learning this stuff and while it’s challenging, I feel like it’s going to pay off in the end because I will know the basics. The foundations to the numerous other libraries out there.

In conclusion, if you are focused on your career and looking at it from a long term point of view, then you absolutely cannot go wrong with picking up a good JavaScript book, enrolling in a course and putting some elbow grease into learning JavaScript. Stay up to date with technology and the web. Digest whatever you get your hands on from cover to cover, write JavaScript everyday and stick to it.

Well there you have it. That’s my opinion and I’m sticking to it. Until next time folks. Happy coding.

Let’s Create CSS Sprites

CSS Sprite Sheet

CSS sprites are used in web design as a way to improve performance by combining numerous small images or icons into a larger image called a sprite sheet or tile set, and selecting which icon to show on the rendered page using Cascading Style Sheets.

CSS Sprites have been used for years in video games and are an excellent way to optimize your website. Instead of using 4, 5, 10, etc. images on a single web page, you can instead place all of these images into one image. In return, you just reduced the amount of http requests that have to be made by the browser. Some people say this is also good for SEO purposes.

Is there an easy way to create CSS Sprites?

Creating a CSS Sprite is actually very easy and is one of the simplest optimization techniques that you can use in your website. In this video, I will discuss how to create a CSS Sprite for your website using only Photoshop and your favorite code editor (I’m using Sublime Text 2). I will be implementing the pseudo class hover and active to create a simple rollover anchor link.

What are my alternatives?

There are a number of sprite generators on the web that do a great job of creating sprite sheets or spit out the pixel values that are need in the CSS. Spriteme and Sprite Cow are two great tools that are freely available on the web.

Additional Reading

How I Keep Up to Date with Web Technology

Rode Podcaster

Staying up to date with web technology can turn into a full-time job. You have to find this stuff interesting to make it a daily habit.

What’s up guys! It’s Carlton Stith from CeeJayS Media and I’m back with another web design and development post. If you’re a web designer or currently studying to become one, then you might find yourself wondering how to stay current.  I know just as well as you do that web development is a fast moving field that can be pretty difficult to keep up with. You can subscribe to a handful of newsletters and podcasts or follow some cool people on Twitter, but it still seems like that’s not enough, right? I agree. Well, fear no more guys. I’m here to give you a peek at who I bookmark, receive newsletters from and/or subscribe to on iTunes.

The Web Technology Dilemma

I find myself struggling trying to keep up with what’s new on the web dev front while simultaneously juggling a family life, full time job and whatever other things I may have going on. Web technology stuff changes so fast nowadays. What preprocessor should I learn first? What’s the best way to add support for IE? I often find it pretty challenging to keep myself knowledgeable. I am often overwhelmed so I thought you guys might feel the same way.

Unfortunately, there isn’t one place we can visit to get all of the news that we need.

Here are several web technology, design and development blogs/podcasts that I read often or subscribe to. I am only going to list five but there are many more out there. If I didn’t mention your favorite blog, let me know.

Web Design Blogs I Visit Daily

1. CSS-Tricks (blog) – http://css-tricks.com/

CSS-Tricks

CSS-Tricks is a web design and blog community written and managed by @chriscoyier.

CSS Tricks is a blog that is written by @chriscoyier. This place is like the mecca of web development as far as I’m concerned. What makes this blog so great is the level of intensity that goes into it. I’m not sure how Chris manages to post so often but the tenacity gives me my daily inspirational juice to keep writing myself. I’ve learned so much just by perusing this site everyday that I would highly recommend it.

2. Shop Talk Show (podcast) – http://shoptalkshow.com/

@chriscoyier and @davetron3000 host this weekly podcast about web design and web development. Each week they feature a guest. Past guests have included @danielmall, @davidwalshblog and @zeldman. On occasional weeks, they may have something called a “Rapid Fire Show” where the show has no guests. For the entire duration of the show, Chris and Dave answer questions left by the listeners. The show is very entertaining.

3. A List Apart (blog) – http://alistapart.com/

A List Apart

A List Apart is a extremely well-written blog for people who build websites.

The @alistapart is another blog for web designers and developers. Web design best practices and standards are the primary focus of each published article. It began in 1997 as a mailing list and eventually morphed into a website. A List Apart was put together by Jeffrey Zeldman and Brian Platz with the intentions of only publishing insightful and intelligent articles. Bookmark this site immediately, if you haven’t done so already.

4. Creative Bloq (blog) – http://www.creativebloq.com/

@CreativeBloq is a blog that hosts more articles than you could ever imagine. This is another great resource, if you have room for one more bookmark. From graphic design to helping you find a job, these guys have got you covered.

5. Codrops  - http://tympanus.net/codrops/

Codrops is a blog maintained by @crnacura, @o_telho and @SaraSoueidan. This blog features some really awesome examples of experiments with CSS3. The articles, tutorials and demos that are featured are more than enough to keep a developer satisfied for days on end.

TIp of the Iceberg

Find as many sources of information as possible to expand your knowledge.

This is just the tip of the Iceberg

There are more ways than this that you can keep up-to-date with the latest in web technology. There are conferences, meetups, social networking (both in person and online), etc. You should focus on following the people your field and just try to get some knowledge from them. For instance, I have my favorite guys so I will follow them on Twitter, GitHub, CodePen, Dribbble, etc. That might seem like a lot, but the web as a whole isn’t small at all.

For some super-awesome guys that are doing it way big in your field and follow them.

Well that’s it (for now at least). Did I miss your favorite blog or podcast? If I did, just drop me a line and let me know. This list is certainly not exhaustive and I subscribe/read/follow way more blogs than I mentioned here.

As always folks, thanks for reading. I am @carltonstith on Twitter talking about web dev stuff or just rambling about stuff. I’m on Facebook too if you want to like me there. Until next time…