Rising Swarthmore College junior, Oscar Chen, just spent his summer and part of his last winter intersession break with the TechChange team in Washington, DC to get professional software programming experience. Complementing his Computer Science major, he worked as a Junior Programmer Intern. Read on to learn about his full-stack developer experience in learning to code in PHP, Python, Django, and more.

1. How did you hear about TechChange?
A combination of luck and choice of school brought me to TechChange. My first stint at TechChange (a one-week “externship” in mid-January of this year) came through a program at Swarthmore that connects students with working alumni, and I was fortunate enough to land at TechChange, where two alums currently work.

2. Why did you choose TechChange to spend your summer?
Put simply: to come back! My time at TechChange in the winter, however short, exposed me to a great deal of what makes TechChange so special as both a company and a place to work. In just one week, I had the opportunity to work closely with both the development and e-learning team to design a course gamification system, and picked up enough of PHP and the WordPress web platform to begin implementing it in the course platform. Along the way, I’d gotten little glimpses of how the teams worked together in the old office, and how nearly everyone seemed genuinely interested in the work their co-workers were doing just five feet away.

After a software engineering course in my spring semester, I became interested in the software development process, and how teams use version control and process models. My short stint in the winter wasn’t quite long enough to really delve into TechChange’s processes, and so I wanted first-hand experience working as a full member of the team. In addition, after doing mostly Android app development in the spring, I was eager to try my hand at some full-stack web development, applying both my Python and newfound PHP skills in the live web applications developed by TechChange.

3. What are your interests?
Academically, I’m a computer science major interested in software development and process models. Outside of work, I’m a soccer-loving geek with a passion for food! I also enjoy biking and reading good science fiction novels.

4. How did you use your TechChange internship to explore your interests?
My time at TechChange gave me the chance to dive into web development and learn about the multiple different frameworks the TechChange developers use. Working through TechChange’s version control and software development processes (weekly priorities meetings, gitflow, etc.) allowed me to see first-hand the benefits and pitfalls of working as a team.

DC is a very bike-able city, and so I found myself biking both to work and around the city to pick-up soccer games, intern events, and even food truck festivals! TechChange’s flexible hours definitely gave me freedom to explore, and I wouldn’t have found that at another firm.

5. What did you do at TechChange this summer? What was your role at TechChange?
I was involved in numerous technical projects that the TechChange tech team had in their plans for the summer. The first few weeks of my time at TechChange were spent familiarizing myself with the different apps and architectures that have been developed with Django, and embarking on small bug-fixing projects to get my hands dirty with them. I also aided in testing and updating to new versions of software in use.

Oscar at work

Oscar works on an event tracking system for WordPress using TinCan API at his station at TechChange

Later on, as a re-design of the gamification system I implemented in winter, I began work on an event-tracking system for WordPress using the Tin Can API. This became my largest project in the latter half of my internship, and with the creative license to design it however I wanted, I took to it immediately.

6. What did you learn during your time at TechChange?
Many things! I learned that big screen TVs in the office are invaluable during the World Cup. I learned that “Beauty School Valedictorian” is a great band name. I learned that my feet are not built for the wear and tear of working at a standing desk.

On a more serious note, the experience I’ve had in full-stack webapp development and WordPress plugin development has really challenged me. In my projects, I’ve had to go from essentially zero knowledge to implementing new code in numerous languages and frameworks on both front-end and back-end areas. As an example, my last project involved using third-party Javascript libraries, jQuery, and Ajax to develop a new event-tracking system within the WordPress course platform by writing a plugin in PHP. Just a semester ago, my knowledge of these were cursory at best, but now I’ve gained enough proficiency with them to develop on my own. I’ve learned tons about the details of full-stack web development, especially about back-end database querying, API calls, and how servers communicate with each other using HTTP requests. I’ve also learned the merits and details of using practical UNIX tools such as vagrant virtual servers, bash scripting, nginx, gulp… the list goes on.

Throughout the summer, it was evident how much focus was placed on being not just a technical enterprise, but one for social change. Guest experts would cycle through every week, and each project I learned about from talking with people around the office was a part of a larger societal mission – whether it be developing malaria diagnosis training modules for USAID or providing peacebuilding training to international development professionals. It was very exciting to see that our work was ultimately not just profit-driven, but also mission-driven.

7. Did your TechChange experience end up going as you expected?
In one way, yes! I’ve gained a plethora of new skills, and leave with a much-expanded practical knowledge of full-stack web development. But I was also pleasantly surprised by how much larger it seemed – in between my two stints, the company moved its offices to a larger, more central location. There were many new faces I met, but everyone welcomed me back as part of the team. Learning more about everyone’s role on the team through weekly show-and-tells was great, as were the occasional office fun days (full of World Cup viewing, cupcakes, and board games).

World Cup games and cupcakes at TechChange

The TechChange team takes a break to watch a World Cup game and enjoy some cupcakes

8. Would you come back to work at TechChange one day? Why?
Of course! There are so many exciting projects that TechChange tackles each week, and the people in the office are an intelligent, diverse bunch who are as committed as they are fun to be around. The work TechChange does leaves a real societal impact on both their students and what students do with their knowledge – something very important to me.

9. What advice would you give to future TechChange interns?
Find ways to engage with the people around you in the office: They are all sharp, interesting folks and the office banter is always lively. The projects that everyone works on are all so different, but the way they come together in our weekly show-and-tells is pretty cool to see.

Explore the city around you: Washington DC just topped Forbes’ list of “America’s Coolest Cities” – from my experience here, that has definitely rang true! There are many hidden gems in the area to be discovered; Will recommending me a secret taco joint in the neighborhood comes to mind. Being here during World Cup season has definitely helped – DC is also ranked as the best place in America to watch soccer!

Interested in applying your coding and programming skills for social good? Apply to be a Junior Programmer at TechChange here.

After a summer at TechChange, it’s time for Sean Bae to start his first year at the University of Maryland-College Park this fall where he is considering a major in Electrical Engineering. Before heading to College Park, he reflects on his time at TechChange as a Software Engineer – Analytics Intern where he worked on D3 data visualization projects to make online learning interactive.

1. How did you hear about TechChange?

During the last fall, my dear friend Michael Holachek (a.k.a. “Code Ninja”), currently a rising sophomore at MIT, kindly shared his TechChange internship experience with me. While I was browsing through the TechChange website, I came across the job description of “Software Engineer – Analytics”, which is when I became first interested in working for TechChange.

2. Why did you choose TechChange to spend your summer before beginning college?

After taking an online Machine Learning course from Caltech, I became really interested in not only how to use computational algorithms to find correlations in data, but also how to interactively visualize them in aesthetically pleasing ways that can provide hidden insights for the front-end users.

TechChange’s job opening for the “Software Engineer – Analytics” quickly grabbed my attention because of the idea of being able to work in the cutting-edge web development environment, while learning principles of real-life software engineering practice. The fact that I will be contributing to the company that aims to promote social change, and educate the global community was also a big plus.

3. What are your interests?

I love physics and mathematics. In college, I plan on studying Electrical Engineering and Computer Science, the two subjects that I believe will let me apply my passion in physics and math into solving real-life problems.

During my free time, I play piano, do Cross Country running and play Ultimate Frisbee. Also, I have a longstanding interest in modern European history, and I enjoy having discussions and debates with my friends on various thought-provoking topics such as political philosophy, epistemology, ethical dilemmas, and religion.

4. How did you use your TechChange internship to explore your interests?

TechChange offered me a lot of flexibility in terms of what projects I worked on. While my main projects were developing front-end interactive D3.js (Data-Driven-Documents) visualizations, I also had opportunities to learn about SaltStack server provisioning automation, and work on small back-end Ubuntu server projects.

Surprisingly, computer science wasn’t the only relevant subject in my work! I found my physics knowledge useful when I was working with D3 Force Directed Graphs, which used electric charge model and pseudo-gravity to compute the location of vertices of the graph until they reached the “electrostatic equilibrium”. My knowledge in discrete math and linear algebra also became invaluable when I was developing a social-learning matching algorithm to solve a combinatorial optimization problem that turned out to be similar to the Minimum weight spanning tree problem.

Sean Bae with the TechChange staff

The TechChange team battle each other in a heated game of “Settlers of Catan.”

Apart from work, we had occasional TechChange Board Game days, World Cup cheering days, soccer/Frisbee team-bonding sessions and nearby park strolls that made my time at TechChange much more enjoyable and social.

 5. What did you do at TechChange this summer? What was your role at TechChange?

 During my time at TechChange, I developed front-end interactive D3.js visualizations for the TechChange online course platform. Some of the major projects include the TechChange social matching algorithm, social matching recommendation visualization, and course-wide point leaderboard system. While my work was mostly focused around the front-end JavaScript design, TechChange’s cohesive tech team structure let me peek into and learn insights from other tech team members’ back-end projects as well.

 6. What did you learn during your time at TechChange?

Technical skills weren’t the only valuable assets that I learned during my time at TechChange, but as an overview, I learned:

  • How to create interactive data visualizations with D3.js
  •  Efficient Git distributed version control (DVCS) team workflow for constant deployment
  • Advanced JavaScript debugging with the Google Chrome browser DevTools
  • How to automate virtual development environment creation using Vagrant
  • WordPress web plugin development with PHP and MySQL
  • Industry-standard JavaScript Design patterns
  • Regex (Regular Expression)
  • Django server structure
  • Full stack web app development combining Node.js, Express framework, MongoDB and Jade HTML Pre-processor
  • How to maintain a healthy diet (which was unexpected!)

Sean Bae coding D3 data visualization

Sean codes D3 data visualization for encouraging interaction and engagement on the TechChange learning platform

 7. Did your TechChange experience end up going as you expected?

I was expecting my internship experience to be mostly associated with computer programming. However, people at TechChange seem to follow the “work hard, play hard” philosophy. After working hard, we had times to socialize, play soccer and games together, which made my experience much more interesting. I was also surprised by how friendly and opened people were and how flexible the working environment was at TechChange.

 8. Would you come back to work at TechChange one day? Why?

I would love to! TechChange’s tight-knit community and energetic teams have magical power that draws people. Supportive and caring, yet productive, efficient, and techie team members make TechChange a fantastic environment to work on projects that create real impact in the real world.

9. What advice would you give to future TechChange interns?

  • Search for opportunities: TechChange has many different teams that you can pursue many different projects in international relations, course facilitation, media/video productions, UI/UX design and computer programming. If you find someone else working on a project that you want to take challenge on, then just simply ask.
  • Explore nearby restaurants: located right across the U Street metro station, TechChange HQ is located in the midst of many spectacular restaurants; there are many places to explore around in U street for lunch, from an authentic Ethiopian restaurant to gourmet falafel place and famous Ben’s Chili Bowl. Take the full advantage of the plethora of exotic choices and try exploring many ethnic food groups!

I’ve always been a visual learner. As a digital animator, one of my responsibilities is trying to make important information in international development and public health organizations easier to understand and share. With 65 percent of all people as visual learners, it is important in data-intensive fields such as international development and public health to have training content that is easy to digest through graphic organizers and data visualizations. I’ve learned how creating an animation or interactive graphic mimics the learning process: breaking down components of a concept and putting them together. When animating, I see the pieces of an animation as creating joints for a once inanimate object. I am always learning more about that topic as I break down components and put them back together.

When working with Johns Hopkins Bloomberg School of Public Health Center for Communication Programs (JHU∙CCP), USAID, and FHI 360 on their new Global Health eLearning (GHeL) Center online course, Health Communication for Managers, I learned about the basics of health communication for global development professionals and academics and tried to make it engaging with an interactive infographic.

Although the creative process in building out this interactive graphic was a constant feedback loop with many iterations, here are the basic steps of how the process of creating an interactive infographic works:

1. Map out the vision and purpose of the infographic, and understand its constraints
When crafting a training program for health communication for managers, the Knowledge for Health Project (K4Health) at the JHU∙CCP contacted TechChange to produce animation videos to create an engaging learning experience with its infographic. They gave us a lot of creative freedom to make one of the training’s main infographics interactive. After a consultation with JHU∙CCP, we all agreed on the vision for the interactive graphic and its purpose for the graphic to be intuitive, visually appealing, simple, and easy to understand. Then JHU∙CCP sent us reference materials that included a general brief of interactivity requirements for the platform and technical specifications.

Last year, GHeL went through a significant site redesign and now hosts its 65+ free courses on an open source, open access Drupal platform. JHU∙CCP was excited to test out the new site features and, in keeping with latest trends in online learning, was interested in adding an interactive layer to its primarily text based courses. However, the majority of GHeL learners access the site from low and middle income countries where access to high speed internet remains a critical barrier. Any interactive elements added to the site needed to load easily and quickly in low bandwidth environments in order to cater to learner needs.

We decided to go with HTML5, the latest standard for HTML, as it is becoming almost a universal standard in terms of web browser support. Where it was previously only possible to do this level of interactivity with graphics either with Flash (a technology that is almost obsolete with more flaws than advantages) or with rather complex javascript, authoring something like this in HTML5 with a product like Adobe Edge Animate is relatively easy and powerful. By using HTML5, we can create a lightweight infographic that can load with minimal bandwidth without losing any graphic quality or interactive elements. The infographic will not only load quickly, but it will also be accessible on a tablet or mobile device without loading any additional resources.

Starting with the initial static images in text, PDF, and .jpg format, JHU∙CCP informed us that they didn’t want just a basic .jpg image with hotspot (an area on an image that has a function attached to it); they wanted a bit of “edge” to it. As a result, we interpreted the graphic similarly to the Google Doodle interactive logos. However, we tried to keep the graphics consistent with static printed version of graphic, yet with an interactive element.

2. Convert and reformat content to be web-friendly & break apart the graphic itself into layers and components.

For the next step, I traced these .jpg files to stay consistent with the original graphics, which appear in other parts of the training. I then created vector files with certain colors using Adobe Illustrator. When working with these files, my thinking process involved questions such as, “What part of the graphic will be clickable? What colors will change?” I then made a basic mock-up in Illustrator and used Adobe Edge Animate (Adobe’s version to HTML5 animation that is similar to Flash) to combine the component. This simple animation tool lets you create animations by combining multiple images within a time frame.

3. Build interactivity and triggers into graphic
JHU∙CCP sent us a brief of each graphic with buttons and Adobe Edge Animate, HTML5 animation web development authoring tool. The software resembled animation tools used including basic Adobe software. I then created a timeline where different states of the graphic appeared, adding breaks between the states. For the concentric circles within the graphic, I had to create each circle as a separate asset (or a button, picture, graphics, icons, illustrations, texts; components of an animation/infographic/illustration).

4. Combine animation with web development
I worked with my colleague Matthew on addressing bugs and optimizing the interactive infographic for different window sizes. He also assisted with responsive design (or designing for multiple devices and services), quality assurance (QA) and worked out the HTML5 coding. As an animator, it was a straightforward process to build graphic assets on a timeline, but I had issues with “what happens when you press on the thing”. Matt coded a conditioning system that made transitions smoother and user-friendly.

5. Get feedback and refine (ongoing)
In total, we created five graphics. Throughout the process, there were small edits in the text. Overall, I approached this interactive infographic project like any other animation project, but with interactive elements.

To access the free online course on “Health Communication for Managers”, please click here.

Interested in animating some of your static training content? Contact the TechChange Creative team at info@techchange.org.

It’s back to school time for many students including incoming Massachusetts Institute of Technology (MIT) freshman, Michael Holachek, who just spent his summer with the TechChange team in Washington, DC. As he starts off his university career in Cambridge, Massachusetts, he reflects on his time as a Junior Programmer Intern a.k.a. “Code Ninja” at TechChange.

How did you hear about TechChange? Earlier this year I was searching the web for summer tech internships in the DC area. That’s when TechChange came into the picture.

Why did you choose TechChange to spend your summer before beginning college? I wanted to work at TechChange for several reasons. First, the job posting for Junior Programmer Intern really appealed to me because it offered a chance to learn cutting-edge web development and system administration skills. I wanted to expand my programming experience in PHP, Javascript, bash, and other languages as well as apply it to real world projects.

But the posted job responsibilities were just part of the story; I also wanted to work at an organization that was rooted in helping people. TechChange’s personal expectations spoke to me: “[interns should exude] a passion for technology, a commitment to education, and a desire to help create social change.” Not only would I be gaining useful skills building software with the latest technologies, but I’d be contributing to a startup dedicated to the global community as well.

What are your interests? I’m interested in programming and web development, as well as Mandarin Chinese. I’m also intrigued by the hardware side of technology. I think I’ll major in electrical engineering and computer science in college. For fun I like playing the alto saxophone, biking, and kayaking.

How did you use your TechChange internship to explore your interests? Over the summer, I set up TechChange’s new server infrastructure, the system that hosts the TechChange website and course platform. I worked closely with TechChange developers to design a system that was both fast and secure, as well as scalable and reliable. The challenge of creating such a system from scratch let me explore everything from the low level hardware to the TechChange user experience. I used this freedom to explore many types of programming and software development, both directly for the current task and more experimental for the future. The practical experience helped me immediately apply my new skills as soon as I learned them. I’ve always been interested in learning more about Linux, networks and servers, and system administration.

I also would occasionally bring in a hobby electronics project I had been working on and explain it to our team. Many people in the office also spoke Mandarin, so it was fun to occasionally brush up on my conversational Chinese.

What did you learn during your time at TechChange? What specific skills have you gained? Every day at TechChange was filled with critical thinking, new programming skills, and business inspiration. I learned that being a sysadmin is difficult! But I also learned a lot about how a startup works.

Specific skills:

  • How to automate servers with Salt Stack

  • Writing quality documentation

  • How to configure nginx web server

  • How to set up WordPress Multiuser on nginx

  • WordPress plugin development

  • Google Pagespeed caching

  • Working in a small development team, ensuring strict adherence to version control standards and diligent task management

  • Time management

Did your TechChange experience end up going as you expected? Well, some might say that! The startup life was much more exciting than I expected—it certainly didn’t just involve programming. S’mores-making Fridays and the occasional “Tim Tam Slam” really kept it interesting.

Was there any aspect about TechChange that surprised you?

While at first I thought the TechChange office (fondly known as the “nerd attic”) was a bit small, I quickly learned that a cozy work area can actually a benefit. There was no communication barrier to asking questions or discussing something. Constantly being exposed to everyone else’s work was also really exciting because I got a preview of all the pieces of TechChange and how they fit together.

Would you come back to work at TechChange one day? Definitely. TechChange has a certain energy that makes me excited about why I’m interested in tech. The combination of a technically-minded but socially conscious group of animators, artists, entrepreneurs, programmers, and writers made my experience at TechChange unique.

What advice would you give to future TechChange interns?

  • Explore everything. TechChange gives you a lot of flexibility both in terms of how you work and what you work on, so make sure to appreciate it and reach out to explore your interests.

  • Bike to work. Although it might sound boring especially if you live far away, biking to work in good weather can be a meditative way to start the day.

The TechChange course on Mobiles for International Development starts on June 18. Sign up now!

Have you ever been stuck on the mobile version of a website and were unable to go where you wanted just because you were surfing on your smartphone? One solution gaining prominence is called responsive design, which uses proportional measurements and other techniques to display appropriately-sized content on any device from large displays to smartphones. We are pleased to announce that we have launched our new fully-responsive website with the mobile device in mind. Not sure what responsive design is? Try resizing this window wider and narrower and watch what happens, or if you have a smartphone, try loading our site on it.

1. Mobiles matter and your audience uses them

It’s no secret that we’re big fans of mobile tech (re: Blog Posts of ours: Thoughts on Mobile Money for Development, FrontlineSMS and Technological Responsibility, Risk and Rewards of Mobile Technology in Governance Deployment), and mobile internet users are projected to surpass desktop users by 2015. Furthermore, Jon Evans of TechCrunch predicted that in five years most Sub-Saharan Africans will have smartphones and Vodafone recently announced that they will make a high-end low cost smartphone specifically designed for consumers in developing economies. We tweet more than a dozen articles every day on new innovations in mobile tech, from the developing world to higher education. That’s why when we redesigned our website to represent our online identity, we designed it with mobile in mind. This isn’t just on principle; we’ve seen our mobile traffic increase 175% from the same period last year.

2. Because it can save your organization time and money over the long run

There are many ways to approach mobile, and in the end we decided that a responsive design approach made the most sense for our needs. Building a responsive site based off a common codebase limits the hours needed to update code for each mobile platform out there (iOS, Android, Blackberry, Windows Phone 7, and more). While tools exist to streamline these processes and create cross-platform mobile apps, like PhoneGap and Appcelerator, this approach seemed overkill for our site. Furthermore, even if you do develop a native app, with the increase of mobile web use,  your site will be much easier to find, navigate, and utilized by web searchers.

We’re obviously not the first organization to do this (and we’re a little embarrassed it took us this long to catch up), but we are huge believers in the potential for responsive design to broaden reach and shorten development times (over the long run) and we are happy to be a resource for others considering a move in this direction.

3. Because it forces you to re-evaluate your priorities

We decided to take a “mobile first” approach to responsive design, which emphasizes designing for the smallest and most constrained canvas and then building upwards. We felt that this would be a good way to sift through the many pages and multitudes of text on our former site and pull out what was absolutely necessary and most relevant to our users. There are many many reasons to go mobile first, but we found that this process helped clarify our mission and focus.

The last point is that we didn’t do it alone. We read forums, checked ideas, circulated betas, and then asked for feedback from tech communities to help us keep building our model. That’s why we’d like to close with asking you, the reader, for your feedback if/when you get a chance to check out our site — either on a mobile device or otherwise. Also feel free to ask us any questions by emailing info@techchange.org!

After all, any technology is only as powerful as the community that uses it.