Clean, modular, & stable interfaces
Writing JavaScript is definitely the largest part of my development process and probably the most important. I put a great deal of effort into finding an efficient, succinct, and easily understandable way of expressing my code. I cut every bite of text and millisecond of loading time I can so users can have as smooth and coherent of an experience as possible. I also compile & minify all of my code before launch for efficiency. I follow Google's JavaScript style guide and John Papa's Angular style guide for clean and standardized code, and I frequently write comments so that it can be as readable as possible. I also research potential security risks and code around them, such as disallowing special characters in forms to avoid script injection.
My code follows Google standards for CSS development and I put a great deal of work into my CSS and SASS to make it as DRY as possible. I consistently order all of my CSS properties within their classes and group relevant classes and ID's together as much as possible for ease of editing and readability. My websites support the major browsers (Chrome, Firefox, IE9+, Safari, and Opera) and I try to make the user experience uniform across them as much as possible. I also include cross-browser prefixes for properties like 'filter' and 'box-shadow' to support the querks of those browsers. My websites are responsive and look great on all of the popular device sizes, including mobile, tablet, laptops and large desktops.
I follow Google's HTML style guide in order to have clean and standards-compliant markup, and also to be consistent with Google's search engine algorithms. I use useful & descriptive tag names for my elements as well as commenting parts of my code that may be of interest. Angular directives and Bootstrap classes make HTML capable of some very powerful & expressive logic that I take advantage of every day in my development process. With Angular, I can keep a lot of the DOM logic inside of the HTML as opposed to hidden in the controllers somewhere, which results in code that is quick & easy to debug and understand.
{{dataObj.repositories.names[repo]}}
{{dataObj.repositories.commits[repo]}} commits
Click to view on Github
Week {{week + 1}}
Day Commits
{{dayNames[day]}} |{{dataObj.commits.days[week][day]}}
This week
This year
Current Streak
Longest Streak
{{dataObj.commits.thisWeek}} commits
{{dataObj.commits.thisYear}} commits
{{dataObj.commits.currStreak}} days
{{dataObj.commits.longestStreak}} days
{{dataObj.repositories.runnerCalc}} commits
{{dataObj.repositories.resumeSite}} commits
{{dataObj.repositories.sips}} commits
{{dataObj.repositories.darkReader}} commits
{{dataObj.repositories.tmTheme}} commit
I've been pushing my code to Github every day for almost a year in order to make all of my development activity public. The graph above visually displays some of that information using D3.js and is populated upon refresh with live data requested from the Github API. You can hover over the outer week ring to reveal the daily data for that week, and over the inner pie chart to see information about my specific repositories.
My projects
RunnerCalculator.com is my main project that I've been developing for almost a year now. It's a web app built with modern technology that allows runners to easily calculate a few useful numbers associated with running. I built the application myself from the ground up and I used the project to learn more about the web development process. It looks and works great on all devices and major browsers, and is made to be scalable, clean, fast, and easy to use on the run.
Tools I use
For the past few years I've learned JQuery and Angular.js to supplement plain JavaScript in my web applications. The use of the MVC/MVVM structure of Angular one and two-way data-binding has sped up my development process and given me a lot more power as a newer developer than I otherwise would have with plain JavaScript. But I've made sure not to forget how to write code without the help of frameworks that might be deprecated one day. I've also learned asynchronous programming with AJAX and $http and use it frequently in my code, and even on this website in the Github graph above.
I also use Bootstrap for its easy table layouts and occasionally for its built-in classes, but I usually tend to write my own CSS classes in lieu of the ones it offers. I prefer explicit programming as opposed to implicit, and Bootstrap has a lot of implicit things going on under the hood.
I always use Git and post meaningful and useful commits publicly on Github every day. Because of the loss security it offers, version control has been invaluable to me and saved me so many headaches throughout my development history. I use Grunt to build my release application by minifiying, concatinating, and otherwise saving as much time and bites as possible. Grunt's workflow automation greatly sped up my development time and enabled me to task run a bunch of programs like autoprefixer and JSHint as well as preprocessors such as Sass and CoffeeScript with ease. I use Bower package management to easily install dependencies and keep them up to date.
I use Gimp for the majority of my image editing needs, but for my design workflow I also use Balsamiq. My workflow begins with brainstorming rough Balsamiq mockups until I get a basic idea of what the layout of the project will be. I then recreate it in Gimp and start playing around with the specifics of the design, such as the colors, text, shadows, etc. I then do a final recreation of the layout in the browser and make any minor adjustments needed. I like to do the majority of my designing outside of the browser so that the limitations of HTML/CSS don't dictate the outcome of the design too much.
I use D3 for data visualization such as the circular Github graph in the section above. It's a great tool and does some tricks that are normally difficult to do with just CSS/JS.
I used SASS to make this website and normal CSS to make RunnerCalculator.com, so I am familliar with developing with either. However, I prefer SASS because the logical tools it offers are much more powerful than CSS and have made my code much more DRY than it otherwise would have been. I've also spent some time programming with CoffeeScript and TypeScript and plan to use the latter on future applications that I make. I love these tools but am also paradoxically swayed by the argument that the more external libraries I use the greater the chance my app will be dependent upon deprecated libraries in the future. For that reason I don't always compile my code from these languages.