Web Development

When working on a client’s site, I usually have the privilege of having access to something like cPanel. From cPanel I then can access things like phpmyadmin and file manager. Using tools like this has always kept my life simple.

A problem arose, however, last week where I needed to get ahold of a database so that I could set up a local staging site. The issue was that the only credentials the client was able to give me was their SSH credentials. My gut instinct was to email them back saying that I needed more access, but then my inner adventuring self came out.

Over the last couple of years I have been pushing myself more and more to use the command line instead of GUI’s. The main reason for that is because I believe using command line gives you a better understanding of the things you are actually working on. This is what led me to my plan in this situation: to access the MySQL server remotely over SSH.

Luckily I work with incredibly smart people who I know if I don’t know how to do something, one of them will. Due to that I sought out one of the guys that I know is strongest in command line. In the matter of minutes he was able to help me get what I needed with only TWO COMMANDS!

In case anyone is wondering how to do this, please keep reading.

Before you Start

Before you start you will want to make sure you have the following information:

SSH host

SSH username

SSH password

SSH port number (if applicable)

MySQL database name

MySQL username

MySQL password

Running the Commands

Once you have that information you will want to launch your command line application of choice (I prefer iTerm 2 for Mac). After you have your application running, you need to run this command:

The syntax is ssh <username>@<servername> -L <localport>hostname<remoteport> -p <portnumber>. The reason we use 3307 for the localport here is due to the fact that you might be already using port 3306 depending on your setup.

Things that you need to replace:

username – this should be replaced with your SSH username

host – this should be replaced with your SSH host

(port_number) – this should be replaced with your SSH port number

Once you have done this you should be asked for your SSH password. When that comes up, insert your password and hit enter.

Now that you are in, in order to get a MySQL dump you can run:

Things that you need to replace:

mysql_username – this should be replaced with your MySQL username<

database_name – this should be replaced with your MySQL database name

filename.sql – this should be replaced with the name of the file you want the data to be dumped into

Once you run that command you will be prompted for your password. This is now referring to the MySQL password.

WAHLA! You now should be able to find that file inside the current directory. In most cases that is /home/(mysqlusername)/(db_name)/. You can access this via SFTP.

In the End

In the end this was a great solution for me. I’m sure there are even more advanced command line wizards that know of even better ways to do it. With that said, this worked for me. I believe that due to the simplicity of it, it works pretty well. I hope you find it helpful!

A couple of years ago I was perusing the web when I came across a thought-provoking article written by the one and only Brad Frost. It is a concept that has spread like wildfire in the development industry and rightfully so.

In a day where the majority of websites are built using a CMS (Content Management System), our websites are becoming more and more modular. Since the web is changing, the way we write code should adapt so that we deliver the best code that we can. We must understand that “we are not designing pages. We’re designing systems of components” (Stephen Hay).

Enter Atomic Design

The ideas and philosophies behind Atomic Design have been created with these ideas in mind. At the backbone, “Atomic Design is (a) methodology for creating design systems” (Brad Frost). This methodology is comprised of 5 parts:

As we look at these 5 parts, especially the first 3, we see that Atomic Design’s methodology relates highly to chemistry. What it is doing here is it is relating the building blocks of the web to the building blocks of all living things. That’s a short intro into what Atomic Design is, and I don’t want to go any further in the explanation of it then that.

The reason that I don’t want to get into more details is because my goal here is not to explain to you every detail of what Atomic Design is, but instead to let you know of a time it fell short. To fully explain where it fell short, let me tell you my own story with Atomic Design.

The Problem

After I had read Frost’s amazing article my juices were pumping and I couldn’t have been more exited to take it back to my team of developers. The team of developers that I worked with at that time comprised of a very diverse set of people from all different countries. Therefore I was interested to see how they would react when I presented it to them.

The next day came and I logged on to work all excited thinking “these guys are going to love this as much as I do!” The only problem was that when I presented it to them for their feedback, they weren’t 100% sold, and for a viable reason. The terminology was to hard for some to grasp.

See they totally bought into the core concepts of Atomic Design but when it came down to what each of those components were called, it didn’t make sense to them. The reason it didn’t make sense to them was because they had not learned with chemistry. Thus for them, it was too hard to relate these different terms to the overall big picture.

The Solution

What I so respect about that particular team is that even though they couldn’t pick up on all the terminology, they didn’t throw the concept out the door. Instead we rallied together to transform it to work for us. The way we made it work for us is by changing the 5 parts that make it up while still maintaining the overall concept. Our goal was to come up with terms that made sense to us and anyone we would on board in the future.

So we began spit balling ideas when we all of a sudden we landed on a set of terms that I in particular think are genius:

Foundations

Materials

Rooms

Templates

Pages

As you can see what we decided was to draw analogies from the process of building a structure. What we found was that just by tweaking these terms slightly, everyone was able to understand the full concepts behind what we were trying to implement.

Let’s Get Real

At the end of the day I’m not going to say that these same terms will work for everyone or that Atomic Design is flawed. This is just what worked for us.

I think what I learned the most, and what I hope you learn from this, is that we shouldn’t throw away great ideas just because some people on our team don’t understand them. Instead if our team is struggling, we should morph the ideas until they catch the big picture, thus allowing us to make better websites.

Create. Stop. Be Creative.

REVISION:

When I initially launched this post the title was “Where Atomic Design Fell Short”. I will be the first to let anyone know that I am not perfect and that I make mistakes. I am continually learning from advice from those around me. On Designer News Justin Barber commented that he thought my title was misleading and, after reading his reasons, I totally agree with him. Therefore I changed my title to be more accurate.