Category: Blog Entries



Another Year, Another Redesign

It’s my mind that my website’s design goes through a cycle. Sometimes that cycle lasts only a year, other times it lasts a couple of years. It always starts off with the honeymoon period where everything is great and I love it to bits. Then I fall into the comfortable maintenance period where things are still working, but once in a while something goes a little off-balance and it eventually gets fixed. Then it enters its twilight period where I’m tired of looking at it, and tired of patching all the little things and feel like it would just be a better solution to redo the whole damn thing. This twilight period is usually where I question my value and skills as a designer and developer and it bothers me to no end.

Usually around the end of that second year, I get the uncontrollable urge to redesign this place. In 2017, my website is starting to show its age a little and I’m finding annoying little things here and there that I’ve been meaning to fix for months. Sure, it still works, but sometimes I wish it worked better and as an example of what I do, I’m feeling a bit underwhelmed by the current site.

I’m thinking of going ultra simple this time. Part of the reason for that is because I’m tired of the fancier bits and pieces sometimes going awry on this older browser or that older browser. So, I’m looking to update the layout, fix the code base, simplify or otherwise modernize the design, or maybe just use all this as an excuse to add my latest work to the Portfolio section.

Whatever the reason is, I’ll be working on (in whatever spare time I have) a redesign for Iron Ion which I’m hoping to roll out before the fall season. Outside of musing about it all and one day seeing a completely different looking site, nothing else is going to change.

I’ve got a dozen or so coding posts that I’m still working on, spare time to work on these things is sparse nowadays–not that I’m complaining or planning to stop any time soon. I’m always happy to visit the site and see your wonderfully kind comments and notes. I do read every single one of them, and try to respond to all that I can–even if I don’t have the answers. So thank you for all the comments, questions and feedback. Hopefully before the end of 2017, this place will look a little different so I can assuage the screaming designer in me. 🙂



Developers Should Learn Design, Designers Should Learn to Code

I’ve pondered the question over the entire course of my time working as a freelancer and continue to ponder it to this day: Should developers learn to design? The common advice to designers is that yes, you should learn to code. But what about the other way around? With the recent push to get more coders out into the workforce, we often forget to pull back and think of the simpler things. Such as the question of whether someone who programs should know anything about design. I say, yes. Yes, programmers and developers should know design.

But why? Isn’t it about solving problems? Clean code? Making the engine start, and keeping the gears turning? Sure, that’s a large proportion of a developer’s job. But it’s hardly the only thing. A large portion of a developer’s work–particularly front-end development, is ensuring whatever you make is usable. And usable tends to go pretty well with the idea that everything you make, ought to be well-designed.

So here’s a list, because I love those, of reasons why developers should learn design.

Usability: So many times I’ve seen developer or programmer created applications that were made (and made well) without the end user in consideration. There’s a lot that goes into the usability of a product. It’s very easy for people to forget, as they’re creating something they’re passionate about, that other people will eventually have to use it too. Design is a large part about usability, or UI/UX considerations. So, for a developer to make a highly usable, highly desirable product, something a thing or two about the good design that goes into these products is beneficial.

Possibilities: Just as designers have been told to learn code so they understand what is and is not possible, developers would benefit from learning some design. This is so that they gain a better understanding of what is and is not good user experience.

Teamwork: Working in house or as a freelancer is rarely an entirely independent exercise. You’ll have to talk to the designer eventually, get their opinion on various design choices they’ve made. This is where having an understanding of what they’re talking about when they tell you that you should, ‘increase the leading on the body type to improve the hierarchy of the layout’ is probably a good idea.

Perspective: Since when has having a narrow perspective been a good idea in a professional setting? Broadening your perspective by learning a little bit about another subject makes your work more well-rounded and allows you to approach projects and tasks with a more diverse skill set. I don’t think I’ve ever heard an employer or client say, ‘We want to hire someone who’s only good that this one thing. And if they have any other skills or abilities, then heaven help them, we aren’t giving them the job!’

Presentation: While a developer shouldn’t be tasked to sit down and layout things as their primary job, the fact that presentation is important to a project is difficult to argue with. Aesthetics matter. How something looks is the very first thing people will pay attention to. So if it looks bad, then users have a bad impression of your work–whether or not you spent hundreds of hours writing the most beautiful, clean code you’ve ever written in your life. Chances are pretty good that your users aren’t going into the code to see how you’ve written things to make the program work. But they are going to want to know what the buttons on your interface do, or how to use your menu system.

I come from a perspective shared by fellow designers who have to wear multiple hats. I have always considered myself a designer first and have always accepted that designers should know code. Initially, it was so I could be self-sufficient as a freelancer. Then it turned into a philosophical advantage and finally to the point where I’m now referred to as a developer first. While I still identify primarily as a designer, I often recommend developers look across the pond. The four reasons above are just the start. You may find it fun to learn some design.



Salad Shake, Our Food & Drink App!

salad shake

Over a year ago, my husband and I started learning Swift in an effort to make our own app for iOS. Pretty much a year later, we finished Salad Shake, a Food and Drink app for iOS Devices. We learned a lot, and we’re getting ready to launch it on July 11, 2016 to the Apple App Store. It’s been a real roller coaster ride for us. Learning Swift was scary. Then finding out just a few months after getting comfortable with the language that Apple is releasing a new version was also scary. Figuring out how Swift handles data took some patience. Then navigating the Apple Developer Tools to just get the app submitted was an adventure. However, it’s done and is approved for sale on the Apple App Store.

Salad Shake is Launching July 11

The app is called Salad Shake, a unique little thing that suggests things to put in your salad. Salad Shake isn’t online until July 11, 2016. You can check out the landing page I set up for it here: http://saladshake.io

I’m quite proud of what we’ve accomplished. We didn’t use Interface Builder for any portion of it. Coded Salad Shake entirely in Apple’s language, Swift. We even built our own algorithm and I designed and drew pretty much every art and graphical asset in the game. I even have a bunch of freebies you can grab here: Get Some Free Salad Shake Stuff!

Did I mention that I have no video capabilities, put together a preview video using After Effects anyway? You can check out that video here: Salad Shake Preview Video

I’ll be making another post on launch day to give you all the link to Salad Shake on the Apple App Store. In the mean time, we’ve discovered that after overcoming the programming hurdle to actually make the app, the biggest hurdle in this entire process is marketing. While working in design and development of websites is something I’m fairly comfortable with, marketing has always been handled by someone else so I’m learning a lot of things about marketing–primarily that it is really, really hard.

If you run a blog or channel YouTube and you’re interested in featuring or reviewing our app, feel free to get in touch with me using this good ole contact form, or message me on Twitter: @imbriumapps and let me know you’re interested in Salad Shake and I’ll get back to you faster than you can say, “Go” and we’ll set something up.

Salad Shake is a Food & Drink app for iPhone 4s and better, iPad Air and iPad Pro. It will be released on July 11 and will sell for $0.99. No ads in the app, no in-app purchases and no subscription fees.



Should I Learn Javascript or jQuery First?

This has been a debate raging all over the development world with a lot of heated conversations opposing or promoting one or the other side. I wanted to put my thoughts down somewhere and since this is my blog, why not?

I’m of the opinion that before you can determine which you should learn first, you need to figure out why you want to learn either language to begin with. Are you interested in being more of a developer or more of a designer? Is your end goal to make a website, or a web application? And how much of your heart is into the code versus the design aspect?

I’m not going to say, everyone needs to learn jQuery first. Or everybody needs the fundamentals that comes from learning Javascript. What I do question is pushing people who are more interested in getting things done quickly from a design standpoint into learning Javascript when the vast majority of the time, they aren’t going to use many of its powerful features.

Learn jQuery First

I advocate some people learn jQuery before they get to Javascript. This doesn’t mean that people who learn jQuery have spoiled themselves and they’ll never catch on to JS. If someone wanted to figure JS out anyway, they would do so whether they start with the Library or the language itself. I tend to recommend those who are looking to do quick, simple things to make good looking designs with nice effects and some functionality aim for jQuery first. It’s faster, it’s easier, it doesn’t force you to mire yourself in a bog of complex programming logic before you can do a lot of really cool things with it. And some people actually find that learning jQuery first opens up a level of understanding that would have taken them much longer to grasp had they struggled through the JS route first.

Learn Javascript First

Javascript is the foundation. It’s like the base that you need to understand if you wanted to do more complex, more intricate things with the language. People who go into jQuery first need to be clear that they’re learning shortcuts and that there’s a lot more than just what they see on the surface. Javascript first can be intimidating, especially to people new to coding. But it’s the kind of language that lends itself well to helping you understand even more complicated languages once you have a grasp of it. A lot of developers recommend going the JS route first. After all, you need to crawl before you can run, and ultimately starting hard and moving to something easier is how some people learn best.

Ultimately, it boils down to what your goal is. Are you content to know enough to make some cool effects happen on a website? Great. jQuery first. And if you develop a love for the language, Javascript is always there, lurking under the sand and just waiting for you to dig in.

If you’re more into development than design, then you know you need to start on the more complex side of things. Shortcuts in jQuery are lifesavers, but good developers usually learn it the hard way before they figure the shortcuts out. This is so they understand the fundamentals and those fundamentals can then be translated to other languages, something jQuery just isn’t as good at.

Long story short, if you’re focused on design, go with jQuery first and upgrade later. If you’re focused on development, go with Javascript first and figure the shortcuts out after you have the foundations down. Those are my thoughts on it. What do you think?

For me, personally, I learned Javascript first because I wasn’t really given a choice. We sat down in class one day and were told that Javascript was what we were going to learn. We didn’t get too far, the basics were all. Enough to give us the fundamentals that are relevant no matter what language I move on to. One year after that class, the first version of jQuery came out.



Is it Gif or Jif?

On a lighter topic today, I want to share with you a story of my childhood. Back in the 90s, the very first image I downloaded onto my computer (downloading images and saving them on your hard drive was a big thing back then), was an animated gif of all 151 Pokemon. It took me forever because the image had to load before I could download it. But really, it was because I was on a 14kb connection. But when it did finish loading and I got it onto my hard drive, that thing was boss.

From the get-go, I pronounced Gif with a hard G. And continued pronouncing it that way all the way up into my college years, unbeknownst that Steve Wilhite, the creator of the Gif format, said it was pronounce with a soft G, or “Jif”. One of my college professors told us this in a dark, musty lab filled with dust and the deafening hum of computer fans.

“It’s pronounced ‘Jif’, a soft G. Almost like a J. That’s what Wilhite said and he invented it. That’s how you should be pronouncing it from now on.”

Along with this proclamation, he launched into appropriate times to use a Gif and inappropriate times. But I was still reeling from the knowledge that I had been wrong almost my entire life. As time went by, Gifs became less and less relevant and for a while, it seemed like the format was on its way out. But in recent years, Gifs have made something of a comeback, being used for lightweight technical animations and–of course, amusing animated looping videos. I don’t think the format is going to see the boom that it did back in the 90s, but it’s not without its charm and usage now.

Of course, that brings me back to my conundrum. Ever since college, I had banished the pronunciation of Gif with a hard G and forced myself to pronounce it with a soft G. Only people have tended to band together and pronounce the word with a hard G. Even the dictionaries say that both pronunciations are accepted. Even the White House says it’s pronounced with a hard G. And amongst all this is Steve Wilhite, who once again said that you pronounce Gif like “Jif” in more recent years at the Webby Awards (is anyone else surprised by how fancy the Webby Awards are?) It’s true. See?

In the grand scheme of things, does it really matter how you pronounce the stupid word so long as you know what it is? Probably not. But how one pronounces Gif has been a debate that’s raged on since the format was first released. After all 1) Technically, they’re both correct. 2) It really doesn’t matter.

As for me, I might have to reprogram myself to say it with a hard G. Even knowing the historical naming of the format (peanut butter, for real), I can’t bring myself to keep saying it with a soft G. Here’s a great article about why people generally veer towards the hard G version and why it’s technically more accurate as a hard G than a soft G: How to Really Pronounce GIF.



Do You Suck at Math? Learn to Program Anyway

There’s something to be said for being good at math. Or at least not sucking at it. I suck at it, and playing catch up after all these years of doing very little with math also sucks. I would be lying if I said I still hated it as much now as I did back then. In high school there was no class I loathed more than math class. It was a one to two hour horrorfest every weekday when I’d sit there and watch my peers fly through the material while I struggled to keep up. It felt like I was never going to understand what was going on. Part of that was how it was taught, which isn’t an indictment on my teachers not caring or not being good at what they did. They were good people, excellent at their professions. It was me. Some of us learn things differently. It wasn’t until a couple of years ago did I realize that how I was taught math wasn’t the best way for me to learn it.

I learned math through trying to learn to program, because a lot of programming tutorials, books and courses have a lot of math-based examples. So while I was trying to figure out the language, I was also forced to figure out why we were doing certain things with the language. And because I wanted to learn the programming, one of the byproducts was figuring out some of the math–because I had to. Now, I’m still not good at math. And if you ask me to calculate something, my first response is probably to go ask someone else. But, I’m no longer of the opinion that it’s one of those things that I’ll never get the hang of–music, on the other hand, I’m perfectly happy to continue sucking at that for the rest of my life.

I read a couple of interesting opinion pieces recently. One was Al Sweigart’s, “‘How much math do I need to know to program?’ Not That Much, Actually”, which explores some of the most commonly used math-related concepts in programming and Sarah Mei’s, “Programming is Not Math”. Whether one agrees with the ideas put forth in either article is various. I’m of the opinion that knowing math and being good at it definitely helps. And if a Computer Science or Computer Engineering degree is where you want to go with it, then having a solid grasp on math is definitely needed. Knowing math is also incredibly useful when it comes to certain programming tasks too. But I have personally found that what I picked up while learning to program is all that I’ve needed. And if I need to solve more complex programming tasks, the math that comes along with it tends to be learned in the process of figuring out the code.

I don’t think math is a prerequisite for programming, certainly not if you’re just aiming to learn to program. Where if you couldn’t cut it in calculus then you would never survive the process of learning to code. I also don’t think people should discourage those who aren’t great at math from trying to learn how to program anyway. After all, a lot of people successfully learn through a mixture of interest and determination and I definitely think a lot of people pick up the math as they pick up the language.

Resources

Project Euler
Programming challenges to solve math-related problems. Great for practice when you need something to expand your horizons.

How to Think Like a Computer Scientist
by Jeffrey Elkner, Allen B. Downey, and Chris Meyers



Like the Iron Ion Facebook Page

After a little over two years, I finally got around to setting up an Iron Ion Facebook page for Iron Ion. It wasn’t complicated, difficult or very spectacular. I’m just amazed by how long it took me to get around to it. I don’t even have a good excuse, it was just like saying to yourself, “Geez, when was the last time I went through the spice cabinet to throw out all those spices?” And then you meant to go do it later when you had some time, but forgot because something exciting got in the way.

The Iron Ion Facebook Page

So if you like me on FB: Like Me on Facebook <3

You’ll make me feel a little better about myself. It may even motivate me to organize my spice cabinet because I don’t know how old that cumin is, but I’m very leery of using it. I’ll be posting links mostly, and updates for new posts. Most of them related to an up and coming series of Bonfires from Free Code Camp.

Admittedly, I’m not hip on the social media side of things. Or social marketing, at some point, maybe I’ll get up the nerve to post something funny. Long story short, if you like the page, it’ll only help.

I might also draw an amusing image of a cyberpunk, spandex-wearing, rocket-propelled octopus who codes or something. If time ever permits.



Re-Discovering Sublime Text & Shortcuts

Recently started using Sublime Text for a more extended period of time. I spent more time getting it up and running than Brackets, but I think I’m fairly happy with how it’s going. The main reason I switched back? I was teaching using Sublime Text and it was getting ridiculous not knowing the keyboard shortcuts and quick commands that come along with the program.

So I set forth, customizing my ST3 until I was happy with the functionality I had. I’m still working on getting as familiar with it as I am with Brackets and I still fall back on Brackets for a couple of features that I either can’t find in Sublime or assume aren’t in there without adding additional packages. This post is a summary of the packages I’ve installed and use as well as a list of shortcuts. Mostly as a reminder to me in case I ever have to rebuild everything from scratch or stop using Sublime for an extended period of time.

Packages I Use in Sublime Text

  1. Package Control
  2. AngularJS
  3. BracketHighlighter
  4. ColorCoder
  5. ColorPicker
  6. CSS Color Converter
  7. CSS Format
  8. CSS3
  9. FileSystem Autocomplete
  10. Foundation 5 Snippets
  11. Git
  12. HTML5
  13. HTML Beautify
  14. Javascript Beautify
  15. JSLint
  16. jQuery Tools
  17. PHP CS
  18. Placeholders
  19. SASS Tools
  20. SASS Beautify
  21. SCSS
  22. Sublimerge
  23. Swift Tools
  24. WordPress Tools

All packages can be installed using Package Control.

Shortcuts

Color Picker: CMD + Shift + C (requires ColorPicker package)
Sublimerge Quick Panel: CTRL + ALT + D (requires Sublimerge package)

Commenting: CMD + /
Find: CMD + F
Replace: Shift + CMD + F
Move Tabs/Panes: CMD + 1/2/3/4
PackageControl: Shift + CMD + P
Select Line: CMD + L

Setting Automatic Line Wrapping

Go to Preferences > Settings – More > Syntax Specific – User

Enter the following onto the document:

{
"word_wrap": true
}

HTML Entity Encoding

I find myself using this a lot when setting eBooks for clients. To convert to entities:

Select all your code/content, then hold down Shift + CMD + P. Type in “en“, and select HTML: Encode Special Characters and hit the Enter key. Yay, your special characters have been converted to entities.

Theme

Modified Dimmed using Monokai TMTheme Editor.

Chances of anyone besides me finding this useful are kind of slim. But I figured I’d post it out there in case anyone was wondering how to call up the Color Picker or something.

Search/Replace Using Regex

Just make sure this little icon is selected to enable Regex searches: regexsearch

Resources

Package Control for Sublime Text
Sublime Text 3 (Beta as of this writing)



Super Cool CodePens

Looking at the cool stuff other people have made on CodePen can eat up a lot of free time, especially when it comes to seeing how far web languages have gone over the years. Back when I was a kid, playing around with Javascript, it was already amazing if you could replace the default cursor on your website with a custom one. Bonus points if there was a trail of sparkles following the cursor around the screen. Hey, I’m a girl. Let me have my sparkly unicorn mouse cursor.

Anyway, some of the totally awesome CodePens I’ve been looking at recently.

 

Physics Experiment with a Ball

physicsball

This one features a little red ball that you can move around using the WASD keys on your keyboard. The ball responds to physics that was written in JS. Curiously addictive and fun to play around with.

A Galactic Ring

ring

Something about this is incredibly soothing to watch and extremely fun to mess with.

 

Card Input

cardin

This one has the potential to make for a really cool app case study. Heck, it’s cool on its own anyway.

 

Pure Parallax Stars

stars

Looks super simple (but isn’t), and looks super nice.

 

Rainbow Spider

spider

There is something immensely charming about this clumsy spider.

 

CSS Shake

cssshake

Anyone with an addiction to coffee can probably relate to CSS Shake. My favorite is the crazy one.

 

Firewatch Parallax

firewatch

Gorgeous visuals with a bit of CSS parallaxing.



Iron Ion Site Design Updated

Welcome to the updated design for Iron Ion. I decided to go with a less cute design while still maintaining a level of personality with some of my favorite bright and fun colors. There are still some things I need to work out with the design. Most notably the wonky blog layout, but for those of you looking for the articles on this site, they should display good enough for now.

My portfolio is also going to be undergoing a lot of major changes over the next two weeks. The pages will have more content and be tailored for each individual project.

Please be patient while I get the rest of my site back up to speed in the next week or two and hang tight for some brand new tutorials and articles as well!