Sketch Resource List

Last updated: Dec. 14, 2012

I've been using Sketch 2 from Bohemian Coding off and on for a couple months now. I actually messed around with the app right after the major version 2 release and then didn't use it for a while. I've been doing some actual UI work with it lately and have really enjoyed it. I wanted to further my skills with the app and see just how other people were using the software and I've had a tough time finding the information I was looking for. 

So I got a little pissed and decided to halt what I was doing and compile a list for the betterment of the Internet (always a super idea, right?). I scoured around the Web and called on some Twitter pals and here is what I've come up with so far.

I'm intending this to be a running list of resources and cool stuff Sketch related. I'll attempt to maintain it until it gets out of control. Drop me a line if you find anything that I missed and I'll add it to the list.

Templates:

There are all sorts of these template type items available for Photoshop, Illustrator and even Fireworks and we're now starting to see more and more available for Sketch. These little gems are a great way to learn some tips and tricks about the app. It's so helpful to actually see how people are making the things they are making. 

UI Elements and Kits

iOS 6 UI

Safari Browser Window

These made by Benjamin De Cock

------

OS X Desktop

Made by Jordan Borth

------

iOS Message UI made with Sketch 2

Made by Ben Breckler

------

Sketch 2.0 Mac OSX UI Kit

Made by Ivo Mynttinen

------

Buttons

Made by  Gadzhi Kharkharov

------

iPhone 5 Shape

Made by Giancarlo Nicolof

------

Mini Mountain Lion GUI

Made by Zander Brade

------

iOS UI Resources

Made by Marcelo Marfil

General:

Here you'll find a wide variety of stuff written about Sketch. Various reviews and other articles in that vein. Keep in mind the dates associated with these articles as the developers of Sketch release fixes and updates quite fast. What may be a limitation one day may be erased the next.

7 Days with Sketch - May 8th, 2012

This one is a bit old, right after the release of Sketch 2. Things have changed and bugs have been fixed, updates have been made, etc. But still a good read.

------

Sketch 2: A Worthy Photoshop Competitor? - May 02, 2012

A good take from an experienced designer about some time spent with Sketch. What is good about it and what are some of it's current shortcomings. 

------

Sketch 2: A Simple, Powerful, Vector Graphics App - May 23, 2012

This is a review I wrote actually for Mac.Appstorm a while back. Again, this is a very early version. This version may have even been a pre-release now that I think of it. 

------

Sketch2 Review - August 17, 2012

A basic review from Mac | Life. A little later on after those initial reviews.

------

Sketch 2 First Impressions - May 7, 2012

Cool review done by Sacha Greif. Covers some very specific aspects of the application.

------

Sketch helps you go from design to CSS - March 20, 2012

A pretty brief news post about Sketch but hints to some big things ahead.

Tutorials:

Pretty obvious I suppose, but these are a list of tutorials showing you how to use Sketch. The Adobe world is flooded with this type of content and from my experience tutorials with Sketch are a little tricky to find as of now. That should be getting better as the days go on. Maybe I'll even do a few here myself.

Drawing Simple Spherical Icons

Type: video

------

Sketch 2 by Bohemian Coding Tutorial and Walkthrough

Type: video

Made with Sketch:

Here are some things that I've found were made using Sketch. At least this is what the designers say...and I guess we can take their word for it. I just wandered Dribbble for these so I'm sure there are lots of others out there. As you would imagine the Sketch tag has a rather powerful, quite different meaning. Let me know if you're aware of any others and I'll add them to the list.

Flat Icons by Jake Lazaroff

Twitter Rebound by Marcio Barrios

Ozma Logotype by John Morris

Finder by Robbie Pearce

Pinny app initial mockup by Jordan Borth

Login form using Sketch 2 by Me

Simplicity in Online Education

Originally posted at blog.snapclass.com.

Online Education has become almost a buzz word in the startup community lately. And for good reason. Our increasingly interconnected word has opened up some really interesting possibilities to disrupt a gigantic, and seriously old industry. Snapclass came about because of some personal needs and wants and one of those was a longing for a less messy environment in which we can teach and learn. 

I'm the UX and Front-End Designer and Developer here at Snapclass. From the beginning we realized the need for simplicity in what we were building. Most applications that have been designed and built in this space so far have been overly bloated and flat out complicated to use. At least that has been our observation. There's no reason something nice and simple can't exist to solve this problem.

Maintaining simplicity while designing anything is really tough. Especially in a fairly complicated space like online education. We've had many discussions (some quite heated) about what needs to be included from the feature and functionality perspective. We want to keep the features down to what is really needed. There's always an argument for what should be added and we have those, and will continue to have those, discussions internally as we move forward. We don't want Snapclass turning into a user experience mess. We want you to be able to figure out how it works very quickly so that you can get to what is actually important, teaching and learning.

Now, I say that we want to keep things simple, but that doesn't mean we're done. Quite the opposite. We're really just getting started. We've built a very simple, basic yet completely functional version and we are now entering an iteration loop. We don't plan to change the core of our product any time soon, but we'll be constantly making improvements with that idea of simplicity ever in the back of our minds.

Online education in the current state feels so complicated. This doesn't need to be the case. The main idea with just about every education startup is to change the educational system in some way or change how we learn and teach in the general sense. We can knock down geographic, demographic, and financial barriers with the technology we now have access to, but by building these overly robust applications in an attempt to solve the problem we're building a new barrier for users. People get scared the first time the hop into an online classroom with buttons and switches and messages popping at them from all directions. I've seen in and I've experienced it.

We should be in the business of removing barriers and not creating new ones. Unfortunately, we will always be fighting this to some extent given the nature of the platform we're working on and I'm not so sure we can ever completely remove all the roadblocks, but that doesn't mean we shouldn't try. There is room for simple to use yet extremely useful online education applications and that's what we're going for here at Snapclass. 

We're running some tests with class subjects at the moment so please check out our class listing and sign up for the classes you'd be interested in. We'd love to hear what you think. 

We also appreciate any feedback on any front so please don't hesitate to contact us.

Snapclass - Online, Live Education

Time for an update. I've been in Chicago for a couple months shy of a year and I couldn't be more excited about how things have gone and about where things are going. I haven't been too vocal yet about exactly what I've been doing, but to clear things up I have in fact been working hard on a web application called Snapclass.

Education is a hot topic in the technology startup space right now and we're dropping ourselves right in the middle of that mix. In essence want to utilize the amazing technology we have access to these days to expand how we teach and learn. Online education certainly isn't a new thing, but we feel like there's all sorts of room for improvement and a serious need for further exploration. 

Who is Snapclass?

At Snapclass I'm the user experience and front-end designer and developer. I am also a co-founder along with Scott Mandel and Ryan Nichols. Scott and Ryan started Snapclass and they brought me on to help out with the outward facing aspects of the app. Scott has a business and professional poker playing (World Series of Poker ring winning even) background and is the man on the street talking to folks about Snapclass along with running the day to day operations. Ryan is the man behind all the technology we utilize. He's a language agnostic programmer and has been doing it for most of his life. He's a smart chap, I'll vouch for that. And that's it. Just the three of us. 

What is Snapclass?

We're still very early on, but our intentions are fairly simple. We feel like a lot of the solutions that are in this online education space are bloated and to daunting to use and lack some core functionality. We wanted to simplify the entire process and classroom experience and just make it better for everyone. With Snapclass you can either teach or join a class and be in your classroom with in seconds. You can also schedule classes and register for classes in the future as well. All super simple.

There is, of course, a financial component to all of this (which is another area in which we see room for improvement in the industry). As a teacher you have the ability to charge for your time. You set the price for your class and we'll handle the rest. Teachers can also set hourly rates and choose to meet with students one on one in a timed scenario. We want teachers to be able to charge what they are worth.

By taking this route we encourage high quality teachers to use Snapclass. You might think that this will shut out some students, but the opposite is true. Because Snapclass provides an online classroom the geographic barriers are completely erased. A student in rural South Dakota can take a course from a University of Chicago professor tutoring in his spare time at whatever time works for them. We aren't under the impression that online can fully replace in person, but we do feel like the overall cost to this education will be less and thus students that normally wouldn't have access are now suddenly able to connect with high quality teachers at prices they can afford. Online education can be supplemental to in person education in a lot of situations and it can also be a replacement in the right scenario as well.

Online education is tough. We can attest to that. But it's a problem that can be solved. Or at a minimum it can be better. We want to provide teachers and students with the tools they need to both expand their reach and their knowledge. We want to offer the core set of features needed to do that and nothing past that.  

Where Are We Going?

We've gotten the point of being able to offer a stable product. We know it isn't perfect and you'll be seeing improvements and tweaks nearly daily, but it is usable and it does work. We have a pile of classes listed right now and are gauging interest in a wide variety of categories. Browse our listings and sign up for the classes you're interested in. Also, don't hesitate to suggest class topics to us as well. Any input is greatly appreciated. (matt at snapclass.com or @snapclass)

We have a couple features coming down the pipe as well. We're putting the finishing touches on a "request time" feature. This will enable students to browse our user directory and send requests to connect with specific teachers. We're also working on a white-labeled version which would allow for groups to brand the classroom and overall experience as they wish. 

Final Thoughts

I suspected this post would get a bit lengthy, but I wanted to try to convey as much about what is going on with Snapclass as possible and encourage folks to check out what we are doing. We see all sorts of wonderful use cases and we will be encouraging those as much as we possibly can. We're in a continual loop of iteration and improvement and we see some legitimate potential with this application. Again, please sign up for Snapclass and let us know what you think, and if you'd be so kind, spread the word about what we are doing. This is a big idea and we need your help.

For more information about Snapclass follow along here (I'll be writing more in the future) as well as our blog and Twitter and Facebook pages

Trying to Start Again

I've been writing in a semi-professional manner for few years now. Not a long time, but I written my share of words.  I've had some stretches where I stepped away from writing for one reason or another, but always found myself back and actively writing soon after, even if it was just for myself. This time has been different. It seems I got a little lost.

I've had a few fairly major life changes hit all within the course of the last few months and what started as a "planned" few weeks away has turned into months. I'm not entirely sure what happened. I just finished up a post that had been in draft form for a month and other than that this is the first bit of writing of any kind I've done in a couple months at least. In fact, I can't even remember the last piece that I wrote or where it was published. I used to write every single day. 

It's easy to get off track while cruising down the various courses of life. Sometimes we stray for good reasons and other times for seemingly no reason at all. I hope that my reasons were sound. They were at least in my mind. That said, I've realized the desire to get back to writing again and now I'm tasked with the difficult part. Making it happen. Getting an idea is one thing. Following through is an entirely different thing.

I've grown busier during my hiatus. The good kind of busing, working on things that I truly enjoy and spending time enjoying a new place with the people I love. I know it won't be easy, but I'm committed to making time. I know that writing does my mind good and once I get in the trenches I quickly remember that I truly love putting pen to paper. It's time to start again. 

So Code Academy is Over, But Not Really

My idea of writing about my experience at Code Academy didn't completely pan out. Turns out it was busy enough working on projects as part of Code Academy that I just didn't have the time or was to burned out to spend any more time staring at my computer screen. But now I've had more than enough time to reflect upon the experience I thought I'd write about it for anyone who cared.

I attended the UX and HTML/CSS courses which was, probably obviously, the front-end direction. Another group of students were part of an even more intensive Ruby on Rails path. Things started out fairly slow as we were all getting acquainted, but soon enough things picked up. For me the best things of the quarter began with my first hackathon where I met my Demo Day team.

We came up with our main app idea there, Current Crowd, and had the opportunity to give it a rough run at the hackathon. We built something during that weekend, and then subsequently tore it down and rebuilt it (multiple times) for Demo Day. More importantly I met some awesome students from the development class and we easily formed a pretty fantastic team.

The process of building our app the final month or so was an incredible learning experience. We built a web app which as you would expect ran on Rails. I was on a team with four students from the developer side, me being the sole front-end student. So, I handled the front-end and they handled the back-end and, quite amazingly we were all able to work together on the same project to build something pretty cool. Our app was used by Code Academy as the Demo Day app and helped showcase the students and teams. We're actually working with the CA staff to continue the service for their upcoming classes so it looks like it will live on at least in that capacity. We may even continue to build it and release a commercial product in the near-ish future. 

One other thing I'd like to point out is that we were the first class to present in teams and build something in teams. To me this process, though rocky at times, was incredibly eye opening and valuable. We learned how a software development team works. We had regular meetings discussing features and other elements of our app. We uses version control (Git) and actually became half-way comfortable using it. And for those of you that have never used Git, it is completely fantastic once you get the hang of it. It's tricky, but learning it will prove very valuable down the road as a developer. Trust me. 

The direction of the post seems to be flailing around a bit and as it has been sitting in draft form for better than a month let me wrap it up quickly so I can just hit the publish button.

Code Academy was a wonderful experience, plain and simple. The classroom work was great and I learned a lot from the great instructors, but where the real, serious value was was in the community surrounding us. That community of other students, mentors and just folks generally interested in what CA is doing were and continue to be so helpful. There are so many people that are willing and ready to help out, you just have to reach out to them. Students want to help other students. Mentors want to help students and even other mentors. It's such an open, giving community and I'm proud to say I'm a part of it and I wouldn't have gotten half of what I did from my time at Code Academy had I not cannon balled right into the deep end. 

Also, more on what I'm currently doing is coming up soon. I've gotten off the writing train a bit lately, but I'm committed to hopping back on very soon. Stay tuned.

Up to Speed with Sparrow

It's been a fairly busy last few months and one of the projects I've been working on durning that stretch has just launched this morning. Up to Speed with Sparrow, a screencast to help you learn to use the wonderful Sparrow Mail app for your Mac.

This is the first professionally recorded screencast that I have done and though it was certainly a learning experience, but I think Ryan and I came up with a pretty awesome final product. If you've never used Sparrow I urge you to check it out. It's an awesome email application and will change the way you manage your email. Bold statement, but it's true. And if you're a current user, there's a good chance you're not taking full advantage of all the cool features that can make your digital life a bit easier to manage. 

The idea was a branch off of the Mijingo Evernote screencast done by Brett Kelly from Evernote. I felt like there was a need to teach people how to use some of the basic applications they use everyday. I've found that even those that use an application regularly are often only taking advantage of about half of what the app is capable of doing. That's what this screencast is for. To help new users learn Sparrow and help those already using it to fully take advantage of what it can do.

And I'd like to thank Ryan Irelan for giving me a shot at this. Like I said, I am new to this world and without Ryan to make it look and sound great it wouldn't have been half the product it ended up being. Hat tip to you, Mr. Irelan.

I hope to continue on with other applications in this world and record some more screencasts so if you have a request for an app you'd really like to know more about don't hesitate to let me know.

Lastly, I'd be grateful if you'd check out the screencast and spread the word to those you think could benefit from it.

Reflection on a Hackathon

This past past weekend I participated in my first hackathon. I was a little apprehensive, but experience has told me that that feeling most often times leads to good things so I figured "what the hell?" and cannonballed into the deep end. This hackathon was put together by the folks at Code Academy which is where I'm in the middle of some design classes. So the apprehension was eased some as it was within the bubble with a group of people that were also new to these things. 

For those who aren't aware what a hackathon actually is, you're probably thinking we locked ourselves inside a room in the basement and began hacking into government systems. While that does sound pretty cool this had nothing to do with that sort of thing. This weekend was all about building web applications. We met as a large group Friday evening to discuss ideas and formulate teams around those ideas. It was a fairly social start and before long we had grouped ourselves together with the single focus of building a web application by 3pm Sunday. At that time we'd have to present what we made to the group.

My group seemed to form quite easily with a great mash-up of talents and expertises. We wanted to focus on something that felt attainable in this short amount. We also wanted to be able to apply techniques and things learned on future projects. And amazingly we were all on the same page with this stuff.

Our application wasn't the sexiest idea of the weekend, but we felt comfortable with it and dug right in. We wanted to build an online (and mobile) version of our student directory (currently produced in PDF form) so that it would be more useful for the students as they were making their way through Code Academy. A basic idea, but as we found out there is a fair amount going on in the background with something like this.

Friday evening we received a crash course on Github from Kevin Musiorski (a Code Academy alum himself) and created and cloned the initial Rails install (yep, we're using Ruby on Rails). I was the lone designer in my group so I let the others take control over the initial set up and configuration of the database and the core aspects of the Rails application. I decided that I wanted to dig into Twitter Bootstrap for this project and see how quickly I could get it figured out and make this thing look cool. This is really a perfect scenario for something like Bootstap so I dug in and started tearing it apart.  

We continued working on our application the entire next day. Our team ended up being very focused and even though we were working on separate things a lot of the time we communicated really well for being such a new group. It was very cool to feel how building an application in a team environment would work. We worked closely with Github to manage our code. This alone was insanely useful to see happening in a real life scenario. Github was always a little hazy to me and some things definitely clicked while we were pushing and pulling our code around during the weekend.

By Sunday morning I had worked up a responsive front-end for our application and it was time to start bringing things together. Now, we learned a ton of lessons during the weekend and one of them was to work on the front-end right within the application itself from the beginning. So after fighting through some issues on that front we we had a functioning and pretty decent looking application. 

By the time we were to shut down and congregate into the presentation space we were pretty much ready to go. We had a working (for the most part anyway) online/mobile Code Academy directory actually functioning and essentially usable. It was pretty freaking cool to see what we novices were able to complete in such a short amount of focused time. We presented and got some great feedback. This hackathon wasn't a contest as some are so the feedback was more constructive and two-way. We talked about what we had learned in general and got some great responses back from the panel.

We were successful in creating an MVP (minmum viable product) and because of the reception we received and how well we worked together we've decided to continue on with the project. We'll be rewriting things and have some great ideas for expanded functionality so keep your eyes peeled for the launch of a completed actual web application in the coming month or so (don't worry, I'll definitely be writing about it again once we're ready to go live).

Few of us knew what we were getting into with it being the first hackathon for most of us, but I can say that those three days were the most insightful three days of the Code Academy experience so far and probably from a learning perspective three of the most insightful days I've experienced in this field. It was an incredibly valuable learning experience and I can't encourage people trying to learn about web design and development to participate in things like this enough. The best way to learn this stuff is to do it and by having a group to work with and a set project and deadline in mind it is so much easier to get over that hump. I'll even go so far as to say that I'm way less apprehensive now about starting a project outside of a hackathon as well. It's proved a perfect jumpstart for the rest of this course and beyond.

Build a Simple Responsive Website Résumé Using Skeleton

Responsiveness is all the rage in web design these days and for good reason. Mobile device usage is skyrocketing and being able to customize your content presentation based on where it is viewed is a really powerful thing. Not to mention super beneficial to the actual end-user.

The cool thing is that in this awesome design community that we have there are frameworks and boilerplates popping up to help us accomplish this responsiveness much quicker. I came upon Skeleton a while back and finally got around to actually spending some time with it. This boilerplate includes some very basic styles and a solid responsive layout. It enables you to create a responsive site that looks great ridiculously fast. To show you just how quick this can work, let's build a solid looking, responsive résumé. It always helps to have one of those updated and live to the world on the Web right?

The first thing we need to do is download the latest version of Skeleton.

What we get is the workings of a basic site all ready for us to start cutting apart. You'll see the breakdown of exactly what you'll find on the download page above, but essentially you'll have a basic starting point with some example markup. For further explanation on all the pieces (and there really aren't that many) you can just check out the Skeleton website and see how all the components actually work.

We're going for a one page, barebones style here so we won't have any need for any Javascript so we can delete that folder. You can also then remove the Javascript file references at the bottom of the index.html page. 

    <!-- JS
    ================================================== -->
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="javascripts/tabs.js"></script>

I'm not planning on using an images here so I'm going to remove the images folder too. Once we've removed the files and folders that we don't need we're left with a very lean looking directory structure. That's perfect. Exactly what we're going for.

The file structure we're left with from the original Skeleton download.

The file structure we're left with from the original Skeleton download.

Like I said, I'm planning something super basic here so I'll remove everything from the current container in the index.html document and build my résumé using some very basic semantic elements. See my source below.

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>Matt Reich - Designer/Writer</title>
    <meta name="description" content="The online resume of Matt Reich">
    <meta name="author" content="Matt Reich">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="stylesheets/base.css">
    <link rel="stylesheet" href="stylesheets/skeleton.css">
    <link rel="stylesheet" href="stylesheets/layout.css">

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>

    <div class="container">
        <header class="four columns">
            <div>
            <h1>Matt Reich</h1>
            <h5>Designer/Writer</h5>
            <hr />
            </div>  

            <p>tel: 312-725-0019 <br />
            email: <a href="mailto:reich.matt@gmail.com?Subject=Hello%20again">reich.matt@gmail.com</a><br />
            website: <a href="http://mattreich.net">mattreich.net</a></p>
            <hr />  
                <ul>
                    <li><a href="http://mac.appstorm.net/author/mattreich/">Mac.Appstorm</a></li>
                    <li><a href="http://ipad.appstorm.net/author/mattreich/">iPad.Appstorm</a></li> 
                    <li><a href="http://iphone.appstorm.net/author/mattreich/">iPhone.Appstorm</li>
                    <li><a href="http://theindustry.cc/author/matt/">The Industry</a></li>
                    <li><a href="http://www.technori.com/author/mattreich/">Technori</a></li>
                </ul>
            
        </header>

        <article class="twelve columns">
            <h3>Profile</h3>
            <p>I had been employed as Network/Communications Technician at a mid-sized regional financial institution since completing my college degree in 2005 up until December 31st, 2011. Though this position and company were good to me, the further I got in that profession the more I realized I needed to make a substantial change.</p>

            <p>Always technologically savvy (hence the IT degree and job), I began to grow an interest in the Web and graphic arts fields a few years ago. A few classes later and a ton of self study, the interest has really grown into a full-on passion and through freelance projects and just a general curiosity I’ve expanded my knowledge greatly and continue down that path further each day. The Web world in general is incredibly interesting to me. There are so many different, continually evolving facets, so many possibilities, so many things undiscovered and unexplored. I think it is truly a fascinating space in which to work and study.</p>

            <p>Writing is a passion of mine. I try to write everyday, whether it be working on a new article, blog post, or just in a personal journal. I find it easier to work through thoughts and ideas via the written word and I also enjoy conveying ideas to others. I feel like I have a way with technical writing that is easily understandable, but not undermining all the while being as entertaining as technical writing can be. No matter my path, writing will always be a big part of my life.</p>

            <p>Above all, I love learning and doing things that stretch my mental, creative, and physical capacities.</p>
        
            <h3>Experience</h3>
            <h5>Communications/Network Technician, <a href="http://www.dacotahbank.com">Dacotah Bank</a> - Aberdeen, SD, 2003 - 2011</h5>
            <p>Dacotah Bank is a regional bank with locations across North and South Dakota. I began my employment as an intern while still going to school. That internship developed into a new position at the growing financial institution. My core responsibilities were supporting and maintaining IP phone and video conferencing systems for the entire company encompassing 30+ locations and 500+ employees. This included hardware and software maintenance and troubleshooting along with much daily customer interaction. Customer service was a large part of the daily workload. Writing documentation for the systems and applications which I supported was also a big aspect of the position. Documenting and organizing processes and procedures for all of our systems was a constant part of the job. As part of my position I was also in a rotation on our internal Service Desk working on and documenting any number of issues with our employees.</p>

            <p>As is evident, this position was quite broad and along with these things I also was regularly tasked with training internal staff on how to use our deployed software most effectively. This included everything from live classes to individual sessions to screencasts and written tutorials. This was a steady “additional task” throughout my time at Dacotah Bank and something I was always very comfortable taking on.</p>
        
            <h5>Freelance Writer - 2010 - present</h5>
            <p>I regularly write for the <a href="http://appstorm.net/">AppStorm</a> network on a variety of Mac, iPhone, and iPad software and related topics. These are most often technical reviews of applications on the OS X and iOS platforms. I enjoy technical writing very much and feel comfortable explaining complicated processes to those less technologically comfortable. I’ve also written feature articles for The Post SD which is an online magazine focused on the great stories of South Dakota. The site is currently on hiatus, but these pieces can be found on my website. I also have recently joined the writing teams at Technori (<a href"http://technori.com">technori.com</a>) and The Industry (<a href="http://theindustry.cc">theindustry.cc</a>) and will post for both online publications regularly. I also spend some time writing pieces for my <a href="http://mattreich.net">personal website</a> covering a variety of topics.</p>

            <h3>Education</h3>
            <p><h6><a href="http://northern.edu/Pages/index.aspx">Northern State University</a>, Aberdeen, SD - B.S. Management Information Systems</h6>
            <h6>Aberdeen Central HS, Aberdeen, SD - 2001</h6></p>

            <h3>Skills</h3>
            <h5>HTML/CSS/PHP/Javascript</h5>
            <p>A working, ever growing knowledge of HTML and CSS. I’m not an expert nor am I a newbie. Coding a basic blog from scratch and implementing ExpressionEngine would take me half a day. I have at least working knowledge and I am expanding almost constantly. I would also point out that I also have a general, and ever expanding knowledge of PHP and Javascript as well. In this area I’ve just taken on and learned things as I needed for any given project. I spend a lot of time exploring and educating myself in these technologies as well. In general, I love to learn and I’m devoted to a constant improvement in these and related technologies.</p>

            <h5>Technical Writing</h5>
            <p>I’ve written proposals and technical training documentation for web projects and in several other areas through my work with freelance web work and also my employment at Dacotah Bank. I’ve also written many software reviews along with technology-related articles on various topics. I feel comfortable writing about technical subjects in an interesting and entertaining prose that everyone can understand.</p>

            <h5>Writing</h5>
            <p>Writing in a general sense. I’ve written many articles covering many different topics. From reviews to essays to interviews. I’m the type of person that writes an essay to myself when I’m trying to think through something in my life. I just flat out enjoy writing and I find it an enormously beneficial skill and make an effort to write essentially every day.</p>

            <h5>Project Management</h5>
            <p>Some project management experience through my employment at Dacotah Bank with various projects large and small. Also, some experience with freelance web projects through 605 Media.</p>

            <h3>Other</h3>
            <p><h6>Aberdeen Area Chamber of Commerce Diplomat Committee 2007 - 2011</h6>
            <h6>Safe Harbor Foundation Board Member 2009 - 2012</h6></p>

        </article>

    </div><!-- container -->

<!-- End Document
================================================== -->
</body>
</html>

I essentially just translated the information on my current PDF version résumé to HTML form. It's basic, but it gets the job done. You'll notice that I'm using a simple two-column layout. This is super easy to achieve and requires a couple classes. First, we'll apply the classes .four and .columns to our <header> element. This simply assigns a width of four of the sixteen available columns for this element.

Next, we apply the .twelve and .columns class to the <article>. Same story. We're using the remaining twelve columns of the sixteen available to display the <article> content. The cool thing about all of this is that we don't even have to mess with any of the layout elements. We achieved a two column layout simply by using the pre-built classes of Skeleton. And on top of that I didn't even touch the CSS. 

And here's what we're left with. First, the standard desktop browser width.

And here's what it looks like with the browser sized down. There is just one breakpoint built right in and as you're resizing the window you'll notice all the content shift into one column with the most important stuff at the top. 

There you have it. A little dabbling in the CSS can give you a completely customized look should you choose to go so far. And being that this first part was so easy I think you really should take a little time to make some customizations yourself. Make it your own. The Skeleton boilerplate is pretty darn easy to use so just play around and see what you can come up with. Now go pick up a domain name and some hosting space and load this project to your sever. Then you'll be all ready to show off how tech savvy you really are. 

An Easy Method to Clearing a Float

Floating is a way for us to use CSS to move elements on a page either to the far left or the far right. This capability comes in really handy when laying out a page. There are a couple things that are easy to get tripped up on (at least for me) so I'll see if I can help you to slide right by those so you don't endure as much pain as I did.

We'll make up a little problem that applies to many different situations. Here's the markup for our example. You'll see some empty divs that we're going to be using for sized boxes.

<article class="container">
            <div class="blue"></div>

            <div class="green"></div>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <section>
                <div class="orange">
                    <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
                </div> <!-- end orange -->

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>

        </article>

And here's some basic CSS. Nothing too fancy here. We're giving our Div boxes defined widths (they can't be floated otherwise) and then floating them. We're also coloring our boxes so that we can more easily tell what we're looking at in this example.

body {
    background: gray;
}

p {
    padding: 0 20px 10px 20px;
}

.container {
    width: 880px;
    margin: 0 auto;
    background: white;
}

.blue {
    background: blue;
    height: 200px;
    width: 400px;
    margin: 20px;
    float: left;
}

.green {
    background: green;
    height: 200px;
    width: 400px;
    margin: 20px;
    float: left;
}

.orange {
    height: 200px;
    width: 200px;
    margin: 20px;
    border: 5px solid orange;
    float: right;
}

And here is what we'll see when the page is rendered in a browser (Chrome in this case):

So the problem that we're dealing with is that the white background of our container Div is not encompassing all the elements on the page as you would expect given the markup. This is a textbook example of a float not clearing all the elements it needs to.  

Adding a clear: both element to a class is one method to accomplish a clear, but in this situation it won't work as the element we're trying to clear is a <p>. The easiest method to clearing this float (and a pretty solid option in a lot of situations) is to create a .clear class in your CSS and apply the property of clear: both to it.

.clear {
    clear: both;
}

Then add in an empty Div after the <p> we want to clear.

            .
            .
            .
            <section>
                <aside class="orange">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco.</p>
                </aside>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <div class="clear"></div>
                
            </section>
            .
            .
            .

And that's all there is to it. Now the page returns to normal flow after the <p> and we're left with the result we wanted.

This is probably not the world's greatest example and I'm certainly not the world's creates frontend developer, but this was one area where I got hung up steadily and this was the specific example that I was able to figure this whole clearing of floats thing out. Copy the code and create your own testing environment and just play with the boxes and floating and clearing. Actually messing with the code is by far the best way to figure these things out.

And for further reading I would highly recommend Shay Howe's Beginner's Guide to HTML & CSS.

Code Academy: Adding to the Knowledge

We're through week three here at Code Academy and so far it's been a great experience. The last week or so, I will say, it feels like things are really starting to cook. The HTML/CSS class is very beginner and overlaps on a lot of the things I already understand, but as I was expecting I'm starting to pickup better ways to do things or even one step back, even better ways to understand things.

The first real hit of this came this week when we were discussing the box model and positioning. It's a tricky concept and I'm guessing even seasoned veterans still get tripped up once in a while. While I do understand layouts and positioning using the box model and floats it was extremely beneficial to hear it come from another person. And even better than that, I found it incredibly beneficial to actually play around in class where I could ask specific questions of our instructor, Shay. Overall, this class session was by far the most beneficial to me thus far and I'd say that my comfort level with these concepts is in a much better place. 

At one point in the discussion when Shay was discussing floats and the concept of clearing a float he used the term "reseting the flow". I have no idea why, but for some reason that resonated with me. I felt gears catching in my head. He most definitely is not the first person to refer to clearing a float in that manner, but for whatever reason the timing was right for it to connect all sorts of loose ends in my head. I know it's been published all over the place already, but I'll do a post here about clearing floats later this week. 

The first couple weeks of the HTML/CSS course did have me worried a bit in that we were covering very basic stuff which I didn't have any trouble with, but this week reassured me that there are still things to learn even with concepts I think I already understand.

Link: Adobe & HTML: Adobe Shares What They’re Working On

On Monday, Adobe introduced its Adobe & HTML website. What is this you ask? Adobe wanted to create a space where they could share what they’ve been working on within the community. Adobe is championing a fair amount of work with their HTML5 and CSS3 projects, and this is the place where you can keep up with what’s happening with this work.

I Don't Think I'm Full of Enough Shit

I've been in Chicago for about four months now (wow, I didn't realize it had been that long until I wrote it) and I've been steadily working on a few things. I've been working on my writing by just doing more of it in more places. I've been working on getting more connected with the Chicago web development and design community. Combined with that I've been constantly working on my web development and design skills and found myself feeling the need for some additional instruction and mentorship and ended up at Code Academy. As part of these last two items I've been attending some Meetups in Chicago focused on the various skills I'm trying to better myself at and areas in which I'd like to meet some people.

Two days ago I attended a Meetup of the group called Refresh Chicago which is a group that essentially encompasses all of my current interests and aspirations. And as an added bonus one of my instructors at Code Academy, Shay Howe, is a co-organizer. The topic for this month was UX and Russ Unger presented. Russ is an expert in the field and spoke about the field of UX in general and the current state of it. 

A point came up during his talk that really struck a cord and got me thinking. He talked about the need for a "fake it till you make it" mentality. This is no new idea, but one that I've realized I'm no good at. The reality is, as I'm coming to see,  that I am way more capable and knowledgeable than I give myself credit for. I end up getting hung up on some of the things I'm shaky on and letting that dictate how I present myself and even the type of work I try to go after. "Well, that description is asking for some .Net experience and I have none therefore I need to be smarter for that job." That's my mentality and that as it turns out, isn't all that helpful. By going down this path the feelings of inadequacy will never end.   

In this field being full of shit to some extent appears to be more than common. It's really a necessity. I think a lot of the people that are hiring in this category aren't completely sure what the hell they're even after (just look at some job descriptions for a web developer). Folks that are working in the web world are by and large capable in multiple areas, and more importantly, very interested in learning new things. Being a web designer or web developer or UX designer can be really broad titles will all sorts of varying expertises. It's just impossible to know everything that seems like is required. I'm realizing I'm not the only one seeing this and it would have been really nice if one of you would have told me about this sooner (jerks...actually, you're all pretty nice). 

The professions in the web industry are all so young and are still being figured out by everyone. Roles just aren't clearly defined and a lot of the time different skill sets blend together or separate depending on the job. Being at least a little full of shit is just part of the current state of affairs. Or maybe it's just part of life in general. Ok, that's a little too deep. We'll leave that one for another day.

Link: dConstruct 2012: Playing With The Future

The dConstruct conference for 2012 has been announced. The event will take place on September 7th in Brigthon, UK at the Brighton Dome. It is also preceded by two days of hands-on workshops that will be hosted at Lighthouse venue. This conference is geared toward web designers and developers, but has grown to encompass a much wider audience since its inception.

Link: Field Notes: The National Crop Edition, Coming Soon

If you’re on the Field Notes email newsletter, you’re probably already aware that their Spring collection has been released. This release is the fourteenth special edition and has been dubbed “The National Crop Edition.” As you would expect from these folks, they look look amazing and are certainly well worth checking out. This just goes to show that design isn’t only a web-based or Photoshop thing. Rather, it extends far beyond the digital screen to the paper – where it originated.