wylie

In my ongoing work to improve the Popcode code editing environment, I came across the Language Server Protocol, which is widely integrated into desktop coding tools for features like autocompletion. The idea of connecting a language server to a browser has been tried before, specifically by TypeFox teaching the language server protocol to Microsoft’s Monaco editor, but I could not find any efforts to apply that to the CodeMirror editor.

This leads me to today, where I have created a library that connects a CodeMirror editor in a web browser to a language server, and automatically configures autocompletion, syntax checking, and go to definition support while being fully customizable. I spent a month creating a hosted demo environment to explain this functionality- when you connect to that environment, you will get assigned a new container to run your own language server.

Screenshot of the autocompletion functionality for Javascript/Typescript:

The library code is on Github under the ISC license. I welcome you to use the library in your own projects and to submit issues and pull requests you may have! As a solo developer on this, I’m also very excited to see if this code is useful before investing more in maintaining it.

The frontend of the demo environment is also available on Github here.

This version of the library requires a Web Socket connection to a language server, which is most similar to the inter-process communication of a language server running on your desktop. If your specific language server supports these features, they will be available in the browser as well:

• Intellisense autocomplete
• Signature completion
• Hover tooltips
• Highlighting matching symbols in document
• Linting or syntax errors
• Within the same file: Go to Definition, Type Definition, and Find References

There is an example project provided within the library to show how you might configure the library, but a simple configuration might look like this:

import * as CodeMirror from ‘codemirror’;
// You are required to install the show-hint addon
import ‘codemirror/addon/hint/show-hint.css’;
import ‘codemirror/addon/hint/show-hint’;</p>

<p>// Each adapter can have its own CSS
import ‘lsp-editor-adapter/lib/codemirror-lsp.css’;
import { LspWsConnection, CodeMirrorAdapter } from ‘lsp-editor-adapter’;</p>

<p>let editor = CodeMirror(document.querySelector(‘.editor’), {
  value: ‘var code = “Hello world!”;’,</p>

<p>// Optional: You can add a gutter for syntax error markers
  gutters: [‘CodeMirror-lsp’]
});</p>

<p>// Take a look at how the example is configured for ideas
let connectionOptions = {
  // Required: Web socket server for the given language server
  serverUri: ‘ws://localhost:8080/html’,
  // The following options are how the language server is configured, and are required
  rootUri: ‘file:///path/to/a/directory’,
  documentUri: ‘file:///path/to/a/directory/file.html’,
  documentText: () =&gt; editor.getValue(),
  languageId: ‘html’,
};</p>

<p>// The WebSocket is passed in to allow testability
let lspConnection = new LspWsConnection(editor)
  .connect(new WebSocket(‘ws://localhost:8080’));</p>

<p>// The adapter is what allows the editor to provide UI elements
let adapter = new CodeMirrorAdapter(lspConnection, {}, editor);</p>

<p>// To clean up the adapter and connection:
adapter.remove();
lspConnection.close();

Tags: recurse

This year I ran my first marathon. I would have been running anyway, but having a goal and deadline made me focus and push myself beyond what I’d ever done before. My work at the Recurse Center this fall was the same. Now that my 12 weeks at the Recurse Center are over, I want to reflect on the lessons I’ve learned about myself and my abilities, what went well, and what didn’t.

Background

When I was laid off from a startup this fall, I wanted to bounce back stronger than before. I didn’t need to get another job right away, so I had time to focus on training for the marathon and doing programming projects. At a minimum, I needed to learn the latest technology to keep working as a software engineer. But I also wanted to complete a project that would tell a good story about my career and interests, where I would learn a lot. The Recurse Center sounded like a great opportunity for me:

The Recurse Center is a self-directed, community-driven educational retreat for programmers in New York City.

We believe people learn best when they take control of their own education and are free to explore what they’re interested in. RC is heavily influenced by unschooling.

Never graduate. RC doesn’t end after you leave. We have a diverse, active, and engaged alumni community of over 1,300 smart, enthusiastic, helpful programmers all over the world.

The length of the Recurse Center is up to 12 weeks, and new people start every 6 weeks in a batch. They also help with finding a programming job, which I thought would be helpful after my batch.

Picking projects

Some of the most interesting work I had done over the last year was volunteering to teach high school students to build websites. I really liked getting the students to see the expressive power of code, but also saw how they struggled to understand all the complexities of it. I had a loose idea that I could improve the tools students are using, and that if I did good enough work, I could give a talk like two of the best talks I ever attended: Stop Drawing Dead Fish by Bret Victor in 2012, and Using Javascript to Teach Javascript by John Resig in 2015. This led me to brainstorm projects with the restrictions that they:

• Were for teaching students to code
• Played up my strengths
• Used modern technology
• Were original
• Could be published
• Could be completed by myself in three months

I’m happy that I added these restrictions, because the projects I ended up working on were so interconnected that I was able to plug them into each other in the last week of Recurse. In doing that, I felt like my work was adding up to something greater than its part, and like my efforts were worth it. But I also felt like being so focused on my own projects had some downsides, especially in comparison to what others were doing at Recurse.

Be a part of the community

This may be obvious to some, but it took me a while to figure out how to make the most of the community at Recurse. The self-organized events didn’t fit my preconceptions of how to use my time, so I skipped most of them. For example, many Recursers are looking for their first professional programming job, and hosted interview prep sessions that I didn’t attend. It was an isolating feeling to be working on my project and not to have anyone who I could talk through ideas about my work with, and I wanted to fix it.

I started imitating other people who I thought were taking more advantage of the community, by offering to pair program, debug configuration issues, talk about test setup, and work through interview problems, which was a lot more fun! Specifically, I was posting and answering more questions on Zulip, like “Would anyone like to pair on Docker setup?” I found that when I did this, unexpected people would start conversations with me, and this finally led to me being able to talk about my project with people and feeling less isolated.

Share work in progress

I have a tendency to avoid drawing attention to my work, so I thought it would be important for me to get out of my comfort zone by demoing projects and interesting things I’ve learned at the weekly Recurse demo nights. Having a mini-deadline every week was something I thought would help to me live with imperfections in my work. I noticed that most Recursers were also avoiding demos until they had a working project, which meant that I had no idea what they were working on, so I would start asking people the same questions I was asking myself: “What did you learn this week? Can you show me what you have so far? What’s the next thing that you can demonstrate next week?” Of all the things I did at Recurse, I think this was the one that was most helpful to others and myself. Sharing my work in progress, and encouraging others to do so, helped me to know people in the community better, and also helped people get to know me.

Highlights

Looking back on Recurse, some of my favorite times were the social activities after hours, and I wanted to remember the fun times outside programming:

• D&D nights
• People asking me about my marathon
• Group lunch at Sahadi’s
• Assembling Commander decks for the game collection
• Going away Karaoke

What’s next?

Before attending Recurse, I thought that it was a place where everybody would be working on and talking about their own open source projects, and I applied because that’s what I wanted to do. I found a much broader range of people– beginners, experts taking a break, people switching careers, artists, scientists, activists, and more— who all want to be better programmers. I pushed myself outside of my comfort zone in programming, sharing my work, collaborating, and being part of a community. I’m sad that Recurse is over, but as they say, I will never graduate. I intend to be back in the future to share more work in progress!

Consider applying to the Recurse Center. They now offer $10,000 fellowships for women working on open source programming projects, research, and art.

Thanks to Monica Mercola and Laura Lindzey for reviewing drafts of this post

Tags: recurse