In the past month and a half of interning here I’ve made the role switch from Designer to Front End Developer. It’s been a really fun and rewarding process. I wanted to go over some of the new tools I’ve been learning about that have really changed my life for the better.
First, let’s talk Sass. Sass is a syntax language which allows easier and “smarter” writing of CSS. I spent the time learning Sass as a part of the Modern Web Developer Workshop we held in May. It really has changed the way I write CSS and I can’t imagine writing plain old CSS any more. The great thing about Sass is it keeps your code DRY by nesting selectors inside their parents (nesting in the image above).
Of course it has much more to offer than nesting. Sass is much “smarter” than plain jane CSS. We now have programming principles. Arguments, mixins (for snippets of reused code), variables, and even functions.
Another little web application that was a great help to me when I was creating sprites is called Sprite Cow. You can create your own psd sprite pngs and let Sprite Cow do all the hard work of spitting out the position of each sprite that you want to display.
I made a goal for myself to become more comfortable with using the terminal and the shell. Sass was a great jumping off point but Git and the Github community were essential. Because of this I could interact and work with other developers not only here at Planet Argon, but around the world. It’s become an important part of my workflow and something I can see myself contributing to for many years in the future. I was intimidated by the terminal and the shell, but using Sass and Git urged me to take those baby steps. There is another world there of things to learn and aid in the developer’s toolbox. I’m really excited about it! Robby’s Oh My Zsh has also made moving around and using the terminal easier and much more fun!
I’ve also been working on developing responsive websites. Twitter’s Bootstrap was a great foundation, showing me how well fluid responsiveness can work in a grid. In some projects, however, I found it was better to build out of Bootstrap, so my page was less bloated with unnecessary HTTP requests and unused CSS. YUI Compressor was also a great help, allowing you to easily minify your CSS and/or javascript files to increase the speed in which your page loads.
Jack Bouba also showed me a great little app that was really helpful for mobile development called Anvil. Anvil served my website locally and pushed it to a xip.io domain so I could test my sites through a hosted domain on my smartphone/tablet.
Hope you found my little list of tools insightful! If you want to explore any of these for yourself, make a little project for yourself and try them out!