667
edits
Changes
no edit summary
* [[DPS909 & OSD600 Winter 2017 - Lab 4 | Lab 4]]
==Week 5==
* Strategies for Understanding Code
** '''RTFM''' (Read the F.....antastic Manual!): <code>README.md</code>, <code>Contributing.md</code>, website?, wiki? Read it. Twice. Mostly you want to start building up a list of keywords, common themes, and useful tips you can use later when you start trying things.
** '''Bottom-Up''': look at the code, directory structure, scan for file/dir names that related to your task. Don't get bogged down, just go for a walk in the code and take note of what you see.
** '''Top-Down''': try to find a UI string (e.g., menu name, button label) that you can search for within the code
** '''Sideways Excavation''': look at a similar code path or feature for clues about where you should work (e.g., want to add a new menu option to 'File', look at one of the existing ones)
** '''Time Machine''': use project history (commits, log messages, blame, issues) for info about how code was introduced and evolved
** '''Clean Room''': read the <code>test/</code> code. What do the original devs ''think'' the code should do? How do they use it, when do they use, in what order to they call things, which code is related, etc.
** '''Family Tree''': find code in other projects/repos that uses the same code you're interested in. How does Project X use this API in their code? Use other people's code to build an understanding of what you should do (e.g., read extension code from https://brackets-registry.aboutweb.com/ to understand Brackets APIs)
** '''Ask a Local''': don't be afraid to ask for clarification from more experienced devs. Often they can narrow your search to a particular area of the code. Use mailing lists, ask in bugs/issues, discuss on chat systems, talk to people IRL!
** '''Just Try Stuff''': often the best thing to do is simply to try things. Create a new branch <code>experiments</code> and start adding logging, debug statements, delete things and see what happens, add things and see what happens, change things and see what happens! If you can break it, you can probably make it do something useful.
* Tools for Understanding Code:
** <code>git grep</code>
** <code>git blame</code>
** Search within commit messages: <code>git log --grep "some string"</code>
** Search within the commit content for addition/removal of a string: <code>git log -S "some string"</code>
** Search all branches: <code>git log -S 'populate_database' --all</code>
** Search in date range: <code>git log -p --since=2012-01-01 --until=2015-02-01</code>
** Log Formatting examples
*** <code>git log --graph --pretty=oneline --decorate</code>
*** <code>git log --pretty=format:"%h %ad | %s%d [%an]" --graph --date=short</code>
*** <code>git log --graph --pretty=format:'%Cred%h%Creset %an: %s - %Creset %C(yellow)%d%Creset %Cgreen(%cr)%Creset' --abbrev-commit --date=relative</code>
** Searching on GitHub: Repositories, Code, Commits, Issues, Wikis
*** Find all uses of <code>fadeIn()</code>https://github.com/search?utf8=%E2%9C%93&q=fadeIn%28%29&type=Repositories&ref=searchresults
*** Within repo vs. all of GitHub (e.g., how a function is used, finding similar bugs based on error messages, who is using a piece of code, etc)
*** Searching within repo only works in original repo vs. forks (e.g., https://github.com/adobe/brackets not https://github.com/mozilla/brackets)
*** Commits, Code (and Languages), Issues
* Some examples of bugs we could try to solve using the above techniques:
** https://github.com/mozilla/thimble.mozilla.org/issues/889
** https://github.com/mozilla/thimble.mozilla.org/issues/1306
** https://github.com/mozilla/thimble.mozilla.org/issues/1120
** https://github.com/mozilla/thimble.mozilla.org/issues/958
* [[DPS909 & OSD600 Winter 2017 Release 0.1 | 0.1 Release (Due Fri Feb 10)]]
==Week 6==
* Combining Open Source Projects
** We'll work together to fix this bug: https://github.com/mozilla/thimble.mozilla.org/issues/1696
** We'll try to add a sprite editor to Thimble for people to use for game programming, animations
** We'll do it as an Extension to Brackets
** Along the way we'll learn about working with code you don't know, integrating different projects, writing extensions, working with advanced web technologies and techniques, and we'll have some fun!
* [[DPS909 & OSD600 Winter 2017 - Lab 5 | Lab 5]]
==Week 7==
* Continuing with https://github.com/mozilla/thimble.mozilla.org/issues/1696
** https://github.com/juliandescottes/piskel
** https://github.com/juliandescottes/piskel-embed
* Issues:
** How to combine this into an extension?
** How to trigger things to load when you open a file?
** How to deal with save, open events with Bracket's filesystem?
* [[DPS909 & OSD600 Winter 2017 - Lab 6 | Lab 6]]
==Week 8==
* Code Review
** A change to the project is done by a contributor '''and''' a reviewer (and maybe more than one of each).
** No one is on their own doing work. No one is solely to blame for what happens next, good or bad.
** Automated vs. Manual code review
*** Linters (eslint, standard, csslint, etc)
*** Build systems, task runners (grunt, gulp, etc)
*** Travis CI
** Code review as scaling factor: enabling contributions
** Code review has nothing to do with how good you are at programming, isn't a value statement about you.
* Questions
** Do you need review on a one line change? A one word change? Why?
** What are the types of changes/results that you need to review? What is the process like?
** How does code review differ from pair programming, or working directly with a partner in the class/office?
* GitHub Code Reviews
** [https://help.github.com/articles/requesting-a-pull-request-review/ Asking for a review on a PR]
** [https://help.github.com/articles/about-pull-request-reviews/ PR Reviews]
* Let's do some reviews
** https://github.com/mozilla/thimble.mozilla.org/pulls
** https://github.com/mozilla/brackets/pulls
* [[DPS909 & OSD600 Winter 2017 Release 0.2 | 0.2 Release (Due Tues Mar 7)]]
** What worked?
** What didn't?
** What do you need to do differently for 0.3, 0.4?
** What did you learn doing this release?
** What still confuses you, or are you finding hard?
==Weeks 9, 10, 11, 12==
* More on Code Review
** How to create a good PR?
** https://github.com/mozilla/thimble.mozilla.org/pull/1559 is a **great** example of a good PR.
** This isn't a "beginner" problem, everyone struggles with it (cf. https://groups.google.com/forum/#!topic/mozilla.dev.platform/3ig8TZ-0rN8)
** Tips:
*** Name your branches with issue numbers, or describe your fix (e.g., <code>issue-123, fix-sidebar-styling</code>)
*** If you are fixing an issue, mention the issue number in your PR subject or commit message: <code>Fix #123: Fixing styling on sidebar to not overlap title</code>). GitHub will automatically close issues that are mentioned like this when the PR is merged.
*** Don't just use the issue number. Make sure you also include text to describe your fix.
*** Commit messages don't have to be 1-line long! You can write a long description of what you did, changes that are coming as a result, advice for devs following your patch, etc.
*** If your code has some visible impact on the app, create screenshots or a screencast animated gif and include it in the PR.
*** Discuss what your change does, what it's fixing, and how you solved it.
*** Tell the reviewer how to test your change, what to pay special attention to when reviewing, and give any other guidance.
* Learning JavaScript In Depth
** Look at code in Thimble (browser and node) and Brackets
** Understand node.js programming
** Complex ideas in JS:
*** Object Literals and JSON
*** Constructor Functions and <code>new</code>
*** Prototypical Inheritance
*** The many meanings of <code>this</code>
*** [http://bonsaiden.github.io/JavaScript-Garden/#function Anonymous Functions (lambdas)]
*** [http://underscorejs.org/docs/underscore.html Self-executing anonymous functions]
*** [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array Functional programming with Arrays], [https://github.com/adobe/brackets/blob/6affa7907fdc820f7b9083bc0ff7c9fb87fb3e57/src/language/HTMLInstrumentation.js#L93-L123 example]
*** [https://github.com/adobe/brackets/blob/ae17456a596965a1247b79ddb82c6e1518bc6e5e/src/utils/UrlParams.js Constructor functions and the prototype], [https://github.com/mozillafordevelopment/webmaker-app/blob/bfa6377bf49d14c16868dd3a4ae7b8f9fbcfcaea/lib/model.js another example]
*** [https://github.com/adobe/brackets/blob/791bcc436155cbd8e8e73429af4ca3fde0881703/src/utils/Compatibility.js Extending native prototypes]
*** [https://github.com/filerjs/filer/blob/develop/src/errors.js Dynamic property access]
* [[DPS909 & OSD600 Winter 2017 - Lab 7 | Lab 7]]
* [[DPS909 & OSD600 Winter 2017 - Lab 8 | Lab 8]]
* [[DPS909 & OSD600 Winter 2017 - Lab 9 | Lab 9]]
* [[DPS909 & OSD600 Winter 2017 Release 0.3 | 0.3 Release]]
* [[DPS909 & OSD600 Winter 2017 Release 0.4 | 0.4 Release]]
<!--