Category Archives: Tools

by - 0 comments

Collaborative Code Editors

Though we have each chosen our desktop text editor of choice, we are currently exploring online environments in which we can collaborate in our code editing practices. Below are a few of the online editing spaces that we have explored thus far:

Collabedit

Collabedit offers free online editing in a variety of languages, along with a chat bar on the side so that editing partners can communicate. It is very minimal and does not feature color coding or autofill.

Stypi (formerly https://code.stypi.com Stypi became defunct in 2015)

Stypi is another free online collaboration space. Like Collabedit, it is very minimal, with one common coding area and a side bar for collaborator chat. However, Stypi also features auto complete and color coding for the various languages that it supports.

JSFiddle 

While it does not support the same variety of languages as other editing spaces, JSFiddle does offer three simultaneous windows for editing the HTML, CSS, and JavaScript of a page, plus a fourth window to view the result in realtime. And, like the other editors, it is free and has a chat bar on the side.

Since our current focus is on front-end web design, we will be experimenting further with JSFiddle in the coming weeks and months. Keep your eyes peeled for more in depth exploration of this and other online collaboration tools.

by - 0 comments

Girl Develop It

While moving ahead with our Treehouse tutorials, Jenifer and Jackie each signed up for in-person workshops through Philly’s Girl Develop IT. Girl Develop It is a international organization with chapters in most major American cities that offers hands-on instruction for women who want to learn web and software development. Jackie attended an amazing day-long workshop on user experience back in the Spring and was excited to see workshops cropping up on the same coding skills we were working through in Treehouse.

photo of Jenifer at the GDIT's PSD to HTML day at the Impact Hub
GDIT’s PSD to HTML day at the Impact Hub

In May, Jenifer attended Girl Develop IT’s “PSD to HTML” project day at Philadelphia’s Impact Hub.  The workshop started with a Photoshop image of a web site design mocked up by a client.  This was a real world scenario – an actual small business website idea that was presented to the web developer for realization.  Attendees spent the afternoon using the Photoshop file, css, and html to code the site, learning along the way the many challenges of taking this approach.  PSD to HTML had apparently been a common workflow in the past – especially at the time when many image effects weren’t yet possible through CSS or across browsers- but has more recently faded from the forefront while mobile-first, responsive design approaches have taken prominence.  Treehouse.com takes that position, but reminds that detailed Photoshop mockups are still essential as a tool for working with clients and when working in large teams.  Jenifer’s experience at the workshop was that she was able to successfully realize far more of the site using my knowledge gained from a few weeks of tutorials than expected.  The support from the GDIT instructors was great but also revealed the challenge of keeping up with the latest and working across multiple areas of habit and specialization.  One instructor would advise on solving a problem in a way informed by her experience working with SASS (a css preprocessor) and another comes along and suggests a solution informed by her work with another framework or grid system like Bootstrap.  In that sense, it was a little like trying to learn a language from a group of teachers who each speak a different dialect.  But it was also a good illustration of the remarkable versatility of CSS.  Overall, it was a great experience and Jenifer intends to participate in more GDIT events in the future.

photo of class
JavaScript for Beginners

In July, Jackie attended a two-week JavaScript for Beginners class at Indy Hall to supplement the Treehouse track in front-end web development. The class was targeted at beginners who had a solid knowledge of HTML and CSS, but knew little about JavaScript. The instructor started by introducing the fundamentals of JavaScript and instructing students on how to create some very basic page interactions. Each session built on the previous and ended with a session on the JQuery library. This class was Jackie’s first real experience with any programming language (she’d incorporated scripts into websites before, but had never written any JavaScript on her own). It was challenging, and she was surprised at how little previous knowledge of HTML/CSS help with understanding the underlying principles of programming. At GDI, though, there was support throughout the sessions from the instructor as well as 3-4 helpers assisting attendees. Learning a programming language like JavaScript is an endeavor that will take time and practice. Working through the JavaScript tutorials in Codecademy after the class was a helpful refresher for the basics of the GDI class. All in all, taking a class with GDI is highly recommended (men are welcome too!).

Girl Develop It logo
And you even get a cool sticker to take home!
by - 0 comments

What Rascals Think of Code Editors

One of our first challenges as Code Rascals was finding a free, usable code-editing platform. While there is no shortage of editors available on the web, trying to test or choose from such a plethora is an imposing task. Further, we had already been spoiled by Workspaces, the online editing environment (unfortunately) confined within the walls of Treehouse. With reliable auto-complete, balanced color-coding, and automatic indentation, Workspaces creates a high set of expectations for what a free editor can do. So, we set out to find something comparable: A free text editor with similar usability features, portable across multiple platforms.

One of the first editors that we experimented with, TextWrangler is a free text editor that supports a large variety of programming languages and uses AppleScript to generate a real time preview via web browser. While this is quite useful, TextWrangler is plain text only, with none of the visual cues that we had come to appreciate via Workspaces. Also, it is currently only available for Mac OSX.

We also tried the very-usable Komodo, with a clean interface, autocomplete, and almost everything that you could possibly want from a text editor (sans color coding). While the free preview supposedly only lasts for 21 days, Komodo is certainly worth looking into.

Xcode, Apple’s development suite for Mac OSX and IOS, was another useful editor. A standard package that most of us had access to via our status as Mac users, Xcode offers a clean and usable interface to anyone wanting to run all kinds of code (so long as they are Apple users).

Perhaps the most popular editor that we explored was Sublime. Operational across multiple platforms with color-coding, indentation, and auto complete, sublime is incredibly usable with an intuitive, bare-bones interface. While it occasionally asks users to upgrade, it is also free to download and use. Perhaps the closest editor to Workspaces, Sublime is actually the editor featured in many of Treehouse’s video tutorials.

For more information about Sublime (as well as a few editors not covered here), head on over to the Treehouse blog to view web design guru Nick Petit post “Which Text Editor Should I Use?”

by - 0 comments

Rascals in the Treehouse

photo of a treehouse
Cool treehouse, courtesy of flickr user @emdot.

Based on a recommendation from Rascal Jackie, we decided to try out Treehouse as our code-learning platform of choice. Treehouse is just one of many tools (see also: lynda.com, Codecademy, Code School, etc.) that provide coding instruction and practice, but there are a few unique features that really piqued our interest. Here are some of the things that we like about it:

  1. Curated tracks. While lynda.com tutorials are very well-designed, the courses tend to focus on one piece of software really in depth. While it can be helpful to learn ALL the ins and outs of a program, we wanted to learn a skillset that we could apply to creating a complex final project, like a website. Treehouse has several different Tracks (we embarked on Web Design, Front End Web Development, and PHP Development) that are comprised of curated sets of Treehouse courses.
  2. Project-based instruction. Many of the Treehouse courses walk you through a project step-by-step, allowing you to pick up new skills while applying them to a real-life product. For instance, the How to Make a Website course moves quickly through HTML and CSS basics, while teaching you to build a mobile-first, responsive website. Later, as you move forward in your Track, you can take on “deep dives,” which cover HTML, CSS, and other aspects of website creation in detail. Treehouse also provides online workspaces, so you can work on your projects in your browser while watching tutorials.
  3. Gamification. Treehouse logs your progress and lets you test your knowledge through quizzes and code challenges. As you progress through Treehouse tutorials, you can unlock achievements and earn badges. You can also view group stats and see what the other Rascals in your group are up to.
  4. Price tag. Thanks to the Free Library of Philadelphia, Treehouse is free to us!

The Rascals plan to keep up with our Treehouse tutorials throughout the year. We use our weekly meeting time to check in about progress, and keep each other on track. Stay tuned for more reviews and reflections!