I have a couple of events lined up for August. If you're in the area, be sure to stop by.
Wednesday, August 13, 2014
vNext OC
Newport Beach, CA
Meetup Event
Topic: Learn to Love Lambdas
I've been talking about lambda expressions for a long time. And they are really cool. A lot of folks have trouble getting over the syntax hurdle. We'll take things step-by-step and see that they are really easy to use once we get over that initial hurdle. And we'll see how lambda expressions can help us introduce functional programming concepts into our C# code. Lots of cool stuff.
Thursday, August 21, 2014
Central California .NET User Group
Fresno, CA
Meetup Event
Topic: Dependency Injection: A Practical Introduction
Dependency Injection is another of my favorite topics. The problem is that most developers are introduced to DI with a DI container. DI containers are extremely useful, but they hide a lot of the functionality. We'll take a look at DI concepts without a container so that we can really see the benefits of loose coupling in our code. Once we've got that down, we'll use a DI container and get all of the additional benefits -- but the containers will no longer seem like magic.
I'm excited to be going to the Central California .NET User Group since I've never been there before. I love going to new groups, meeting new people, and seeing what developers are doing in different places. If you'd like me to come out to your group, just drop me a line or request me through INETA.
Looking Ahead: September & October 2014
Dev Sharpener Workshop - Hollywood, CA
Las Vegas Code Camp - Las Vegas, NV
Silicon Valley Code Camp - Los Altos Hills, CA
Desert Code Camp - Chandler, AZ
Hope to see you at an upcoming event.
Happy Coding!
Wednesday, July 30, 2014
Tuesday, July 22, 2014
Advice for New Developers (and Experienced Developers)
I've had several developers contact me recently asking for advice on getting into a development career and how best to learn about programming. I'm not sure that I'm the best person to ask since I sort of lucked into my career and got great mentoring and training as a junior developer, but here are my thoughts.
Not Just New Developers
Before we dive into this, I want to point out that this advice does not apply only to new developers. Our industry is constantly changing, which means that we need to be constantly learning. And experienced developers need to figure out new technologies and where we want to concentrate our efforts. So we get to keep going through this process every few years (or less).
Find What You Love
The first thing to do is figure out what technologies you need to learn. Something that we need to realize is that we can't learn everything. If you try to do everything, then you'll eventually find that you're competent in nothing. It's best to concentrate on one or two key areas where you can build a strong understanding, and then get a peripheral understanding of other technologies that are available in that environment.
Pick an environment or technology that you love. This is something that took me a long time to learn. Life is short, and work takes up a big part of that time. Do not do something that will make you miserable. There was a time in my career where I dreaded getting out of bed in the morning just thinking about all the things that I had to do. It's totally not worth it.
Finding what you love may be based on a particular industry. Maybe you want to be in entertainment or finance or medical devices. If this is the case, then investigate the companies that are working in that industry. Find out what technologies they use. Most industries gravitate toward similar technologies. For example, functional programming is big in the finance industry; embedded programming is big in the medical device industry. If you are working in an industry that you are passionate about, then you'll want to be productive and motivated to learn the necessary technologies.
Finding what you love may be based on a particular technology. Maybe you find that you love to tinker with Raspberry Pi devices; maybe you like to understand how humans work and want to make user interaction experiences better. At the same time, check to see how the technologies are used in the real world. We have to be practical. It may be that our favorite technology does not have many career prospects. But we can usually find something similar that is widely used in some industry.
I'm going through this now. I really love XAML and WPF, and even though it's a viable (and awesome) technology, it seems to be starting to decline (at least in the desktop world). There are times when I feel like I should be diving into JavaScript and the plethora of libraries, but that does not make me very happy for a variety of reasons.
Conversely, I've been exploring functional programming through different languages, and that has me much more interested. I've found that I've been using functional concepts without realizing it, so this seems like a more natural fit for me.
Find How You Learn Best
As humans, we learn in different ways. Some people learn best from books, some from videos, some from working with a mentor, some through formal training, some through reading the documentation, some through labs, and some through tinkering around.
Try a couple different learning techniques, and find which one works for you. Not everyone learns the same way. So, try a couple different techniques. I've found that I learn best through books. It lets me easily go back to previous topics, re-read sections, pause and concentrate on a particular topic. When I watch video, my mind tends to wander or I find that I want to open up an IDE and try some stuff out. So I usually find myself re-playing parts of a video over and over. (I say "re-playing" rather than "re-watching" because I really wasn't watching it the first time.)
But that's just me. Explore and find what works for you.
Get Involved
The best thing we can do is talk to other developers, especially when we're exploring new technologies. Find someone who's been working with the technology in the real world. You can get some great advice from that person: what works, what doesn't work, the things that are awesome, the "gotchas" that you have to work around. Talk to other people.
Get involved with a local user group (or several user groups). This has been a huge eye-opener for me. I was pretty late to the game; I've only been involved in the developer community for about 4-1/2 years. Before that, my developer interaction was limited to the people that I worked with. I was fortunate to work with some really good people, but I was missing out on a much, much broader community.
What I've found is that developers love to talk to other people, but (stereotypically) we don't want to *start* the conversation. If you're new to a group or are with a bunch of developers you don't know, just go up and introduce yourself to someone. Ask about what that developer does, and you'll find that a conversation gets started. And usually, other people will come over to join the conversation. I've seen this happen many times; I just had to be brave enough to get the conversation started.
If you don't have a user group in your area, start one. It might just be putting something on MeetUp to have coffee with a couple other developers. And it doesn't matter if you're working with the same technologies are not. Just start talking to other people.
In addition to getting advice on technologies, you'll also build relationships. Over time, you get to know a variety of developers and they get to know you. When you're looking for work, this is invaluable. After being involved in the developer community for a few years, I found myself looking for a new job. I was amazed at how many job prospects I got through people that I knew in the community. Not all of these prospects will work out, but you only need one job (hopefully).
Wrap Up
As developers, our industry is constantly changing. That means we need to be constantly looking at new technologies and we need to be constantly learning.
It is a challenge, but it is also exciting. We get to do new things all the time. We get to discover new ways to meet the needs of our business and users. We get to create on a daily basis. We get to keep learning. That's a pretty awesome job to have.
Happy Coding!
Not Just New Developers
Before we dive into this, I want to point out that this advice does not apply only to new developers. Our industry is constantly changing, which means that we need to be constantly learning. And experienced developers need to figure out new technologies and where we want to concentrate our efforts. So we get to keep going through this process every few years (or less).
Find What You Love
The first thing to do is figure out what technologies you need to learn. Something that we need to realize is that we can't learn everything. If you try to do everything, then you'll eventually find that you're competent in nothing. It's best to concentrate on one or two key areas where you can build a strong understanding, and then get a peripheral understanding of other technologies that are available in that environment.
Pick an environment or technology that you love. This is something that took me a long time to learn. Life is short, and work takes up a big part of that time. Do not do something that will make you miserable. There was a time in my career where I dreaded getting out of bed in the morning just thinking about all the things that I had to do. It's totally not worth it.
Finding what you love may be based on a particular industry. Maybe you want to be in entertainment or finance or medical devices. If this is the case, then investigate the companies that are working in that industry. Find out what technologies they use. Most industries gravitate toward similar technologies. For example, functional programming is big in the finance industry; embedded programming is big in the medical device industry. If you are working in an industry that you are passionate about, then you'll want to be productive and motivated to learn the necessary technologies.
Finding what you love may be based on a particular technology. Maybe you find that you love to tinker with Raspberry Pi devices; maybe you like to understand how humans work and want to make user interaction experiences better. At the same time, check to see how the technologies are used in the real world. We have to be practical. It may be that our favorite technology does not have many career prospects. But we can usually find something similar that is widely used in some industry.
I'm going through this now. I really love XAML and WPF, and even though it's a viable (and awesome) technology, it seems to be starting to decline (at least in the desktop world). There are times when I feel like I should be diving into JavaScript and the plethora of libraries, but that does not make me very happy for a variety of reasons.
Conversely, I've been exploring functional programming through different languages, and that has me much more interested. I've found that I've been using functional concepts without realizing it, so this seems like a more natural fit for me.
Find How You Learn Best
As humans, we learn in different ways. Some people learn best from books, some from videos, some from working with a mentor, some through formal training, some through reading the documentation, some through labs, and some through tinkering around.
Try a couple different learning techniques, and find which one works for you. Not everyone learns the same way. So, try a couple different techniques. I've found that I learn best through books. It lets me easily go back to previous topics, re-read sections, pause and concentrate on a particular topic. When I watch video, my mind tends to wander or I find that I want to open up an IDE and try some stuff out. So I usually find myself re-playing parts of a video over and over. (I say "re-playing" rather than "re-watching" because I really wasn't watching it the first time.)
But that's just me. Explore and find what works for you.
Get Involved
The best thing we can do is talk to other developers, especially when we're exploring new technologies. Find someone who's been working with the technology in the real world. You can get some great advice from that person: what works, what doesn't work, the things that are awesome, the "gotchas" that you have to work around. Talk to other people.
Get involved with a local user group (or several user groups). This has been a huge eye-opener for me. I was pretty late to the game; I've only been involved in the developer community for about 4-1/2 years. Before that, my developer interaction was limited to the people that I worked with. I was fortunate to work with some really good people, but I was missing out on a much, much broader community.
What I've found is that developers love to talk to other people, but (stereotypically) we don't want to *start* the conversation. If you're new to a group or are with a bunch of developers you don't know, just go up and introduce yourself to someone. Ask about what that developer does, and you'll find that a conversation gets started. And usually, other people will come over to join the conversation. I've seen this happen many times; I just had to be brave enough to get the conversation started.
If you don't have a user group in your area, start one. It might just be putting something on MeetUp to have coffee with a couple other developers. And it doesn't matter if you're working with the same technologies are not. Just start talking to other people.
In addition to getting advice on technologies, you'll also build relationships. Over time, you get to know a variety of developers and they get to know you. When you're looking for work, this is invaluable. After being involved in the developer community for a few years, I found myself looking for a new job. I was amazed at how many job prospects I got through people that I knew in the community. Not all of these prospects will work out, but you only need one job (hopefully).
Wrap Up
As developers, our industry is constantly changing. That means we need to be constantly looking at new technologies and we need to be constantly learning.
It is a challenge, but it is also exciting. We get to do new things all the time. We get to discover new ways to meet the needs of our business and users. We get to create on a daily basis. We get to keep learning. That's a pretty awesome job to have.
Happy Coding!
Tuesday, July 15, 2014
My Learning Debt
I learn best through books. But that leads me to a problem. I like to read books all the way through, which takes a bit of time -- especially when I'm following along in code and experimenting.
What that means is that I usually collect books faster than I can read them. And the one that I pull off the heap will depend on my current focus, so some books stay on the unread list for years. I just pulled out my collection of unread books to see what's there. Some of them I've had for quite some time.
Here's a picture:
And the list (in no particular order):
Some of these have to do with areas I've been thinking about. For example, I have Hello World! not because I want to learn Python but because I'm interested in how people present programming topics to folks who have never programmed before. I've been interested in getting into this space (teaching new programmers) and have been looking through various resources on this.
And some of them are updates -- for example, I've read the first edition of The Art of Unit Testing, and I've flipped through the second edition and some of the updates look interesting to me.
I'd really like to just shove all of these books into my brain. But it takes time to really study and learn stuff. Different people learn different ways, and books work well for me.
Now, I need to decide where I'm going next. If you have ideas or suggestions, feel free to leave them in the comments.
Happy Coding!
What that means is that I usually collect books faster than I can read them. And the one that I pull off the heap will depend on my current focus, so some books stay on the unread list for years. I just pulled out my collection of unread books to see what's there. Some of them I've had for quite some time.
Here's a picture:
And the list (in no particular order):
- Hacker's Delight - Henry S. Warren, Jr.
- Refactoring to Patterns - Joshua Kerievsky
- Peopleware: Productive Projects and Teams - Tom DeMarco & Timothy Lister
- 100 Things Every Designer Needs to Know About People - Susan M. Weinshchenk, Ph.D.
- Seven Languages in Seven Weeks - Bruce A. Tate
- Hello World! Computer Programming for Kids and Other Beginners - Warren and Carter Sande
- The Little Schemer - Daniel P. Friedman and Matthias Felleisen
- The Art of Lean Software Development - Curt Hibbs, Steve Jewett & Mike Sullivan
- The Art of Unit Testing - Roy Osherove
- C# In Depth - Jon Skeet
- JavaScript and jQuery: The Missing Manual - David Sawyer McFarland
- Head First HTML5 Programming - Eric Freeman & Elisabeth Robson
- Refactoring: Improving the Design of Existing Code - Martin Fowler
Some of these have to do with areas I've been thinking about. For example, I have Hello World! not because I want to learn Python but because I'm interested in how people present programming topics to folks who have never programmed before. I've been interested in getting into this space (teaching new programmers) and have been looking through various resources on this.
And some of them are updates -- for example, I've read the first edition of The Art of Unit Testing, and I've flipped through the second edition and some of the updates look interesting to me.
I'd really like to just shove all of these books into my brain. But it takes time to really study and learn stuff. Different people learn different ways, and books work well for me.
Now, I need to decide where I'm going next. If you have ideas or suggestions, feel free to leave them in the comments.
Happy Coding!
Monday, July 14, 2014
July 2014 Speaking Engagements
I've had a late addition to my speaking calendar (yes, it's for tomorrow).
Tuesday, July 15, 2014
San Diego .NET User Group - UI Developer SIG
MeetUp Link
Topic: Clean Code: Homicidal Maniacs Read Code, Too!
Clean Code is one of my favorite things to talk about with other developers. We all have different definitions for what we consider "clean". And what's "clean" varies depending on the environment. In the presentation, we'll look at several practical tips to make our code easier to read, maintain, extend, and test. And we'll spend quite a bit of time in code doing some practical refactoring.
Hope to see you there.
Happy Coding!
Tuesday, July 15, 2014
San Diego .NET User Group - UI Developer SIG
MeetUp Link
Topic: Clean Code: Homicidal Maniacs Read Code, Too!
Clean Code is one of my favorite things to talk about with other developers. We all have different definitions for what we consider "clean". And what's "clean" varies depending on the environment. In the presentation, we'll look at several practical tips to make our code easier to read, maintain, extend, and test. And we'll spend quite a bit of time in code doing some practical refactoring.
Hope to see you there.
Happy Coding!
Sunday, July 13, 2014
New Video: Nested Generics
Part 4 of the C# Generics video series is now available: C# Generics - Part 4: Nested Generics. This time we take the generic interface (from Part 2) and combine it with our generic factory method (from Part 3). The result is a nested generic. The syntax looks a bit strange, but it's not difficult to understand when we break it into its component parts.
The series will continue with an upcoming video on generic constraints and the "default" keyword.
C# Generics (Playlist)
Happy Coding!
The series will continue with an upcoming video on generic constraints and the "default" keyword.
C# Generics (Playlist)
Happy Coding!
Wednesday, June 25, 2014
Jeremy on .NET Rocks! (at least for a little bit)
Okay, so last time I said Jeremy was on .NET Rocks!, Richard just read an email that I sent in. This time, I'm actually on the show (at least for a little bit). For .NET Rocks! #1000, Carl and Richard asked folks to tell them how the show had impacted their career. I sent in my story, and they were nice enough to give me a few minutes to tell my story on the show. You can hear me around the 16:30 mark.
I've been telling folks for a long time how a particular episode gave me the kick in the butt that I needed to get started as a speaker. And after that first time out, I was totally hooked. If you don't believe me, check this article that I wrote in 2011: Meet the Next Code Camp Speaker: You!
I took that first step and spoke at the So Cal Code Camp in January 2010. Since then, I've given over 120 presentations. And I'll keep speaking as long as people keep coming to see me. I love to teach, and I love to watch people learn.
Lots of great things have happened along the way. Microsoft recognized me with an MVP award for Visual C# (2 years so far). I got involved with Pluralsight and produced 6 courses (with more on the way). I've met tons of great people (many of whom I now consider friends), and I've received email from developers around the world.
A Funny Story From the Early Days
Getting started as a speaker isn't easy. You can't just sit around and wait for people to ask you. After my first Code Camp, I was looking for user groups and other places to speak. I was attending my local user group (in Southern California), and the speaker that night ran another group in the area.
During the break, I went up to him and asked if I could get on the speaking calendar for his group. He didn't seem very excited about it, and I can't really blame him -- he didn't know anything about me. But he was nice enough to put me on the calendar 6 months out.
About 3 months later, I was at the Desert Code Camp in Chandler, Arizona. I'd done 3 talks that day, and they had all gone well. At the attendee dinner that night, the user group leader was there, and he had attended one of my presentations. He said, "You're from Southern California, right? Would you be interested in speaking at my group sometime?"
A bit sheepishly, I said, "I'm already on your schedule." And I reminded him that we had met a few months earlier.
So, at first I felt a bit pushy, but then I was invited to speak. That made me feel a lot better.
Try It At Least Once
And if you're interested in speaking, just get started. Code Camps are generally easy to sign up for, and most of them like to give new speakers an opportunity to show their stuff. And if you like it, just talk to people. Now I know most of the user group leaders in my area (and several from outside my area), and it's pretty easy for me to get on someone's schedule. I'm still trying to break into the conference world, but I'm well on my way.
I think that every developer should try it at least once. We all have unique experiences to share with the developer community. And if you find that it's not your thing, at least you tried. But if you do find out you like it, then you might find yourself on an amazing journey.
Happy Coding!
I've been telling folks for a long time how a particular episode gave me the kick in the butt that I needed to get started as a speaker. And after that first time out, I was totally hooked. If you don't believe me, check this article that I wrote in 2011: Meet the Next Code Camp Speaker: You!
I took that first step and spoke at the So Cal Code Camp in January 2010. Since then, I've given over 120 presentations. And I'll keep speaking as long as people keep coming to see me. I love to teach, and I love to watch people learn.
Lots of great things have happened along the way. Microsoft recognized me with an MVP award for Visual C# (2 years so far). I got involved with Pluralsight and produced 6 courses (with more on the way). I've met tons of great people (many of whom I now consider friends), and I've received email from developers around the world.
A Funny Story From the Early Days
Getting started as a speaker isn't easy. You can't just sit around and wait for people to ask you. After my first Code Camp, I was looking for user groups and other places to speak. I was attending my local user group (in Southern California), and the speaker that night ran another group in the area.
During the break, I went up to him and asked if I could get on the speaking calendar for his group. He didn't seem very excited about it, and I can't really blame him -- he didn't know anything about me. But he was nice enough to put me on the calendar 6 months out.
About 3 months later, I was at the Desert Code Camp in Chandler, Arizona. I'd done 3 talks that day, and they had all gone well. At the attendee dinner that night, the user group leader was there, and he had attended one of my presentations. He said, "You're from Southern California, right? Would you be interested in speaking at my group sometime?"
A bit sheepishly, I said, "I'm already on your schedule." And I reminded him that we had met a few months earlier.
So, at first I felt a bit pushy, but then I was invited to speak. That made me feel a lot better.
Try It At Least Once
And if you're interested in speaking, just get started. Code Camps are generally easy to sign up for, and most of them like to give new speakers an opportunity to show their stuff. And if you like it, just talk to people. Now I know most of the user group leaders in my area (and several from outside my area), and it's pretty easy for me to get on someone's schedule. I'm still trying to break into the conference world, but I'm well on my way.
I think that every developer should try it at least once. We all have unique experiences to share with the developer community. And if you find that it's not your thing, at least you tried. But if you do find out you like it, then you might find yourself on an amazing journey.
Happy Coding!
Sunday, June 22, 2014
Coding Practice: Displaying Bitmaps from Pixel Data
I'm not sure what you do when you wake up early and can't get back to sleep. For some reason, I decided to read about machine learning, and I ended up somewhere I didn't expect.
I went from this:
To building an application that does this:
Along the way, I watched the trial-and-error approach I took to solve a problem. So, here it is with the mistakes (and still not quite good code) and the working solution.
You can download the completed code here: http://www.jeremybytes.com/downloads.aspx#CPDB.
[Update: 7/11/2015: Project has been uploaded to GitHub: https://github.com/jeremybytes/digit-display]
[Update 06/27/2016: This project has been expanded beyond what's shown in this article. To see the code here, check the "DigitDisplay" branch on GitHub: jeremybytes/digit-display Branch DigitDisplay.]
How I Got There
So, I started by running a search for articles on machine learning with F#. And I came across lots of links from my friend Mathias Brandewinder (http://www.clear-lines.com/blog/). I guess I'll really have to attend one of his machine learning workshops the next time we're both in the same place.
After bouncing through a few links, I ended up looking at a Kaggle competition (https://www.kaggle.com/c/digit-recognizer/data). The challenge is to build a system that can recognize hand-written digits. Now, I knew that I was not up to that challenge (complex algorithms are something I need to work up to). But I looked at the sample data files, and I got a bit intrigued.
The sample data was in .csv format. And it was basically a comma-separated collection of values between 0 and 255 that represented the darkness of a pixel. The data sets were there to help you train and test your system. But I thought it might be interesting to try to display the images in an application.
Here's what a record looks like:
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,188,255,94,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,191,250,253,93,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,123,248,253,167,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,80,247,253,208,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,29,207,253,235,77,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,54,209,253,253,88,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,93,254,253,238,170,17,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,23,210,254,253,159,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,16,209,253,254,240,81,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,27,253,253,254,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,206,254,254,198,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,168,253,253,196,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,203,253,248,76,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,22,188,253,245,93,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,103,253,253,191,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,89,240,253,195,25,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,15,220,253,253,80,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,94,253,253,253,94,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,89,251,253,250,131,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,214,218,95,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
For the training data, the first value (1 in this case) is the number represented by the data. Then there are 784 values that represent a 28 by 28 pixel bitmap. And there were lots of records in the file.
Step 1: Build a Parser
I created my WPF shell application, and then created a library to handle loading the file and parsing the strings into integer arrays and turning the arrays into bitmaps.
I knew I could parse the file pretty easily; I've done that lots of times before. But I wasn't quite as sure about turning a big string of characters into a bitmap. So, that's where I started.
Here was my first shot at it:
I started by splitting the CSV string into an array. But this is an array of strings; I needed integers. So, I looped through the strings and parsed them into integers. Note that I don't have any error handling here. If there is bad data, this whole thing will blow up. But the dataset I was working with was "clean", so I didn't worry about it. Then I took the flat integer array and parsed it into a 28x28 array.
But I wasn't at all sure that I got this right. In fact, I'm famous for being "off by one". Since I knew that I was still a long way off from creating a bitmap, I figured it would be best to create some unit tests to at least make sure that I'm parsing the array correctly.
This was a bit tedious because I had to take my sample input (just part of it here):
And turn it into 28 arrays of 28 elements each (what my expected output was):
This was a lot of counting, copying, and pasting. But I eventually got the data set up.
After that, the tests were pretty easy (there are 2 other tests that have the other "chunks" of arrays):
And what I found is that I was off by one. In the code that sets the "pixelIndex", I was subtracting one (to account for the first value that I wanted to discard). Instead, I should have been adding one. Here's the corrected code:
Since I knew that my 28 x 28 array was correct, I moved on to creating the bitmap image. As a side note, my unit testing pretty much stopped here. The rest of the code deals with images -- and even better, I had no idea what these images were supposed to look like (as we'll see). So, I didn't have much that I could test.
Step 2: Creating the Bitmap
I now had an integer array that I could work with: int[28,28]. This represented the pixels that I needed to create the bitmap. Here was my first stab at that:
I'm not a big fan of nested "for" statements. But I was just trying to get the job done here. I used this to copy the values from the arrays into the pixels from the bitmap image. Since these are grayscale, I applied the value to the RGB values. So if the value was 238, I would get an RGB value of "238, 238, 238".
I really didn't know if this code was right or not. I needed to display this somehow to find out. But first, I had to load the data.
Step 3: Parse the File
I created another class that would load the data from the CSV file. I just created a static method that would parse the file and generate an array of strings (that I could then pass to the methods I already created).
This checks the config file for the file name, and then looks for the file in the same folder as the executable. Then it just loops through the file and creates an array of strings where each string represents a separate bitmap/digit.
There's a note that we're skipping the first line. That's because the training file (the one I'm using here) has a header row that enumerates the columns.
Now it was time to start putting things together.
Step 4: Displaying a Bitmap
I flipped over to my WPF application, added an <Image> element to the markup, and then flipped to the code behind to populate that image.
I was doing pretty good for a while...
But now what? There's no way to directly assign as System.Drawing.Bitmap (the type that I had) to a WPF Image control.
Fortunately, the developer's friend, StackOverflow, had my solution: http://stackoverflow.com/a/6775114. So, I created a static class for this code and completed the method.
Now it was time for the moment of truth -- running the application:
At least I got an image. But it doesn't look quite right. Time to read the instructions (from the Kaggle site):
And see how that looks:
Much better. And I know from looking at the data, that this should be a number "1".
Step 5: Displaying All the Digits
So, I successfully parsed and displayed a single digit image. Next it was time to try to display a lot of them. I swapped out my <Image> for a <ListBox> and then created the image items to put into the list in code:
This just get the first 10 items, loops through them, and generates bitmaps. Then it creates WPF Image controls for each one and puts it into the ListBox. Here's the output:
Not quite what I wanted. It needs some size constraints:
I set the height and width to 28 since that matched the pixel dimensions. The output was much better:
So, I increased to 100 items:
Then 1000:
And this is where I start to look at the data. Something's not right.
Step 6: Fixing the Image
These numbers don't look quite right. It almost looks like some of them are upside down and some of them are backwards. I thought at first that this might have been intentional. But after staring at it for a bit more, I knew things weren't right on my end.
This probably had something to do with the X-Y coordinate system. Some systems use the top left corner as 0,0. Some systems use the bottom left corner as 0,0. Instead of trying to change my arrays, I figured it would be easier to manipulate the bitmap after it's created. So, I played around a bit with the "RotateFlip" method until I found a setting that worked:
That seems to take care of things:
Much better.
Step 7: Final Image Fix
There was one last thing that bothered me. The digits looked blurry. It made sense that they would be blurry when they were stretched out (like in the initial display), but they should be at the native sizes now.
Or should they?
That's when I remembered how WPF worked. When you set the height and width of controls, you don't actually set pixel sizes; you set device-independent units. This is so that WPF can scale appropriately on different DPI devices. As a side note, I really appreciate the scaling now that I'm using a high-resolution display.
Instead of setting the height and width to "28", let's set them to the size of the image itself:
This gives us more digits per line (they are a bit smaller). But none of them are blurry now.
You can click on the image to see the full-resolution version.
Step 8: Functional Style
Since I started out this experiment looking for functional programming ideas, I figured it would be good to incorporate a few in the application.
I made "GenerateDigitArray" and "GetBitmapFromDigitArray" into static methods. And the "LoadDataStrings" was already static.
What's important about these methods is that they are atomic -- they do not depend on any external state or the state of the class that they are in. They do not make any modifications to existing objects. They take parameters and return separate objects. That means they can operate completely independently and have no side effects.
By making them static, they also become easier to use in our code:
This code shows that we do not need to create instances of the FileLoader or the DigitBitmap objects. We just use the static methods that are on those classes.
We can definitely take this further, and the functions are fairly specific by only dealing with 28x28 arrays. But this is a really good place to start. And again, one of the important things is that we consciously think about these functional concepts.
Step 9: General Clean-Up
That's the working application that I wanted. I know, it's not a very exciting application. But it's kind of cool to think that I'm displaying all of these hand-written numbers based only on comma-separate values.
I did a little bit of clean-up after this. I won't go into all the details (you can check the code download if you're interested). I made a change to the "LoadDataStrings" method. In my main code, I wanted to get rid of the "for" loop in the main block of code and make it a "foreach" so I could process however many records were in the file. You can see this by looking at the previous code sample.
[Update: 7/11/2015: Project has been uploaded to GitHub: https://github.com/jeremybytes/digit-display]
[Update 06/27/2016: This project has been expanded beyond what's shown in this article. To see the code here, check the "DigitDisplay" branch on GitHub: jeremybytes/digit-display Branch DigitDisplay.]
The problem is the first time I did this, my computer just started spinning. That's when I checked the file and found that there were over 40,000 items. That's a bit much to process into images all at once. So, I added a "threshold" parameter to the "LoadDataStrings" method. That way I could say, "Just give me the first 1,000 values". And it would be easier to experiment with. It needs a bit of optimization to work with that many records, and the WPF ListBox may not be the best choice of controls for displaying that many items. It's something to think about further.
Wrap Up
You never know where coding explorations will take you. I found this to be a good exercise for me -- a way to do a few things that I've never done before. And hopefully you've gotten a bit of insight by seeing my thought process. I don't always get things right the first time. And that's perfectly okay. But by working in small steps, it's really easy to keep making progress.
Happy Coding!
I went from this:
To building an application that does this:
Along the way, I watched the trial-and-error approach I took to solve a problem. So, here it is with the mistakes (and still not quite good code) and the working solution.
You can download the completed code here: http://www.jeremybytes.com/downloads.aspx#CPDB.
[Update: 7/11/2015: Project has been uploaded to GitHub: https://github.com/jeremybytes/digit-display]
[Update 06/27/2016: This project has been expanded beyond what's shown in this article. To see the code here, check the "DigitDisplay" branch on GitHub: jeremybytes/digit-display Branch DigitDisplay.]
How I Got There
So, I started by running a search for articles on machine learning with F#. And I came across lots of links from my friend Mathias Brandewinder (http://www.clear-lines.com/blog/). I guess I'll really have to attend one of his machine learning workshops the next time we're both in the same place.
After bouncing through a few links, I ended up looking at a Kaggle competition (https://www.kaggle.com/c/digit-recognizer/data). The challenge is to build a system that can recognize hand-written digits. Now, I knew that I was not up to that challenge (complex algorithms are something I need to work up to). But I looked at the sample data files, and I got a bit intrigued.
The sample data was in .csv format. And it was basically a comma-separated collection of values between 0 and 255 that represented the darkness of a pixel. The data sets were there to help you train and test your system. But I thought it might be interesting to try to display the images in an application.
Here's what a record looks like:
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,188,255,94,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,191,250,253,93,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,123,248,253,167,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,80,247,253,208,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,29,207,253,235,77,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,54,209,253,253,88,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,93,254,253,238,170,17,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,23,210,254,253,159,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,16,209,253,254,240,81,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,27,253,253,254,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,206,254,254,198,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,168,253,253,196,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,203,253,248,76,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,22,188,253,245,93,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,103,253,253,191,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,89,240,253,195,25,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,15,220,253,253,80,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,94,253,253,253,94,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,89,251,253,250,131,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,214,218,95,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
For the training data, the first value (1 in this case) is the number represented by the data. Then there are 784 values that represent a 28 by 28 pixel bitmap. And there were lots of records in the file.
Step 1: Build a Parser
I created my WPF shell application, and then created a library to handle loading the file and parsing the strings into integer arrays and turning the arrays into bitmaps.
I knew I could parse the file pretty easily; I've done that lots of times before. But I wasn't quite as sure about turning a big string of characters into a bitmap. So, that's where I started.
Here was my first shot at it:
I started by splitting the CSV string into an array. But this is an array of strings; I needed integers. So, I looped through the strings and parsed them into integers. Note that I don't have any error handling here. If there is bad data, this whole thing will blow up. But the dataset I was working with was "clean", so I didn't worry about it. Then I took the flat integer array and parsed it into a 28x28 array.
But I wasn't at all sure that I got this right. In fact, I'm famous for being "off by one". Since I knew that I was still a long way off from creating a bitmap, I figured it would be best to create some unit tests to at least make sure that I'm parsing the array correctly.
This was a bit tedious because I had to take my sample input (just part of it here):
And turn it into 28 arrays of 28 elements each (what my expected output was):
This was a lot of counting, copying, and pasting. But I eventually got the data set up.
After that, the tests were pretty easy (there are 2 other tests that have the other "chunks" of arrays):
And what I found is that I was off by one. In the code that sets the "pixelIndex", I was subtracting one (to account for the first value that I wanted to discard). Instead, I should have been adding one. Here's the corrected code:
Since I knew that my 28 x 28 array was correct, I moved on to creating the bitmap image. As a side note, my unit testing pretty much stopped here. The rest of the code deals with images -- and even better, I had no idea what these images were supposed to look like (as we'll see). So, I didn't have much that I could test.
Step 2: Creating the Bitmap
I now had an integer array that I could work with: int[28,28]. This represented the pixels that I needed to create the bitmap. Here was my first stab at that:
I'm not a big fan of nested "for" statements. But I was just trying to get the job done here. I used this to copy the values from the arrays into the pixels from the bitmap image. Since these are grayscale, I applied the value to the RGB values. So if the value was 238, I would get an RGB value of "238, 238, 238".
I really didn't know if this code was right or not. I needed to display this somehow to find out. But first, I had to load the data.
Step 3: Parse the File
I created another class that would load the data from the CSV file. I just created a static method that would parse the file and generate an array of strings (that I could then pass to the methods I already created).
This checks the config file for the file name, and then looks for the file in the same folder as the executable. Then it just loops through the file and creates an array of strings where each string represents a separate bitmap/digit.
There's a note that we're skipping the first line. That's because the training file (the one I'm using here) has a header row that enumerates the columns.
Now it was time to start putting things together.
Step 4: Displaying a Bitmap
I flipped over to my WPF application, added an <Image> element to the markup, and then flipped to the code behind to populate that image.
I was doing pretty good for a while...
But now what? There's no way to directly assign as System.Drawing.Bitmap (the type that I had) to a WPF Image control.
Fortunately, the developer's friend, StackOverflow, had my solution: http://stackoverflow.com/a/6775114. So, I created a static class for this code and completed the method.
Now it was time for the moment of truth -- running the application:
At least I got an image. But it doesn't look quite right. Time to read the instructions (from the Kaggle site):
Each image is 28 pixels in height and 28 pixels in width, for a total of 784 pixels in total. Each pixel has a single pixel-value associated with it, indicating the lightness or darkness of that pixel, with higher numbers meaning darker. This pixel-value is an integer between 0 and 255, inclusive.Okay, so I got my light/dark reversed. In my image, the higher numbers represent lighter values. Let's fix the method by subtracting the value from 255 (to invert it):
And see how that looks:
Much better. And I know from looking at the data, that this should be a number "1".
Step 5: Displaying All the Digits
So, I successfully parsed and displayed a single digit image. Next it was time to try to display a lot of them. I swapped out my <Image> for a <ListBox> and then created the image items to put into the list in code:
This just get the first 10 items, loops through them, and generates bitmaps. Then it creates WPF Image controls for each one and puts it into the ListBox. Here's the output:
Not quite what I wanted. It needs some size constraints:
I set the height and width to 28 since that matched the pixel dimensions. The output was much better:
So, I increased to 100 items:
Then 1000:
And this is where I start to look at the data. Something's not right.
Step 6: Fixing the Image
These numbers don't look quite right. It almost looks like some of them are upside down and some of them are backwards. I thought at first that this might have been intentional. But after staring at it for a bit more, I knew things weren't right on my end.
This probably had something to do with the X-Y coordinate system. Some systems use the top left corner as 0,0. Some systems use the bottom left corner as 0,0. Instead of trying to change my arrays, I figured it would be easier to manipulate the bitmap after it's created. So, I played around a bit with the "RotateFlip" method until I found a setting that worked:
That seems to take care of things:
Much better.
Step 7: Final Image Fix
There was one last thing that bothered me. The digits looked blurry. It made sense that they would be blurry when they were stretched out (like in the initial display), but they should be at the native sizes now.
Or should they?
That's when I remembered how WPF worked. When you set the height and width of controls, you don't actually set pixel sizes; you set device-independent units. This is so that WPF can scale appropriately on different DPI devices. As a side note, I really appreciate the scaling now that I'm using a high-resolution display.
Instead of setting the height and width to "28", let's set them to the size of the image itself:
This gives us more digits per line (they are a bit smaller). But none of them are blurry now.
You can click on the image to see the full-resolution version.
Step 8: Functional Style
Since I started out this experiment looking for functional programming ideas, I figured it would be good to incorporate a few in the application.
I made "GenerateDigitArray" and "GetBitmapFromDigitArray" into static methods. And the "LoadDataStrings" was already static.
What's important about these methods is that they are atomic -- they do not depend on any external state or the state of the class that they are in. They do not make any modifications to existing objects. They take parameters and return separate objects. That means they can operate completely independently and have no side effects.
By making them static, they also become easier to use in our code:
This code shows that we do not need to create instances of the FileLoader or the DigitBitmap objects. We just use the static methods that are on those classes.
We can definitely take this further, and the functions are fairly specific by only dealing with 28x28 arrays. But this is a really good place to start. And again, one of the important things is that we consciously think about these functional concepts.
Step 9: General Clean-Up
That's the working application that I wanted. I know, it's not a very exciting application. But it's kind of cool to think that I'm displaying all of these hand-written numbers based only on comma-separate values.
I did a little bit of clean-up after this. I won't go into all the details (you can check the code download if you're interested). I made a change to the "LoadDataStrings" method. In my main code, I wanted to get rid of the "for" loop in the main block of code and make it a "foreach" so I could process however many records were in the file. You can see this by looking at the previous code sample.
[Update: 7/11/2015: Project has been uploaded to GitHub: https://github.com/jeremybytes/digit-display]
[Update 06/27/2016: This project has been expanded beyond what's shown in this article. To see the code here, check the "DigitDisplay" branch on GitHub: jeremybytes/digit-display Branch DigitDisplay.]
The problem is the first time I did this, my computer just started spinning. That's when I checked the file and found that there were over 40,000 items. That's a bit much to process into images all at once. So, I added a "threshold" parameter to the "LoadDataStrings" method. That way I could say, "Just give me the first 1,000 values". And it would be easier to experiment with. It needs a bit of optimization to work with that many records, and the WPF ListBox may not be the best choice of controls for displaying that many items. It's something to think about further.
Wrap Up
You never know where coding explorations will take you. I found this to be a good exercise for me -- a way to do a few things that I've never done before. And hopefully you've gotten a bit of insight by seeing my thought process. I don't always get things right the first time. And that's perfectly okay. But by working in small steps, it's really easy to keep making progress.
Happy Coding!
Subscribe to:
Posts (Atom)