Giter Club home page Giter Club logo

codediff.js's Introduction

Hi there ๐Ÿ‘‹

Effective TypeScript 2nd Edition Cover

I'm Dan, author of Effective TypeScript: 83 Specific Ways to Improve your TypeScript. The second edition came out in May 2024 and I'm very excited about it!.

Effective-style books are aimed at developers who already know the nuts and bolts of a programming language, but want to learn how to use it more effectively. Rather than explaining the three ways to do X, an Effective book will tell you which one to use in which situation, and which to avoid entirely. By learning about usage, as well as the odd corners of TypeScript, you'll advance from a beginner or intermediate developer to a seasoned expert.

I also write about TypeScript online at effectivetypescript.com, where you can find sample items from the book.

I have many, many open source repos on GitHub, but here are some of the most popular by โญ๏ธs:

  • source-map-explorer: Answers the question "why is my JavaScript bundle so big?" using an interactive treemap visualization.
  • dygraphs: Venerable JavaScript charting library. Aims to get you from data to interactive chart quickly, then give you lots of options for customization.
  • effective-typescript: Code samples, Table of Contents and item summaries for Effective TypeScript (O'Reilly 2024).
  • oldnyc: Source code for the OldNYC geocoding pipeline, OCR and web site, launched in 2015.
  • webdiff: Two-column web-based difftool with syntax highlighting and support for image diffs. Instead of git diff, run git webdiff.
  • localturk: Perform repetitive manual tasks on your own computer using the same API as Amazon's Mechanical Turk. Great for generating some data or prototyping a Mechanical Turk UI.
  • RangeHTTPServer: Python's built-in http.server does not support range requests. This extends it to fix that.
  • literate-ts: Type check code samples in books and blogs. Used to verify Effective TypeScript. Read more here.
  • crosswalk: Library for adding TypeScript types to both your Express server's REST API and the client code that uses it.
  • pg-to-ts: Generate TypeScript types for your Postgres schema. See TypeScript and SQL: Six Ways to Bridge the Divide .
  • crudely-typed: Simple "everyday CRUD" Postgres queries with perfect TypeScript types.

codediff.js's People

Contributors

cemerick avatar danvk avatar mmv avatar splewako avatar yonatan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

codediff.js's Issues

Double scroll bars

See screenshot, I'm getting a scrollbar on both the container page and the iframe'd page.
screen shot 2014-07-10 at 6 47 06 pm

It's unclear what different shades of green mean

It's not clear what distinction is being made between the two shades of green on the right. It's certainly not a helpful one.

screen shot 2014-09-16 at 5 40 34 pm

I think one is a change and one is an add, but this distinction just doesn't matter.

Update screenshot

The screenshot in README.md is getting increasingly out of step with the current UI.

Show context line in diffs

github shows the function that the diff you're looking at is part of, even if its declaration is many lines outside of the diffhunk:
screen shot 2015-03-09 at 11 45 19 am

I'm not sure how this is implemented, or if it requires language support. git diff does this, too:

$ git diff d5ce61bccb2
diff --git a/extras/synchronizer.js b/extras/synchronizer.js
index cbe26d2..f39209b 100644
--- a/extras/synchronizer.js
+++ b/extras/synchronizer.js
@@ -200,7 +200,7 @@ function dygraphsBinarySearch(g, xVal) {
   var low = 0,
       high = g.numRows() - 1;

-  while (low <= high) {
+  while (low < high) {
     var idx = (high + low) >> 1;
     var x = g.getValue(idx, 0);
     if (x < xVal) {

Show metadata associated with individual lines

Need some way to stick arbitrary markup under a line to show inline comments.

This will make balancing left/right sides more difficult. (Would require either table layout or JS-based layout).

Wrap long lines

Critique, github and others do this. codediff.js should as well.

Current behavior is to scroll both panels horizontally.

This will require some reworking of the markup to keep the left/right side balanced.

Try `word-wrap: break-word`

The mocha test runner uses this to get character-by-character wrapping w/o adding soft breaks everywhere.

Add a "minJumpSize" option

It's silly to show "2 lines omitted". There should be a minimum, say 20 by default, below which we'll just show the code.

Character diffs should typically be on word boundaries

codediff.js often makes poor choices about how to present character diffs. For example, in this three line diff:

Before:

<ImageDiffModeSelector filePair={filePair}
                       mode={this.state.imageDiffMode}
                       changeHandler={this.changeImageDiffModeHandler}/>

After:

<DiffView filePair={filePair}
          imageDiffMode={this.state.imageDiffMode}
          changeImageDiffModeHandler={this.changeImageDiffModeHandler} />

it shows these character diffs:

screen shot 2014-09-16 at 11 40 27 am

All three of these have problems, and all three would be improved by making the intra-line diffs operate at the word level, rather than the character level. In other words, rather than applying the diffing algorithm to line.split('') (which splits the line into individual characters), it should be applied to a list containing the words in the line. These are broken by whitespace, symbols and capital/lowercase transitions.

Blank lines not selected

Blank lines aren't visibly selected:
screen shot 2015-03-06 at 12 45 15 pm

They are copy/pasted, but you wouldn't know if from the display.

Bad choice of diffs

In hammerlab/cycledash, diffing ef8764395079dfc2ab5b9c70db9ad9b735d5e0cd..6bbc1747de05b4cadfb4e900928047d8c8bad15c produces a really bad diff in cycledash/views.py. One small function (start_workers_for_run) moves, while the rest of the file is modified in small ways. codediff.js aligns on start_workers_for_run, whereas GitHub shows it moving while the rest of the file stays relatively motionless.

Another bad diff

It's not terrible, but the added comment plus character diffs produce a sub-optimal rendering:

screen shot 2015-04-17 at 3 14 08 pm

It would be better if the comment were a pure add and each individual line were a three character change (adding 'chr').

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.